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 Main area 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.

You can achieve an alternative solution by adding an 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, you sometimes must show or hide certain components based on user access rights.

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

However, you can modify the above C# sample only to add a view transformation when it meets a certain condition:

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

The EPiServer.Cms.Shell.UI.Components namespace defines the built-in public components.

Updated about 2 months ago