Change a view through configuration

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

Add a component through configuration and definition

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

Add the configuration below to appSettings.json under your web project.

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

TestComponentDefinition should look like this:

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

Remove an existing component

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

{
  "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"
          }]
        }]
      }
    }
  }
}

You can have 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((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 users; however, it is sometimes necessary to 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, it would be easy to modify the above C# sample only to 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((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.

Updated 10 months ago