Loading...
Area: Optimizely CMS
Applies to versions: 12 and higher
Other versions:

Modifying a view through configuration

Recommended reading 
Note: This documentation is for the preview version of the upcoming release of CMS 12/Commerce 14/Search & Navigation 14. Features included here might not be complete, and might be changed before becoming available in the public release. This documentation is provided for evaluation purposes only.

This topic provides an example of how to modify a view in the Optimizely user interface, through configuration.

Adding a new component via configuration and definition

The following example shows how to add a component (for a view through configuration) to the Mainarea 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": ""
                            }
                        ]
                    }
                ]
            }
        }
    }
}

With your TestComponentDefinition looks like

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

 

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

This kind of declarative way requires the developer 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((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 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((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) { }
}

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

Do you find this information helpful? Please log in to provide feedback.

Last updated: Sep 03, 2021

Recommended reading