Custom datatypes in Umbraco provide developers with the flexibility to build highly tailored backend experiences for content editors. In this blog post, we'll walk through how to create a custom datatype in Umbraco 13 using AngularJS.
1. File Structure Setup
Custom datatypes in Umbraco require specific files placed in the correct directories under the App_Plugins folder. Below is the typical file structure:
/App_Plugins/
--/CustomEditor/
-----CustomEditor.html
-----CustomEditorController.js
-----package.manifest
2. Creating the HTML Template
The HTML file defines the user interface of the custom datatype. Below is an example template (CustomEditor.html):
<div class="custom-plugin" ng-controller="CustomPluginController">
<div>
<strong class="selected-item-label">Selected Item:</strong>
<span class="selected-item-name">{{selectedItemName}}</span>
</div>
<hr class="divider" />
<div class="scrollable-container">
<ul class="group-list">
<li ng-repeat="group in groups">
<p class="group-title">{{group.GroupTitle}}</p>
<hr class="divider" />
<ul class="item-list" id="{{group.GroupID}}">
<li ng-repeat="item in group.Items | orderBy: 'ItemTitle'">
<a class="item-link active" ng-if="model.value == item.ItemID">
{{item.ItemTitle}}
</a>
<a class="item-link" ng-if="model.value != item.ItemID" ng-click="model.value = item.ItemID; setTitle(group.GroupTitle + ' > ' + item.ItemTitle);">
{{item.ItemTitle}}
</a>
</li>
</ul>
</li>
</ul>
</div>
<input type="hidden" ng-model="model.value" />
</div>
3. Creating the Controller
The controller handles the logic for fetching data and responding to user interactions. Below is the AngularJS controller (CustomEditorController.js):
