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

Create a view

Shows how to create a view.

You can create views in the Optimizely Content Management System (CMS) user interface.

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;
      }
    }
  }
}