Replace a component globally

Swap a built-in component for a custom implementation across the entire system. This example replaces the CMS 13 page tree with a custom page list component.

1. Declare a replacement component. Set DefinitionName to match the component being replaced.

   C#

   // 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 in the IOC container by implementing ConfigureContainer from EPiServer.ServiceLocation.IConfigurableModule:

   C#

   [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) {}
     
   }

The IOC container creates an instance of MyCustomPageList whenever the system requests PageTreeComponent.

📘

Note

The replacement component appears after the editor reloads the edit view.