Umbraco Helper Labels

Phil — Thu, 27 Jun 2024 13:31:36 +0000

I've been working on a project recently which has encouraged me to dig a little deeper into Umbraco than I've done before and have fallen in love with the simplicity of it!

My customer asked if we could add some additional contextual documentation within the back office as reminders for their content editors. The 'Label' property would have sufficed but I felt there was some room for improvement, so did a little digging and after an hour or two of tinkering had a solution which I felt was worthy of sharing.

I may create a standalone Github repository for this and submit to the Umbraco marketplace if I get a spare moment but in the meantime the code is simple enough to simply share here.

Manifest

{
  "propertyEditors": [
    {
      "alias": "HelperLabelPropertyEditor",
      "name": "Helper Label",
      "editor": {
        "view": "~/App_Plugins/HelperLabelPropertyEditor/helperLabelView.html",
        "valueType": "JSON"
      },
      "icon": "icon-info"
    }
  ],
  "javascript": [
    "~/App_Plugins/HelperLabelPropertyEditor/helperLabel.controller.js"
  ]
}

Controller

The secret sauce here was the discovery of the hideLabel property which worked wonders - without which I think this idea would have either become very messy or been mothballed before it got off the ground!

(function () {
    'use strict';

    function HelperLabelPropertyEditor($scope) {
        var vm = this;
        vm.model = $scope.model;
        $scope.model.hideLabel = true;
    }

    angular.module('umbraco').controller('HelperLabelPropertyEditor', HelperLabelPropertyEditor);

})();

View

I'm not super familiar with the Umbraco UI Library or web components in general but had a quick poke around their StoryBook and cobbled together something which seems somewhat suitable

<style>
    .no-padding { --uui-box-default-padding: 0; }
</style>

<div ng-controller="HelperLabelPropertyEditor as vm">

    <uui-box ng-class="vm.model.description ? '' : 'no-padding'">

        <p ng-bind="vm.model.description"></p>

        <uui-icon name="info" slot="headline" style="font-size: var(--uui-size-7); --uui-icon-color: var(--uui-color-default-emphasis); "></uui-icon>
        <uui-label slot="headline"> {{vm.model.label}}</uui-label>

    </uui-box>

</div>

Usage

Once you've created the plugin with the code above, just sign into your back office and create a new Data Type, choosing the 'Helper Label' as the property editor. You'll then be able to add this type of property anywhere you like within your document type.

Compatibility

This was only tested in Umbraco 13.4.0 but will hopefully work in some older versions too.