Nibble

There is no spoon, Matrix Property Editor for Umbraco 7

You’ll love creating property editors in Umbraco V7!

If you haven’t tried it be sure to check out these resources for getting a quick start:
http://umbraco.github.io/Belle/#/tutorials/manifest
https://github.com/perploug/UkFest-AngularJS-Demo
http://www.nibble.be/?p=285

As a small experiment I thought it would be fun to see how fast a more complex prop editor would take to build. The goal was to build a configurable matrix editor (so define number of rows and cols as a setting and then let the content editor fill in the matrix). Turns Umbraco v7 prop editors make this really simple (of course you need some AngularJs knowledge since the new v7 backoffice is using that framework) but you don’t need any .net skills (and no more need to work with webforms like in previous Umbraco versions).

So after 30 mins of fiddling (mostly with creating a multi dimensional array) I have a working Matrix prop editor that looks like

MatrixEditor

And the settings look like

MatrixEditorSettings

All that was needed was 3 files

The manifest (defines the prop editor, alias, name, view, prevalues, js resources)

{
    propertyEditors: [
        {
        alias: "Nibble.MatrixEditor",
        name: "Matrix",
        editor: {
        view: "~/App_Plugins/MatrixEditor/matrixeditor.html"
        },
        prevalues: {
            fields: [
                {
                    label: "Number of columns",
                    description: "Enter the number of columns",
                    key: "cols",
                    view: "requiredfield",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                },
                {
                    label: "Number of rows",
                    description: "Enter the number of rows",
                    key: "rows",
                    view: "requiredfield",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                }                
            ]
        }
        }
    ]
    ,
    javascript: [
        ‘~/App_Plugins/MatrixEditor/matrixeditor.controller.js’
    ]
}

The view

<div ng-controller="Nibble.MatrixEditor">
     <table>
 
        <tbody>
            <tr ng-repeat="row in model.value">
                <td ng-repeat="col in row  track by $id($index)">
                     <input type="text" ng-model="row[$index]"></td>
            </tr>
        </tbody>
    </table>
</div>

And the controller

angular.module("umbraco")
    .controller("Nibble.MatrixEditor",
    function ($scope) {
 
 
         if (!$scope.model.value) {
            $scope.model.value = createArray(parseInt($scope.model.config.rows), parseInt($scope.model.config.cols));
         }
 
         function createArray(length) {
             var arr = new Array(length || 0),
                 i = length;
 
             if (arguments.length > 1) {
                 var args = Array.prototype.slice.call(arguments, 1);
                 while(i–) arr[length-1 - i] = createArray.apply(this, args);
             }
 
             return arr;
        }
 
    });

So you see this isn’t that much of code for a pretty complex property editor!

Sourcecode for this is on github https://github.com/TimGeyssens/MatrixPropEditor

Leave a Reply