Plug components into a view
Describes how to plug components into a view in the Optimizely Content Management System (CMS) user interface.
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. Optimizely Content Management System (CMS) provides helper classes with string constants to plug into an area without typing 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;
}
}
Plug 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 a tab into 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;
root.Add(fileManager);
var pageTree = new PageTreeComponent().CreateComponent();
pageTree.Settings["column"] = 1;
root.Add(pageTree);
return root;
}
In this example, other plug-ins can plug into the 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 views and loading a personalized hierarchy.
Updated 10 months ago