Describing content in the UI

Table of contents

• UI descriptors
• Inheritance
• Resources
• Content repositories

This topic describes ways to control how content is presented and behaves in the Episerver user interface. Content is a central feature in Episerver products.

In Episerver 7.0 the content system was introduced with usage of the central types pages and blocks in EPiServer CMS. With the Episerver 7.5 release, the Commerce catalog and Media system is delivered as content. 

UI descriptors

To make content types appear and behave differently, you can use UI Descriptors to describe appearance and behavior of a content type, such as setting the icon used to display items of the type. The following code describes how objects of the custom type ContainerPage behaves 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 so that when behavior is not defined on the specific type, it checks parent type descriptors for a description of requested behavior. For example, if a page type does not specify a custom icon then the generic icon for pages is used.

Resources

You can 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, some more specific texts for blocks, and very 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 namespace. You can 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>
        <blockdata>
            <name>Block</name>
            <create>New Item</create>
            <move>Move Item</move>
        </blockdata>
        <youtubeblock>
            <name>You Tube Block</name>
            <create>New You Tube Block</create>
            <move>Move You Tube Block</move>
        </youtubeblock>
    </contenttypes>
</language>

Content repository descriptors

Episerver has a content repository descriptors entity to standardize components that show content from repositories. This class describes a repository so that the UI can auto-generate with the settings for a repository. You can create navigation components such as the page tree, or selection widgets such as the page selector. The following example shows how 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 bool SupportsWastebasket { get { return true; } }

        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 set up a component in the assets pane 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.DefaultAssetsGroup };
            Categories = new[] { "cms" };

            Settings.Add(new Setting("repositoryKey", BlockRepositoryDescriptor.RepositoryKey));
        }
    }
}