Suggestion: Templated Label read-only editor

[bjarnef]

Is your feature request related to a problem? Please describe.

Sometimes you want to store reference to external data in a property editor, e.g. using Label in core and properties "External Id" and "External Name". You could also store the raw JSON in Label (string), but doesn't look nice.

Describe the solution you'd like

It could be useful to store an entity/object as JSON in a readonly/label editor and maybe a custom view/template to present to data, e.g.

Id: 1234
Name Unicorn
Category: Creatures

[leekelleher]

As a property-editor?

Contentment does have a couple of read-only "editors" - "readonly-node-preview.html" is used on Content Blocks to show the selected ElementType. Notes is potentially reusable? or maybe Render Macro?

I did prototype a read-only editor using <umb-code-snippet> directive, but was one of those where I had no real world use for it. 🤷

[bjarnef]

Yes, exactly 👌
I could be useful with some simple HTML formatting, e.g.

Name: <strong>{{model.name}}</strong><br>
Id: {{model.id}}

[leekelleher]

Okay, so a "Templated Label"?

Actually, Notes isn't too far away from this, as the view can render AngularJS templates, (via my own lk-bind-html-template directive). The only limitation is that the DataType field uses TinyMCE, say instead of ACE. Hmmm, getting me thinking. 🤔

[leekelleher]

@bjarnef I've did a quick prototype.

Swapped out one of my properties that had some Content Blocks data in there.

Turns out that I was able to reuse my Notes editor-view. I only had to use 3 classes... and one of those is the ValueConverter, which is only there for playing nice with ModelsBuilder support. I've put them in a Gist, if you wanted to play with it?

https://gist.github.com/leekelleher/cfa4f3585ea0616241f22b3508f06e99

I'm not 100% sold on the idea of included this as default with Contentment yet. It's one of those where I'd want to play with it more, incubate the idea, etc. (I'm funny that way) 😆

[leekelleher]

@hfloyd Excellent! 🙌 One thing that I've been doing if the JSON/code snippets are getting too long, is to wrap the <umb-code-snippet> in a <details><summary> tags. Give's that little toggle, if you need to condense the vertical space.

[hfloyd]

ooo... let me try that!

[leekelleher]

@hfloyd You can apply Umbraco backoffice styles it too, e.g.

<details class="well well-small">
  <summary><strong>View the raw oEmbed JSON data</strong></summary>
  <umb-code-snippet language="'JSON'">{{model.value | json : 4 }}</umb-code-snippet>
</details>

Other classes could be alert alert-info, or the other alerts, alert-success, alert-warning, alert-error, I think there might even be an alert-form one. Anyway, worth playing around with.

[hfloyd]

Sexy!

[hfloyd]

So.... @leekelleher Does this now rank for inclusion? 😉

[hfloyd]

You know, I think I'd like something similar to this as well. The main use-case is that I frequently have a need to pull in some external data from an API call or whatever and store it with the node data. Sometimes this is done with an event ("OnSave"), and sometimes the data is being updated by an external operation - like a daily import or something.

What I have found is that if I use a "Label" with the "Long string" value type, I can't access the stored data (it always comes across as "NULL" in models, etc.), so I tend to use the "Textarea" - which works.

The challenge is that it is visible - and editable - to the Editors, and I don't want them to edit the Serialized JSON. (With the possible exception of a "Clear" button, so the OnSave event could regenerate it.)

I don't personally need a fancy templated display. I think your formatted JSON example is plenty readable. 😊

My "dream" PropertyEditor would allow some config, perhaps like this:

One thing I have been working on is a better way to manage external videos (YouTube, Vimeo, etc.), via a "Video" media type, which can then be "picked" on Content nodes, etc. I came across Dave's "OEmbed-Picker-Property-Editor", which makes the RTE "Embed" tool available as a stand-alone property. Looking into the OEmbed data which is available from these services, I realized that I wanted to have more than just the embed HTML available to me, so I wrote an event which duplicates some of the "Embed" tool functionality to do it's own call to the oembed api endpoint and pull back the full set of available data, which then gets processed a bit into a custom object model, and stored in as serialized JSON on the Video media node - right now in a Textarea:

It would be awesome if I could "protect" this data - and even display it to the Content Editor in a nicer format, since they can see it anyway...

[bjarnef]

@hfloyd you may want to have a look at the editor model to hide the property to editors - or only show this to admin users: https://our.umbraco.com/documentation/reference/events/EditorModel-Events/

I use something like this on a project. In this case it doesn't use variants, but in case the project does use variants, you would need to loop these.

using ContentModels = Umbraco.Web.PublishedModels;
...

[RuntimeLevel(MinLevel = RuntimeLevel.Run)]
public class SubscribeToEditorModelEventsComposer : ComponentComposer<SubscribeToEditorModelEvents>
{
    //this automatically adds the component to the Components collection of the Umbraco composition
}

public class SubscribeToEditorModelEvents : IComponent
{
    public SubscribeToEditorModelEvents() { }

    // Initialize: runs once when Umbraco starts
    public void Initialize()
    {
        EditorModelEventManager.SendingContentModel += EditorModelEventManager_SendingContentModel;
    }

    // Terminate: runs once when Umbraco stops
    public void Terminate()
    {
        // Unsubscribe during shutdown
        EditorModelEventManager.SendingContentModel -= EditorModelEventManager_SendingContentModel;
    }

    private void EditorModelEventManager_SendingContentModel(HttpActionExecutedContext sender, EditorModelEventArgs<Umbraco.Web.Models.ContentEditing.ContentItemDisplay> e)
    {
        var userGroupAliasses = e.UmbracoContext.Security.CurrentUser.Groups.Select(userGroup => userGroup.Alias).ToList();

        if (e.Model.ContentTypeAlias == ContentModels.Settings.ModelTypeAlias)
        {
            if (userGroupAliasses.Any(alias => alias.Equals(Constants.Security.AdminGroupAlias)) == false)
            {
                // Hide specific properties if not admin.
                HideProperties(e.Model, userGroupAliasses,
                    new List<string>
                    {
                        { ContentModels.Settings.GetModelPropertyType(x => x.MyFirstProperty).Alias },
                        { ContentModels.Settings.GetModelPropertyType(x => x.MySecondProperty).Alias }
                    }
                );

                // Hide tabs with no further properties.
                HideEmptyTabs(e.Model);
            }
        }
    }

    private static void HideProperties(ContentItemDisplay contentItemDisplay, List<string> userGroupAliasses, List<string> propertyAliases)
    {
        if (propertyAliases.Any())
        {
            foreach (var tab in contentItemDisplay.Variants.First().Tabs)
            {
                tab.Properties = tab.Properties.Where(property => !propertyAliases.Contains(property.Alias));
            }
        }
    }

    private static void HideEmptyTabs(ContentItemDisplay contentItemDisplay)
    {
        contentItemDisplay.Variants.First().Tabs = contentItemDisplay.Variants.First().Tabs.Where(tab => tab.Properties.Any());
    }
}

Regarding the JSON format, maybe the Code Editor can be used?

[hfloyd]

Thanks for the tip, @bjarnef ! If I can't get something like this "templated label" working the way I want, I will look into this as well.

[leekelleher]

Good news... I've opened PR #133! 🎉

I need to complete the documentation before merging it in. (Or if anyone wants to help, it's open to any help) 😄

Interesting part in this Template Label editor is the "Developer mode" toggle (which I built for some of the other Contentment editors), meaning that you can make edits to the underlying data once it is in there.

[leekelleher]

...and it's been released in Contentment v2.2.0! 🌟

[bjarnef]

@leekelleher will it also be included in v3 as well? 😁 🚀

[leekelleher]

💯 100% yes, just need to find time to do all the merging and releasing, (it's taken me 3 days to find time to do the 2.2.0 release, eek! 🙀)

With v3, there are changes coming soon... as I've decided to take the .NET multi-targeting approach - I found that supporting separate branches would become a maintenance headache. 😅

[leekelleher]

...and it's in Contentment v3.0.0-alpha006!
This isn't the multi-targeted one, that'll take me a while longer. 😆