ima9ines
ima9ines  -  CMS
Jul 28, 2017
  7451
(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
Caching & Rendering of metadata from the DAM

For the EPiServer.Cms.WelcomeIntegration.UI 1.2.0 release, we have facilitated the ability to cache and render metadata from assets within the DAM....

Matthew Slim | Jun 2, 2023

Conversion Rate Optimization: Maximizing ROI through Data-Driven Decisions

In today's digital landscape, businesses are constantly looking for ways to improve their online presence and drive more conversions. One effective...

JessWade | Jun 1, 2023

Enhance Your Writing with Suggestions

Are you tired of staring at a blank screen, struggling to find the right words? The Epicweb.Optimizely.AIAssistant Addon is here to revolutionize...

Luc Gosso (MVP) | May 31, 2023 | Syndicated blog

Content Graph - Letting GraphQL do all the hard work for you

Background As we have seen before, setting up Content Graph on the CMS side is pretty easy. However, when it comes to the “head” part of the setup,...

Kunal Shetye | May 26, 2023 | Syndicated blog