HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

Create a view

Implement ICompositeView and IRoutable to define a custom view with containers and routing in CMS 13.

Define custom views to control the overall layout and navigation of the CMS 13 editing UI. Implement ICompositeView and IRoutable to set up the root container, tabs, and routing for the view.

The following example creates a dashboard view with a tabbed layout and a personalizable component container:

using EPiServer.Framework.Localization;
using EPiServer.Shell.ViewComposition;
using EPiServer.Shell.ViewComposition.Containers;
using EPiServer.Shell.Web;
using EPiServer.Web.Routing;

namespace EPiServer.Shell.UI.Models {
  [CompositeView]
  public class DashboardViewModel: ICompositeView, IRoutable {
    private string _routeSegment;
    private IContainer _rootContainer;
    private readonly LocalizationService _localizationService;

    /// <summary>
    /// Initializes a new instance of the <see cref="DashboardViewModel"/> class.
    /// </summary>
    /// <param name="localizationService">The localization service used for getting localized resources.</param>
    public DashboardViewModel(LocalizationService localizationService) {
      _localizationService = localizationService;
    }

    /// <summary>
    /// Gets the root <see cref="IContainer"/> that contains the different panels for the view.
    /// </summary>
    /// <value>The container.</value>
    public IContainer RootContainer {
      get {
        if (_rootContainer == null) {
          _rootContainer = new BorderContainer();

          TabContainer tabContainer = new TabContainer {
            ContainersPlugInArea = ShellPlugInArea.DashboardRoot,
              PlugInArea = ShellPlugInArea.DashboardRoot,
              ContainerType = ContainerType.User
          };

          var defaultTab = new ComponentContainer {
            PlugInArea = ShellPlugInArea.DashboardDefaultTab
          };
          defaultTab.Settings["numberOfColumns"] = 2;
          defaultTab.Settings["title"] = LocalizationService.Current.GetString("/episerver/shell/ui/resources/tabcontainer/newtabname");
          defaultTab.Settings["closable"] = true;
          tabContainer.Components.Add(defaultTab);

          ((BorderContainer) _rootContainer).Add(tabContainer, new BorderSettingsDictionary(BorderContainerRegion.Center));

          _rootContainer.Settings.Add("id", Name + "_rootContainer");
          _rootContainer.Settings.Add("persist", "true"); //Persist window size on client
        }
        return _rootContainer;
      }
    }

    /// <summary>
    /// Gets the name of the view. Used or finding views.
    /// </summary>
    /// <value>The name.</value>
    public string Name {
      get {
        return "/episerver/dashboard";
      }
    }

    /// <summary>
    /// Creates a new instance of the view.
    /// </summary>
    /// <returns>A new instance of the view.</returns>
    public ICompositeView CreateView() {
      return new DashboardViewModel(_localizationService);
    }

    /// <summary>
    /// Gets a localized title for this view
    /// </summary>
    public string Title {
      get {
        return _localizationService.GetString("/episerver/shell/ui/resources/dashboardview/title");
      }
    }

    public string RouteSegment {
      get {
        return _routeSegment ?? (_routeSegment = "dashboard");
      }
      set {
        _routeSegment = value;
      }
    }

    public string DefaultContext {
      get {
        return null;
      }
    }
  }
}