Creating uMBRACO 7
PROPERTY EDITORS

@karltynan / karltynan.co.uk

ABOUT ME

@karltynan / karltynan.co.uk

  • Senior front end developer at Gibe Digital
  • Over 2 years Umbraco experience
    • Setting up Umbraco back office
    • Creating front end UI/playing with razor views

WHAT IS A PROPERTY EDITOR?


WHAT IS A PROPERTY EDITOR?


WHAT IS A PROPERTY EDITOR?

 

WHY BUILD CUSTOM PROPERTY EDITORS?


  • I was inspired by Marc Stöcker's talk at Codegarden 2014
  • Improved/tailored back office experience for editors
  • Easier to conceptualise large amounts of data
    • Custom editor can mimic real-world usage
  • Reduced space needed for fields
    • Custom editor = fewer "stacked" text fields
  • Quick to reuse across multiple projects
    • Reduced development time for next project

EXAMPLE


  • No validation - field comparison check would be needed
  • Confusing interface - needs explaining to editor
  • Likely to cause user error - miss a field, or populate both
  • Additional development to check which field to use on site

POSSIBLE SOLUTION




DEMO...

creating a property editor

What skills are needed?

  • Umbraco back office (7.x)
  • HTML
  • CSS
  • JS (optional)
  • Angular (optional , mostly )

  • No back end skills needed
    • No C#, usercontrols, XSLT, Razor, etc...

creating a property editor

What files are needed?

  • Manifest
  • HTML view
    • AngularJS bindings
  • CSS (optional)
  • JS (optional)

CREATING THE MANIFEST

package.manifest

{
  propertyEditors: [
    {
      alias: "Gibe.Test",
      name: "Test",
      editor: {
        view: "~/App_Plugins/GibeTest/test.html",
        hideLabel: false,
        valueType: "JSON"
      }
    }
  ],
  javascript: [
    "~/App_Plugins/GibeTest/test.controller.js"
  ]
}

CREATING THE VIEW

test.html 

<div class="gibe-test" ng-controller="Gibe.TestController">

  <p class="input-prefix">£</p>
  
  <input class="input umb-editor" type="text" ng-model="model.value" />

  <p ng-show="model.value">
    {{model.value}}
  </p>

</div>

CREATING THE JS

test.js 

angular.module("umbraco")
  .controller("Gibe.TestController", function($scope, assetsService) {
    
    // do some other angular js stuff here...
    // don't forget Umbraco already has jQuery & jQuery.UI

    // load in CSS for view
    assetsService.loadCss("/App_Plugins/GibeTest/test.css");

  }
);

CREATING THE CSS

test.css 

/* useful to prefix with a unique class */

.gibe-test .input
{
  width: 300px;
}

.gibe-test .input-prefix
{
  background: #eee;
  color: #888;
  display: inline-block;
  margin: 0 -5px 0 0;
  padding: 5px 10px;
}

CREATING A PACKAGE





... is really simple!



DEMO...

BUT BE CAREFUL... GOTCHAS!


  • Specify valueType at beginning in package.manifest
    • Defaults to varchar in database
    • Recreate datatype in Umbraco to see changes
  • Umbraco client dependency cache can be aggressive
    • Ensure compilation debug="true" in web.config
    • Update the client dependency version
      • config/ClientDependency.config
    • Kick the web.config
    • Rebuild your project in Visual Studio
    • Clear browser cache (Firefox cache is less aggressive)

NOW WHAT?

Don't keep it for yourself!

  • Look into using the Umbraco APIs
    • Use contentPicker, mediaPicker, linkPicker etc.
  • Look into using defaults/settings
  • Make it open source to share, improve & grow
  • Convert it to a NuGet package for others to use
  • Upload it our.umbraco for others to rate & download

  • Make more custom property editors & share them!

Thank You, Any questions?



@karltynan / karltynan.co.uk

Creating Umbraco 7 Property Editors

By Karl Tynan

Made with Slides.com

Creating Umbraco 7 Property Editors

A front end developers guide to creating Umbraco 7 property editors to help improve the back office experience for content editors.

  • 6,368

More from Karl Tynan