Area: Optimizely CMS
Applies to versions: 12 and higher
Other versions:

Replacing a component globally

Recommended reading 
Note: This documentation is for the preview version of the upcoming release of CMS 12/Commerce 14/Search & Navigation 14. Features included here might not be complete, and might be changed before becoming available in the public release. This documentation is provided for evaluation purposes only.

This topic describes how to replace a component globally in the Optimizely 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 CMS page tree with a custom page list component.

  1. Declare a replacement component. It is important to use the definition name of the component that you want to replace.
    // 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 new component using the IOC container by implementing the ConfigureContainer method of EPiServer.ServiceLocation.IConfigurableModule in an initialization module.
    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 a new instance of the MyCustomPageList type that is created by the IOC container.

Note: Editor should make a change to Edit view to able to see new component

Related information

Do you find this information helpful? Please log in to provide feedback.

Last updated: Sep 03, 2021

Recommended reading