Problem: How to make the CMS display different "display options" for different Block / ContentArea fields.

e.g: A news block that has multiple views: Detail, Call to Action, Summary with three display options for this block as well. In the Content Area that sits in side bar, one displays the summary display option. In the Content Area that sits in the center of a page the detail and summary display options should show.

Based on this post https://getadigital.com/no/blogg/filtered-display-option-menu-based-on-content-type-in-episerver/, we have to do some extra things:

Create custom content area tag attribute: main, sidebar

We use this attribute to specific the content area position. We will use this value to filter the Display Option values later (see the classes in Custom\Attributes folder).

[Display(

            GroupName = SystemTabNames.Content,
            Order = 320)]
        [CultureSpecific]
        [ContentAreaTag(ContentAreaTag.Main)]
        public virtual ContentArea MainContentArea { get; set; }

        [Display(
            GroupName = SystemTabNames.Content,
            Order = 330)]
        [CultureSpecific]
        [ContentAreaTag(ContentAreaTag.Sidebar)]
        public virtual ContentArea SidebarContentArea { get; set; }

Register Display Options

Use DisplayOptions service to Add Detail, Summary, Call to Action options in InitializationModule (Custom\Initialization\DisplayOptionsModule.cs)

public void Initialize(InitializationEngine context)

        {

            var displayOptions = ServiceLocator.Current.GetInstance<DisplayOptions>();

            displayOptions

                    .Add("detail", "Detail", CustomDisplayOptions.Detail, "", "epi-icon__layout--full")

                    .Add("summary", "Summary", CustomDisplayOptions.Summary, "", "epi-icon__layout--two-thirds")

                    .Add("cta", "Call to Action", CustomDisplayOptions.CallToAction, "", "epi-icon__layout--one-third");

        }

Create Block with SupportedDisplayOptions attribute

[ContentType(DisplayName = "MyBlock", GUID = "066bd7ea-57d4-4dc1-b6a6-4c1537167588", Description = "")]

    public class MyBlock : BlockData, ICustomRenderingContent

    {

        public virtual string Title { get; set; }

        public virtual XhtmlString Content { get; set; }

        [UIHint(UIHint.Image)]

        public virtual ContentReference Image { get; set; }

        public string[] SupportedDisplayOptions

        {

            get

            {

                return new[] {

                    CustomDisplayOptions.Detail,

                    CustomDisplayOptions.Summary,

                    CustomDisplayOptions.CallToAction

                };

            }

        }

    }

RestStore – SupportedDisplayOptionsStore

This is where the client script is located to to get the available Display Option items – Custom\Rendering\SupportedDisplayOptionsStore.cs

Custom Scripts: Register Store, DisplayOptionSelector

The difference with Mattias’s post is that you don’t use cache to store Display Options here. So, the CacheManager.js file in not needed in this scenario. Also, you need overwrite the Episerver ContentAreaEditor.js.

Let see the script files in ClientResources folder of the solution.

The below is the test solution result. The Ascend 2018 March 11-March 14 block can be display in main and side bar content in difference views and display options.