HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Replace a component globally

Describes how to replace a component globally in the Optimizely Content Management System (CMS) user interface.

The following example shows how to replace a component for the entire system. This example also shows how to replace the built-in Optimizely Content Management System (CMS) page tree with a custom page list component.

  1. Declare a replacement component. Using the definition name of the component you want to replace is important.

    // A simple component implementation represented with a dijit content pane on the client side
    public class MyCustomPageList: ComponentBase {
      public MyCustomPageList(): base("dijit/layout/ContentPane") {
        // Add "Hello World!" as non-persisted content to the dijit content pane
        this.Settings.Add(new Setting("content", "Hello World!", false));
      }
      public override string DefinitionName => new PageTreeComponent().DefinitionName;
    }
    
  2. Register the component using the IOC container by implementing the ConfigureContainer method of EPiServer.ServiceLocation.IConfigurableModule in an initialization module.

    [InitializableModule]
    public class InitializationModule: IConfigurableModule {
      public void ConfigureContainer(ServiceConfigurationContext context) {
        context.Services.AddTransient<IComponent, MyCustomPageList>();
      }
      public void Initialize(InitializationEngine context) {}
      public void Uninitialize(InitializationEngine context) {}
      public void Preload(string[] parameters) {}
    }
    

This replaces any creation of the PageTreeComponent with an instance of the MyCustomPageList type that is created by the IOC container.

📘

Note

An editor has to make a change in edit view to able to see new component.