Try our conversational search powered by Generative AI!

ima9ines
ima9ines  -  CMS
Jul 28, 2017
  8347
(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

Jul 29, 2017 06:14 PM

Nice!

Please login to comment.
Latest blogs
Join the Content Recommendations Work Smarter webinar May 8th 16.00-16.45 CET with expert Aidan Swain

Learn more about Content Recommendations, with Optimizely’s very own Senior Solutions consultant, Aidan Swain . He will discuss best practices and...

Karen McDougall | Apr 12, 2024

Plugin for Identifying and Bulk Deleting Orphaned Missing Properties in Optimizely

I am aware that the Optimizely World community has extensively discussed this topic, with numerous solutions and code snippets available to help...

Adnan Zameer | Apr 11, 2024 | Syndicated blog

Enhancing the Authoring Experience: Extending the LinkItem

The LinkItem field is one of the most demanded properties by the community, allowing editors to effortlessly create and manage links across pages a...

Santiago Morla | Apr 10, 2024 | Syndicated blog

The distinctions between Optimizely Web Experimentation and Optimizely Feature Experimentation

This blog is part of the series - Unlocking the Power of Experimentation: A Marketer's Insight. Let’s dive into Optimizely's powerful experimentati...

Holly Quilter | Apr 9, 2024