HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

Creating a view

This example shows a dashboard view.

In Optimizely you can create your own views in the 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; }
            }
        }
    }