Nibble

Archive for December, 2013

Config tree On Umbraco v7 0

Another package ready for umbraco v7 (well actually thanks to the awesome work by Per and Shannon it already worked on v7 it just needed some super small UI updates, updating tree icon and updating save button)

ConfigTreeV7

Also added ctrl-s support for saving the file

http://our.umbraco.org/projects/developer-tools/config-tree

Umbraco BE Festival, 25Th April 2014 0

After the successful BE Festival in 2011, the Belgian Umbraco User Group(buug.be) is throwing another edition.

They have some great speakers lined up including Umbraco founder Niels Hartvig and other speakers from DK,UK,SE,NL,FR and BE.

For full details please go to http://www.buug.be/en/events/umbraco-festival-2014 and get your ticket today!

5536568903_15ce073856_b

There is no spoon 1.0 Release (matrix prop editor for Umbraco v7) 0

I’ve just released a packaged version of the matrix prop editor I created as an example prop editor for Umbraco v7.

The package is available for download on http://our.umbraco.org/projects/backoffice-extensions/there-is-no-spoon (this if for Umbraco v7 only)

The settings looks like

MatrixPropEditorSettings

So you can set

  • initial number of cols and rows
  • let the content editor add/remove rows
  • Show row labels
  • define labels for rows and cols

An example of the editor (with manage rows enabled)

MatrixPropEditor

Advanced property editors for Umbraco v7, dynamic prevalue editors 1

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

Advanced property editors for Umbraco v7, prevalue editors 2

As you could see in the 2 prop editors for Umbraco examples it’s super easy to add config options to your v7 prop editors (http://www.nibble.be/?p=330, http://www.nibble.be/?p=285)

As it mentions in the manifest docs http://umbraco.github.io/Belle/#/tutorials/manifest there is a prevalues part where you can setup your config options…

So

prevalues: {
            fields: [
                {
                    label: "Number of chars",
                    description: "Enter the number of chars to limit on",
                    key: "limit",
                    view: "requiredfield",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                }
            ]
        }

Results in

Changing the type of prevalue editor

Of course you aren’t limited to a simple text input if you take a look at the available out of the box types (found in \Umbraco\Views\prevalueeditors )

You’ll find

image

So if I want to update my matrix prop editor to have numeric prevalues (since I need to define number or rows and columns)

I just need the name of the view (and don’t need the .html)

That then becomes

            fields: [
                {
                    label: "Number of columns",
                    description: "Enter the number of columns",
                    key: "cols",
                    view: "number",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                },
                {
                    label: "Number of rows",
                    description: "Enter the number of rows",
                    key: "rows",
                    view: "number",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                },

And results in

image

Using prop editors as prevalue editors

It’s also possible to plug in custom prevalue editors, all  you need to do is point it to a view and you can use a prop editor as a prevalue editor!

So adding this

                {
                    label: "Testing",
                    description: "Test",
                    key: "test",
                    view: "~/App_Plugins/MatrixEditor/matrixeditor.html",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                }

Will make it possible to use the matrix prop editor as a prevalue editor on it’s own settings

image

Currently you’ll have to manually check in your controller if the config has values or not since it’s not possible to set default values that get passed to the prevalue editor (but should be possible soon)