Describe content in the UI

8 min

In Optimizely Content Management System (CMS) version 7.0, the content system was introduced to use the central types of pages and blocks in CMS. Starting with the Optimizely 7.5 release, Commerce Connect catalog and Media system have been delivered as content.

UI descriptors

UI Descriptors describe the appearance and behavior of a content type, such as the icon used to display items. The following code illustrates how objects of the custom type ContainerPage behave in the user interface by specifying the CSS classes used to display the item, such as in listings or trees.

[UIDescriptorRegistration]
public class ContainerPageUIDescriptor: UIDescriptor<ContainerPage> {
  public ContainerPageUIDescriptor(): base("epi-iconObjectPage") {}
}

Inheritance

The type descriptor supports inheritance. When behavior is not defined on the specific type, it checks parent type descriptors for a description of the requested behavior. For example, if a page type does not specify a custom icon, the generic icon for pages is used.

Sticky view

"Sticky view" loads the previously used view when browsing the content tree instead of the default view. The sticky view functionality is enabled by default for every content item. If a content item should not use a sticky view and has its default view, set the EnableStickyView property to false.

Note Enable the feature for as many content types as possible, or turn it off for all content types. Mixing the true and false flag between content types may make the sticky view behavior seem inconsistent to editors, because there is no way for editors to know if the sticky view is enabled or disabled on a content item.

For example, to force the All Properties view as the default view for the StartPage type instead of the previously used view, set EnableStickyView to false and DefaultView to AllPropertiesView.

[UIDescriptorRegistration]
public class StartPageUIDescriptor: UIDescriptor<StartPage> {
  public StartPageUIDescriptor(): base(ContentTypeCssClassNames.Page) {
    DefaultView = CmsViewNames.AllPropertiesView;
    EnableStickyView = false;
  }
}

Resources

Add type-specific translations for the user interface for creating, moving, or deleting items.

The following example sets some generic "fallback" texts for any content, more specific texts for blocks, and specific texts for "YouTube blocks" (assuming that this is a type in your solution). It defaults to a language node under contenttypes with the name of the type without a namespace. Change the key by defining the LanguageKey property of your type descriptor, for example, if you have classes in different namespaces with the same class name.

<language name="English" id="en">
  <contenttypes>
    <icontentdata>
      <name>Content</name>
      <create>New Item</create>
      <move>Move Item</move>
    </icontentdata>
    <youtubeblock>
      <name>You Tube Block</name>
      <create>New You Tube Block</create>
      <move>Move You Tube Block</move>
    </youtubeblock>
  </contenttypes>
</language>

Content repository descriptors

CMS has a content repository descriptors entity to standardize components that show content from repositories. This class describes a repository so that the UI auto-generates settings for it. Create navigation components such as the page tree, or selection widgets such as the page selector. The following example shows the implementation for the block repository descriptor:

using System;
using System.Collections.Generic;
using EPiServer.Core;
using EPiServer.Framework.Localization;
using EPiServer.ServiceLocation;
using EPiServer.Web;

namespace Samples {
  [ServiceConfiguration(typeof (IContentRepositoryDescriptor))]
  public class BlockRepositoryDescriptor: ContentRepositoryDescriptorBase {
    public static string RepositoryKey {
      get {
        return "blocks";
      }
    }
    public override string Key {
      get {
        return RepositoryKey;
      }
    }
    public override string Name {
      get {
        return LocalizationService.Current.GetString("/contentrepositories/blocks/name");
      }
    }
    public override IEnumerable<ContentReference> Roots {
      get {
        var roots = new List<ContentReference> {
          SiteDefinition.Current.GlobalAssetsRoot
        };
        if (SiteDefinition.Current.GlobalAssetsRoot != SiteDefinition.Current.SiteAssetsRoot) {
          roots.Add(SiteDefinition.Current.SiteAssetsRoot);
        }
        return roots;
      }
    }
    public override string SearchArea {
      get {
        return "CMS/blocks";
      }
    }
    public override Type[] ContainedTypes {
      get {
        return new Type[] {
          typeof (ContentFolder), typeof (BlockData)
        };
      }
    }
    public override Type[] MainNavigationTypes {
      get {
        return new Type[] {
          typeof (ContentFolder)
        };
      }
    }
    public override int SortOrder {
      get {
        return 200;
      }
    }
    public override string[] MainViews {
      get {
        return new [] {
          HomeView.ViewName
        };
      }
    }
  }

The following example shows how to use the content repository to create a content selector for blocks within the repository:

using EPiServer.Core;
using EPiServer.Shell.ObjectEditing.EditorDescriptors;
using EPiServer.Web;

namespace Samples {
  [EditorDescriptorRegistration(TargetType = typeof (ContentReference), UIHint = UIHint.Block)]
  public class BlockReferenceEditorDescriptor: ContentReferenceEditorDescriptor<BlockData> {
    public override string RepositoryKey {
      get {
        return BlockRepositoryDescriptor.RepositoryKey;
      }
    }
  }
}

The following example shows how to configure a component in the assets panel of the CMS main view that shows content from the repository:

using EPiServer.Shell.ViewComposition;

namespace Samples {
  [Component]
  public class SharedBlocksComponent: ComponentDefinitionBase {
    public SharedBlocksComponent(): base("epi-cms.component.SharedBlocks") {
      LanguagePath = "/episerver/cms/components/sharedblocks";
      SortOrder = 100;
      PlugInAreas = new [] {
        PlugInArea.AssetsDefaultGroup
      };
      Categories = new [] {
        "cms"
      };
      Settings.Add(new Setting("repositoryKey", BlockRepositoryDescriptor.RepositoryKey));
    }
  }
}