Last updated: Oct 27 2016

Area: Episerver CMS Applies to versions: 10 and higher
Other versions:

Plugging in components into a view

This topic describes how to plug in components into a view in the Episerver CMS user interface.

How it works

When you create a component definition, you can automatically plug the component definition into a view by defining plug-in paths to one or several containers. A plug-in path is a unique string that describes the plug-in area. Episerver provides helper classes with string constants to plug-in to an area without having to type the plug-in area as a string. For example, you can add the following code to your component:

private readonly string[] _plugInPaths = new string[] { EPiServer.Web.PlugInAreas.DefaultAssetsGroup };

public override string[] PlugInPaths
    get { return _plugInPaths; }

Plugging in component hierarchies

You can plug entire component hierarchies in by adding children to the top-level component that you create in the CreateComponent method. The following example shows how to plug in a new tab to the dashboard with two components:

public override IComponent CreateComponent()
    var root = new ComponentContainer() { PlugInPath = "/samples/dashboard/mycustomtab" };
    root.Settings["numberOfColumns"] = 2;
    root.Settings["title"] = "My custom tab";

    var fileManager = new FileManagementComponent().CreateComponent();
    fileManager.Settings["column"] = 0;

    var pageTree = new PageTreeComponent().CreateComponent();
    pageTree.Settings["column"] = 1;

    return root;
In this example, other plug-ins can plug into the new tab due to the definition of PlugInPath = "/samples/dashboard/mycustomtab". Use a special component definition class that creates a root component (that does not have a reference to the component definition of the hierarchy) because the CreateComponent method is called when creating new views and also when loading a personalized hierarchy.

Do you have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/