ima9ines
ima9ines  -  CMS
Jul 28, 2017
  7787
(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
Update on .NET 8 support

With .NET 8 now in release candidate stage I want to share an update about our current thinking about .NET 8 support in Optimizely CMS and Customiz...

Magnus Rahl | Oct 3, 2023

Adding Block Specific JavaScript and CSS to the body and head of the page

A common requirement for CMS implementations includes the ability to embed third party content into a website as if it formed part of the website...

Mark Stott | Oct 3, 2023

Performance optimization – the hardcore series – part 1

Hi again every body. New day – new thing to write about. today we will talk about memory allocation, and effect it has on your website performance....

Quan Mai | Oct 3, 2023 | Syndicated blog

IDX21323 - RequireNonce is true, Nonce was null

We have multiple clients configured with Azure Active Directory (Microsoft Entra) for requiring authentication when accessing their website. The...

David Drouin-Prince | Oct 1, 2023 | Syndicated blog