This post is helpful in following scenarios –
- If you are looking to create a custom property editor in Umbraco
- If you are looking for a way to populate a checkbox list in the content dynamically
- If you are looking for a way to call an api in umbraco property editor
- If you are looking for a way to populate a checkbox list with one of the document types dynamically
For this post, we are going to build a custom property editor that will populate the checkbox list with categories (added under home) using an api url.
Let’s say, we have a food website that have different categories like Healthy, Baking, Recipes, Dinner, Summer recipes, etc.
We also have articles related to all these different categories.
Categories under Home –
Content with categories as checkbox list –
What is the problem?
Now the problem here is whenever a new category is added, the checkbox list for categories has to be updated manually as we have use the default checkbox list data type.
In order to fix this problem, we will create a custom property editor and use it to create the checkbox list dynamically. So whenever, a new category will be added, the checkbox list for categories will be updated automatically.
What is the solution?
Skills needed to build a Property Editor –
- Umbraco BackOffice (Using ver 8.0.1 for this post)
- HTML
- CSS
- Javascript (Optional)
- Angular (Optional)
Files needed for a Property Editor –
- Manifest
- HTML file
- Javascript file
- CSS (Optional)
First, let’s create a manifest file.
{
propertyEditors: [
{
alias: "CustomCheckBoxList",
name: "Custom Checkbox list",
editor: {
view: "~/App_Plugins/CheckboxListing/checkboxlist.html",
hideLabel: false,
valueType: "STRING"
},
prevalues: {
fields: [
{
label: "Api Url",
description: "Add the API Url to get the list of items. api/{controller}/{Action}",
key: "apiUrl",
view: "textstring"
}
]
}
}
],
javascript: [
"~/App_Plugins/CheckboxListing/checkboxlist.controller.js"
]
}
Now, let’s add the HTML file
<div ng-controller="CheckboxList.Controller">
<ul class="unstyled">
<li ng-repeat="category in selectedItems">
<label class="checkbox">
<input type="checkbox" name="checkboxlist"
value="{{category.key}}"
ng-model="category.selected"/>
{{category.val}}
</label>
</li>
</ul>
</div>
Now, we have to create the Javascript file, which will contain the main logic of this property editor.
angular.module("umbraco")
.controller("CheckboxList.Controller",
function($scope, $http, assetsService) {
var newItems = [];
$scope.selectedItems = [];
var categories = function() {
return $http.get($scope.model.config.apiUrl)
.then(function(data) {
$scope.categories = data;
for (var i = 0; i < $scope.categories.data.length; i++) {
newItems.push({ id: $scope.categories.data[i].id, value: $scope.categories.data[i].name });
}
$scope.categories = newItems;
});
}
categories()
.then(function() {
$scope.$on("formSubmitting",
function(ev, args) {
if ($scope.model.value === null || $scope.model.value === undefined) {
$scope.model.value = [];
}
var selectedCategories = "";
angular.forEach($scope.selectedItems,
function(value, key) {
var itemSelected = value.selected;
var item = value.val;
selectedCategories = itemSelected === true
? selectedCategories + item + ","
: selectedCategories + "";
});
$scope.model.value = selectedCategories.replace(/(^,)|(,$)/g, "");
});
function setupViewModel() {
if ($scope.model.value === null || $scope.model.value === undefined) {
$scope.model.value = [];
}
for (var i = 0; i < $scope.categories.length; i++) {
var isSelected = $scope.model.value.includes($scope.categories[i].value);
$scope.selectedItems.push({
selected: isSelected,
key: $scope.categories[i].id,
val: $scope.categories[i].value
});
}
}
setupViewModel();
$scope.$watch("selectedItems",
function(newVal, oldVal) {
$scope.model.value = [];
for (var x = 0; x < $scope.selectedItems.length; x++) {
if ($scope.selectedItems[x].checked) {
$scope.model.value.push($scope.selectedItems[x].key);
}
}
},
true);
$scope.model.onValueChanged = function(newVal, oldVal) {
setupViewModel();
};
});
});
That’s it!! You are done with the coding part.
What’s Next?
Just rebuild your project and go to backoffice where you have to create a new data type for the categories.
Go to Settings – Right click on Data Types to create a new data type.
Select datatype that we just created – Custom Checkbox List
Now, you must be thinking that what is Api Url. Ok, so this is the url of the api you will create to get the categories. I am using categories for this post. However, you can use this field to add other api urls as well to populate the checkbox list with anything you want.
Now, we will add the newly created document type to our content page.
And when you load the content again, you will see the categories populated in the checkbox list.
So now, whenever a new category will be added, the checkbox list will be auto-populated with the new one.
Note: It is good to create a datatype like this before you actually create a content as later on if you delete and update a property in your content, you have to update the data associated as well which could be a complex task sometimes.
Interested in Cryptocurrency. Register and start investing here
Earn a side income by affiliate marketing. Learn here how to do it.
TechieSpice 
the api is being used, how is that determined?
Is there some sort of apidoc?
api/content dont return anything?
LikeLike
did you tried api/content/categories?
LikeLike
Amazing!! I tweaked this a little as some of my category names were shorter versions of others and causing incorrect selections:
function setupViewModel() {
if ($scope.model.value === null || $scope.model.value === undefined) {
$scope.model.value = [];
}
for (var i = 0; i < $scope.categories.length; i++) {
isSelected = false;
var modelvals = $scope.model.value.split(',');
for (var j = 0; j < modelvals.length; j++) {
if (modelvals[j] == $scope.categories[i].value) {
isSelected = true;
break;
}
}
$scope.selectedItems.push({
selected: isSelected,
key: $scope.categories[i].id,
val: $scope.categories[i].value
});
}
}
Makes sense I hope!
LikeLike
Thanks for this. This is almost exactly what we need for our project. What we need to do is create a dynamic checkbox list when an page is created. Each page will have different options which we pull in from a json feed. What we need to do is pass in an ID to the api/content/categories somehow to we can get the correct list of options.
Is there a way to do this?
Many thanks
Jon
LikeLike
Hi yes, you can do exactly the same. Just pass the ID with the api url and add the login accordingly.
Let me know how it goes.
LikeLike