Take the community feedback survey now.

ima9ines
ima9ines  -  CMS
Jul 28, 2017
  9965
(2 votes)

Show overlay label for ContentArea when hovering in On-Page-Edit mode

Following this forum thread - Show overlay label for ContentArea when hovering in On-Page-Edit mode, I created a custom content area to resolve it (in Alloy MVC template).

Firstly, to see how a property display its overlay label when hover, inspect its markup code (in this case, I inspected logo on Start page). You will see it used infomationNode to showing:

informationNode dojo attach point

And then, looking in epi/shell/widget/overlay/Item widget source, I found that overlay label value set by following code block:

overlay label code block

Let's take a look in ContentArea source code (see how to view source code at link), it extended from epi/shell/widget/overlay/Item

ContentArea source

and also had it own template:

default ContentArea template

The above template missed informationNode section, so that, nothing displayed when hover a ContentArea property in Edit mode. Well, to show overlay label for ContentArea, we just needed to add that section to ContentArea's template, like that

ContentArea with template have informationNode

Let's do it step by step

Create custom content area editor descriptor (under "/Business/EditorDescriptors/" folder)

/// <summary>
/// Editor descriptor that extends base editor descriptor for <see cref="ContentArea"/> in order to show overlay label when hovering in On-Page-Edit mode
/// </summary>
[EditorDescriptorRegistration(TargetType = typeof(ContentArea), UIHint = "CustomContentArea")]
public class CustomContentAreaEditorDescriptor : ContentAreaEditorDescriptor
{
    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);

        metadata.OverlayConfiguration["customType"] = "alloy/widget/overlay/CustomContentArea";
    }
}

Create custom content area template (under "/ClientResources/Scripts/widget/templates/" folder), named "CustomContentArea.html"

<div class="epi-overlay-blockarea">
    <div class="epi-overlay-item-container">
        <div class="epi-overlay-bracket"></div>
    </div>
    <div data-dojo-attach-point="containerNode" class="epi-overlay-blockarea-container">
        <span data-dojo-attach-point="informationNode" class="epi-overlay-item-info"></span>
    </div>
    <div data-dojo-attach-point="actionsNode" class="epi-overlay-blockarea-actionscontainer">
        <div data-dojo-attach-point="actionsNodeControls" class="epi-overlay-blockarea-actions"></div>
    </div>
</div>

Create custom content area widget (under "/ClientResources/Scripts/widget/overlay/" folder), named "CustomContentArea.js"

define([
// dojo
    "dojo/_base/declare",
// epi
    "epi-cms/widget/overlay/ContentArea",
// resources
    "dojo/text!../templates/CustomContentArea.html"
], function (
// dojo
    declare,
// epi
    ContentArea,
// resources
    template
) {
    return declare("alloy.widget.overlay.CustomContentArea", [ContentArea], {
        templateString: template
    });
});

For example, add UIHint for MainContentArea property of Start page

[Display(
    GroupName = SystemTabNames.Content,
    Order = 320)]
[CultureSpecific]
[UIHint("CustomContentArea")]
public virtual ContentArea MainContentArea { get; set; }

In additional, we have another way to marked all ContentArea properties to rendered with custom editor (without added [UIHint("CustomContentArea")] attribute for each)

/// <summary>
/// Editor descriptor that extends base editor descriptor for <see cref="ContentArea"/> in order to show overlay label when hovering in On-Page-Edit mode
/// </summary>
[EditorDescriptorRegistration(TargetType = typeof(ContentArea), EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault)]
public class CustomContentAreaEditorDescriptor : ContentAreaEditorDescriptor

Finally, here is the result when edit Start page

custom content area show overlay label when hovering in on-page-edit mode

Related topics

Jul 28, 2017

Comments

Daniel Ovaska
Daniel Ovaska Jul 29, 2017 06:14 PM

Nice!

Please login to comment.
Latest blogs
Get last edited content from Optimizely CMS

Learn how to query the last updated blocks and pages from Optimizely CMS

Tomas Hensrud Gulla | Oct 4, 2025 |

Optimizely CMS - Learning by Doing: EP04 – Create Content Models

  Introduction I am thrilled to announce the release of Episode 4 of my  Learning by Doing : Build Series on Optimizley CMS 12 on YouTube ! This...

Ratish | Oct 2, 2025 |

A day in the life of an Optimizely OMVP - Opticon London 2025

This installment of a day in the life of an Optimizely OMVP gives an in-depth coverage of my trip down to London to attend Opticon London 2025 held...

Graham Carr | Oct 2, 2025

Optimizely Web Experimentation Using Real-Time Segments: A Step-by-Step Guide

  Introduction Personalization has become de facto standard for any digital channel to improve the user's engagement KPI’s.  Personalization uses...

Ratish | Oct 1, 2025 |