Replacing a component globally

This topic describes how to replace a component globally in the Optimizely user interface.

Example

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.

   [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 a new instance of the MyCustomPageList type that is created by the IOC container.

Related information

• Creating a React component

Last updated: Sep 03, 2021