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

Modify a view through configuration

Shows how to modify a view in the Optimizely Content Management System (CMS) user interface, through configuration.

Add a component

The following example shows how to add a component (for a view through configuration) to the Mainarea plug-in path of the Test view. definitionName usually maps against the full name of the class including namespace.

<episerver.shell>
      <viewManager>
        <views>
          <add name="Test">
            <settings>
              <add name="AddTestComponent" 
                   transformationType="Add" 
                   definitionName="EPiServer.Shell.UI.Test.Fakes.FakeComponentDefinition" 
                   plugInArea="ShouldNotContainComponent" />
            </settings>
          </add>
        </views>
      </viewManager>
</episerver.shell>

Remove a component

The following example shows how to remove one of the built-in components - the Media Component.

<episerver.shell>
      <viewManager>
        <views>
          <add name="/episerver/cms/home">
            <settings>
              <add name="RemoveMediaComponent" 
                   transformationType="Remove" 
                   definitionName="EPiServer.Cms.Shell.UI.Components.MediaComponent" 
                   plugInArea="/episerver/cms/assets/defaultgroup" />
            </settings>
          </add>
        </views>
      </viewManager>
    </episerver.shell>

This kind of declarative way requires you to write a few magic strings. 

An alternative solution can be achieved by adding a new initializable module like this:

[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class ViewConfigurator : IConfigurableModule
      {
        public void ConfigureContainer(ServiceConfigurationContext context)
          {
            context.Services.Intercept((locator, defaultViewOptions) => GetViewOptions(defaultViewOptions));
          }
    
        private static ViewOptions GetViewOptions(ViewOptions viewOptions)
          {
            var viewDetails = new ViewDetails
              {
                Name = HomeView.ViewName
              };
    
            viewDetails.TransformationSettings.Add(new ViewTransformationDetails
              {
                Name = typeof(MediaComponent).FullName,
                DefinitionName = typeof(MediaComponent).FullName,
                TransformationType = TransformationType.Remove,
                PlugInArea = PlugInArea.AssetsDefaultGroup
              });
    
            viewOptions.Views.Add(viewDetails);
    
            return viewOptions;
          }
    
        public void Initialize(InitializationEngine context) { }
        public void Uninitialize(InitializationEngine context) { }
      };

Both examples will remove the component for all users; however, it is sometimes needed to show or hide certain components based on user access rights.

Transformations will not work in this case as they do not allow the user to specify conditions for modifying the component or not.

However, it would be easy to modify the above C# sample to only add a view transformation when a certain condition is met:

[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class ViewConfigurator : IConfigurableModule
      {
        public void ConfigureContainer(ServiceConfigurationContext context)
          {
            context.Services.Intercept((locator, defaultViewOptions) => GetViewOptions(defaultViewOptions));
          }
        
        private static ViewOptions GetViewOptions(ViewOptions viewOptions)
          {
            if (HttpContext.Current.User.IsInRole("Translators")) 
              { 
                var viewDetails = new ViewDetails { Name = HomeView.ViewName }; 
                viewDetails.TransformationSettings.Add(new ViewTransformationDetails 
                  { 
                    Name = typeof(MediaComponent).FullName, 
                    DefinitionName = typeof(MediaComponent).FullName, 
                    TransformationType = TransformationType.Remove, 
                    PlugInArea = PlugInArea.AssetsDefaultGroup 
                  }); 
                viewOptions.Views.Add(viewDetails); 
              }
            return viewOptions; 
          } 
    
        public void Initialize(InitializationEngine context) { } public void 
        Uninitialize(InitializationEngine context) 
          { 
          } 
      };

All built-in public components are defined in EPiServer.Cms.Shell.UI.Components namespace.