Nibble

Advanced property editors for Umbraco v7, dynamic prevalue editors

Working with the value from 1 prevalue editor on the other, that’s easily possible with Umbraco v7 Smile

Since you can access the editorState http://umbraco.github.io/Belle/#/api/umbraco.services.editorState

As an example I’ve updated the matrix prop editor http://www.nibble.be/?p=330

What I wanted to do is to make it possible to setup headers for the rows and columns but since the amount of rows and columns isn’t fixed…

So first step is to create a new view and controller for the custom prevalue editor (just use what you know from creating prop editors)

And then use that as a prevalue editor

                {
                    label: "Labels",
                    description: "Enter the labels for the cols/rows",
                    key: "rowheaders",
                    view: "~/App_Plugins/MatrixEditor/matrixlabeleditor.html",
                    
                }

Then in the controller it’s possible to inject the editorState and access the other prevalues

    function ($scope,editorState) {
 
    $scope.current = editorState.current;
    $scope.rows = _.where($scope.current.preValues, {key: "rows"})[0];
    $scope.cols = _.where($scope.current.preValues, {key: "cols"})[0];

(using some underscore the easily fetch the correct prevalue)

So once I have the amount of rows and cols I can dynamic build up my editor

<div ng-controller="Nibble.MatrixLabelEditor" class="matrix-label-editor">
     <div>
            <h6>Column labels</h6>
            <div  ng-repeat="label in model.value.collabels track by $id($index)" class="lbl-cont">
                <input type="text" ng-model="model.value.collabels[$index]"/>
            </div >
     </div>
     <div>
         <h6>Row labels</h6>
         <div ng-repeat="label in model.value.rowlabels track by $id($index)" class="lbl-cont">
            <input type="text" ng-model="model.value.rowlabels[$index]"/>
         </div>
     </div>
 
 
</div>

collabels and rowlabels are both arrays

The end result looks like

image

And then of course the prop editor view needs to be updated to include the headers (only for cols atm)

<div ng-controller="Nibble.MatrixEditor">
     <table>
        <thead>
            <tr>
              <th ng-repeat="head in model.config.rowheaders.collabels">{{head}}</th>
            </tr>
          </thead>
        <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>

 

For a quick demo check out

As a final touch I’ll need to get rid of refreshing the page but haven’t figured that one out yet

Sourcecode is available on github https://github.com/TimGeyssens/MatrixPropEditor

1 Comment so far

  1. Harsh on May 22nd, 2016

    Hi,

    is there is way we can fetch the prevalues from sql statement and bind them in a column ?

    Thanks

Leave a Reply