Change a view through configuration

4 min

Tailor the editing UI to different teams by adding or removing components from a view through configuration. Use JSON-based settings for static changes or C# modules for conditional logic based on user roles.

Add a component through configuration and definition

Add a component to the CMS Home view by targeting its plug-in area in appSettings.json. The definitionName value maps to the full class name, including namespace.

Add the following configuration to appSettings.json under the web project:

{
  "EPiServer": {
    "CmsUI": {
      "ViewOptions": {
        "Views": [{
          "Name": "/episerver/cms/home",
          "TransformationSettings": [{
            "TransformationType": "Add",
            "PlugInArea": "/episerver/cms/assets/defaultgroup",
            "DefinitionName": "<FullNamespaceTo>.TestComponentDefinition",
            "Name": "AddTestComponent",
                      }]
        }]
      }
    }
  }
}

Define TestComponentDefinition as follows:

[Component]
public class TestComponentDefinition : ComponentDefinitionBase {
  public TestComponentDefinition() : base("dijit/layout/ContentPane", "Test Component", "Test Component Description") {
  }
}

Remove an existing component

Remove a component from a view to declutter the editing UI. The following example removes the built-in Media Component from the CMS Home view.

{
  "EPiServer": {
    "CmsUI": {
      "ViewOptions": {
        "Views": [{
          "Name": "/episerver/cms/home",
          "TransformationSettings": [{
            "TransformationType": "Remove",
            "PlugInArea": "/episerver/cms/assets/defaultgroup",
            "DefinitionName": "EPiServer.Cms.Shell.UI.Components.MediaComponent",
            "Name": "RemoveMediaComponent"
          }]
        }]
      }
    }
  }
}

An initializable module provides an alternative approach:

[ModuleDependency(typeof (EPiServer.Web.InitializationModule))]
public class ViewConfigurator: IConfigurableModule {
  public void ConfigureContainer(ServiceConfigurationContext context) {
    context.Services.Intercept((IServiceProvider locator, ViewOptions 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 remove the component for all users. To show or hide components based on access rights, use conditional logic in the C# module instead.

Transformations alone do not support conditions. Modify the GetViewOptions method to check a condition before adding the transformation:

[ModuleDependency(typeof (EPiServer.Web.InitializationModule))]
public class ViewConfigurator: IConfigurableModule {
  public void ConfigureContainer(ServiceConfigurationContext context) {
    context.Services.Intercept((IServiceProvider locator, ViewOptions defaultViewOptions) => GetViewOptions(locator, defaultViewOptions));
  }

  private static ViewOptions GetViewOptions(IServiceProvider locator, ViewOptions viewOptions) {
    IPrincipalAccessor principalAccessor = locator.GetService <IPrincipalAccessor>();
    if (principalAccessor.Principal.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) {}
}

Built-in public components are defined in the EPiServer.Cms.Shell.UI.Components namespace.