HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

Replace a component globally

This example 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. 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;
  1. 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.



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

What’s Next