Nibble

Archive for September, 2013

Umbraco V7/ Belle Compatibility Helper 6

Now that Umbraco 7 alpha is out http://umbraco.com/follow-us/blog-archive/2013/9/27/umbraco-7-alpha-is-here.aspx you can start testing your packages.

Here is a little helper that you can use in your Umbraco projects to identify if you are running v7 or older/newer (useful if you have a package you want to upgrade and want to perform a different action depending on the Umbraco version)

    public class CompatibilityHelper
    {
      
        public static bool IsVersion7OrNewer
        {
            get
            {
                var retval = true;
                try
                {
                    typeof(umbraco.uicontrols.CodeArea).InvokeMember("Menu",
                             BindingFlags.GetField, null, new umbraco.uicontrols.CodeArea(), null);
                }
                catch (MissingFieldException e)
                {
                    retval = false;
                }
 
                return retval;
            }
        }
       
    }

It basically checks if the umbraco.uicontrols.CodeArea has the Menu field (which was added in v7 so if that fails it’s an older version)

Eazy D, 1.0 Release 0

Eazy D for Umbraco is available today, you can get the package at http://our.umbraco.org/projects/developer-tools/eazy-d

Currently only MVC is supported (so views/partial views/partial view macro views will have the extra toolbar button), 1.1 will also have webforms support

If you want a demo check out this weeks uHangout

Introducing Eazy D for Umbraco, Dictionary Items made Easier! 2

EazyDLogoI’m proud to announce another new Umbraco package Smile 

This one adds a little something to the Umbraco backoffice that should make your life easier when working with multilingual sites in Umbraco (if you aren’t familiar with how to do multilingual sites in Umbraco make sure to check out this chapter on umbraco.tv http://umbraco.tv/videos/implementor/multi-lingual/creating-a-multi-lingual-site/introduction/ )

One of the tasks that you need to perform when working with a multilingual site is to make sure you don’t have any static text in your templates / partial views / macro scripts (that is in a single language) and that is where dictionary items come in place, for each language defined on your site you need to have a corresponding value.

This of course means then when creating these dictionary items you need to move back and forth between your templates/partial views and the dictionary part of the Umbraco backoffice (and that can suck when you have a lot of items to create).

Meet Eazy D

Eazy D will add a new function to your template / view editor that allows you to create dictionary items directly from the editor you are in

image

Simply select the snippet of text you want to replace by a dictionary item and hit the new toolbar button

image

That will open the Eazy D dialog

image

Eazy D will auto generate a Key (making sure it’s one that is available)

You then have the choice to select a parent dictionary item (creating nested items allows you to have some structure in your dictionary items), parent selection will be remembered by the dialog Smile (so you don’t have to selected the same parent each time)

And of course the value is populated with the selected snippet

Hitting ok will create the new dictionary item and replace the selected snippet with the code needed to get the dictionary item value (Umbraco.GetDictionaryValue(“Key”))

image

So as you can see it’s a great little time saver Smile

Customize key generator

So to make it fast and easy to create dictionary items Eazy D will auto generate a dictionary Key based on the selected snipped, it’s also possible to customize this if you have a specific naming convention you want to follow.

That is setup in the config file \App_Plugins\EazyD\EazyD.config

That by default looks like

<?xml version="1.0" encoding="utf-8"?>
<eazyd>
  <settings>
    <setting key="autoGenerateKey" value="True"/>
    <setting key="autoGenerateKeyProvider" value="EazyD.Providers.AutoGenKey, EazyD"/>
  </settings>
</eazyd>
  

So you can disable this auto generate behavior or point it to a custom provider

Just implement a super simple interface (this is how the default one looks) and then change the provider key to your custom type!

    public class AutoGenKey: IAutoGenKey
    {
        public string Generate(string value)
        {
            var val = value.ToCamelCase();
            if (val.Length > 50)
                val = val.Substring(0, 50);
            return Regex.Replace(val, @"[^A-Za-z0-9]+", "");
        }
    }

 

And that’s it, want to learn more about Eazy D and how it was created (dialog is MVC and features some nice little Umbraco tips and tricks) be sure to tune in to tomorrows uHangout http://uhangout.co.uk ( so 27/9/2013 at 1:15 UK time). And will also release the package tomorrow Smile

Eazy D, the trailer 3

Makes working with dictionary items easier, coming soonish :)

Char limit property editor for Umbraco Belle 11

Throughout the years I’ve created different examples of how to create custom datatypes (now called prop editors) so with Belle on it’s way and the complete different approach in how to handle those in Umbraco 7( the highly awaited predecessor of Umbraco 8 and 9) it’s time for another update Smile

First of all there are already some useful resources out there:
An example on Warren’s blog http://creativewebspecialist.co.uk/2013/08/23/how-i-built-my-first-property-editor-for-umbraco-belle/ and of course the official docs http://umbraco.github.io/Belle/#/tutorials/CreatingAPropertyEditor

But since I’m also adding configuration to this prop editor I thought it would make sense to add another post to the list!

The manifest

/App_Plugins/CharLimitEditor/package.manifest

{
    propertyEditors: [
        {
        alias: "Demo.CharLimitEditor",
        name: "Char limit",
        editor: {
        view: "~/App_Plugins/CharLimitEditor/charlimiteditor.html"
        },
        prevalues: {
            fields: [
                {
                    label: "Number of chars",
                    description: "Enter the number of chars to limit on",
                    key: "limit",
                    view: "requiredfield",
                    validation: [
                        {
                            type: "Required" 
                        }                        
                    ]
                }
            ]
        }
        }
    ]
    ,
    javascript: [
        ‘~/App_Plugins/CharLimitEditor/charlimiteditor.controller.js’
    ]
}

This manifest will tell Umbraco about our new property editor and allows us to inject any needed files into the application.A new thing in the manifest, prop editors now have a unique alias instead of a guid

Also notices the prevalues part, here I define the config options my prop editor will have

The view

/App_Plugins/CharLimitEditor/Charlimiteditor.html

<div ng-controller="Demo.CharLimitEditorController">
    <textarea ng-model="model.value" ng-change="limitChars()"></textarea>
    <br/>
    <span ng-bind="info"></span>
</div>

The Controller

angular.module("umbraco")
    .controller("Demo.CharLimitEditorController",
    function ($scope) {
         $scope.limitChars = function(){
            var limit = parseInt($scope.model.config.limit);
 
            if ($scope.model.value.length > limit )
            {
                $scope.info = ‘You cannot write more then ‘ + limit  + ‘ characters!’;
                $scope.model.value = $scope.model.value.substr(0, limit );
            }
            else
            {
                $scope.info = ‘You have ‘ + (limit - $scope.model.value.length) + ‘ characters left.’;
            }
         };
    });

(notice how I get the value of the config options $scope.model.config.limit)

It’s that easy, no more c# code and comiling down to DLLs, you’ll just need to have html/js and Angularjs skills Smile

Just drop the files in /App_Plugins, restart the app and create a new datatype using the char limit prop editor

The prevalue editor:

image

Datatype in action:

image

Sourcecode

Code for this is available on github

https://github.com/TimGeyssens/MyFirstBellePropEditor