step‐by‐step guide to creating a custom property editor in Umbraco 8 - FadiZahhar/umbraco8showandtell GitHub Wiki

Ensure you have:

• An Umbraco 8 project set up and running.
• Access to the project's file system.
• Basic knowledge of AngularJS and Umbraco's backoffice structure.([Umbraco][1])

In your Umbraco project, navigate to the App_Plugins directory and create a new folder for your custom property editor. Let's name it TextboxWithCharCount.([markadrake.com][2])

Path: /App_Plugins/TextboxWithCharCount/([markadrake.com][2])

Inside the TextboxWithCharCount folder, create a file named package.manifest. This file tells Umbraco about your custom property editor and its associated files.([markadrake.com][2])

Path: /App_Plugins/TextboxWithCharCount/package.manifest([markadrake.com][2])

Content:

{
  "propertyEditors": [
    {
      "alias": "Custom.TextboxWithCharCount",
      "name": "Textbox with Character Count",
      "editor": {
        "view": "~/App_Plugins/TextboxWithCharCount/TextboxWithCharCount.html"
      },
      "prevalues": {
        "fields": [
          {
            "label": "Maximum Characters",
            "description": "Set the maximum number of characters allowed.",
            "key": "maxChars",
            "view": "number"
          }
        ]
      }
    }
  ],
  "javascript": [
    "~/App_Plugins/TextboxWithCharCount/TextboxWithCharCount.controller.js"
  ]
}

This HTML file defines the UI of your property editor in the Umbraco backoffice.

Path: /App_Plugins/TextboxWithCharCount/TextboxWithCharCount.html

Content:

<div ng-controller="TextboxWithCharCountController">
  <input type="text" ng-model="model.value" ng-keyup="updateCount()" maxlength="{{maxChars}}" />
  <p>{{remainingChars}} characters remaining</p>
</div>

This JavaScript file contains the logic for your property editor, such as updating the remaining character count.([markadrake.com][2])

Path: /App_Plugins/TextboxWithCharCount/TextboxWithCharCount.controller.js([markadrake.com][2])

Content:

angular.module("umbraco").controller("TextboxWithCharCountController", function ($scope) {
  // Set default value if undefined
  if (!$scope.model.value) {
    $scope.model.value = "";
  }

  // Retrieve the maxChars prevalue
  $scope.maxChars = $scope.model.config.maxChars || 100;

  // Initialize remaining characters
  $scope.remainingChars = $scope.maxChars - $scope.model.value.length;

  // Update the remaining character count
  $scope.updateCount = function () {
    $scope.remainingChars = $scope.maxChars - $scope.model.value.length;
  };
});

After adding these files, restart your Umbraco application to ensure it picks up the new property editor. You can do this by recycling the application pool in IIS or by touching the web.config file.

1. Log in to the Umbraco backoffice.
2. Navigate to Settings > Data Types.
3. Click Create and name your new data type, e.g., "Limited Textbox".
4. In the Property Editor dropdown, select Textbox with Character Count.
5. Set the Maximum Characters prevalue to your desired limit, e.g., 150.
6. Click Save.
7. Add this data type to a document type as a new property.
8. When editing content, you'll see your custom textbox with a character count indicator.

You've successfully created a custom property editor in Umbraco 8 that limits the number of characters a user can input. This editor provides immediate feedback to content editors, enhancing the content editing experience.