A simple split-text custom Umbraco datatype

Designers, eh? They just love making little flourishes on websites.

One that always seems to crop up is the ‘split text’ formatting of a title. That is, where half the title (or perhaps just the first word) is bold font and the other half is normal weight. As I was working on a new Umbraco 7 project, and up to this point had not been afforded the opportunity to create my own data type, I thought I would solve this little design issue smartly.

My idea was to allow the Umbraco user to define where in the sentence the split would occur. This would be achieved through the use of two input text boxes with a live preview of how the resultant sentence will look.

1. In your App_Plugins folder (which be default may not be part of an Umbraco solution, so add it) create the container folder “SplitText”.
   
   
   
   
2. Create the package.manifest file. This is a JSON format text file that tells Umbraco what files make up this plugin. Fill it in thusly:
   
   

   {   
       propertyEditors: [      
           {
               alias: "Wiliam.SplitText",
               name: "Split Text",
               editor: {
                   view: "~/App_Plugins/SplitText/splittext.editor.html"
               }
           }
       ],
       javascript: [
           '~/App_Plugins/SplitText/splittext.controller.js'
       ]
   }
       

   
   
3. Create the Angular controller. The code is very simple; bind the Umbraco property value (model.value) to two custom variables (‘leftText’ and ‘rightText’) in scope that we will use to create the text boxes. Conversely in the ‘formSubmitting’ handler, turn those two fields back into one by pipe separating them.
   
   

   angular.module("umbraco").controller("Wiliam.SplitTextController",
       function ($scope) {
           if ($scope.model.value.length) {
               var arr = $scope.model.value.split('|');
               $scope.leftText = arr[0];
               $scope.rightText = arr[1];
           }
           $scope.$on("formSubmitting", function (ev, args) {
               $scope.model.value = $scope.leftText + '|' + $scope.rightText;
           });
       });
       

   
   
4. Create the HTML editor template. This binds to the newly created controller. The two input fields form the models ‘leftText’ and ‘rightText’ and are contained within the form ‘splitTextForm’. I’m also taking advantage of Angular’s two-way binding by creating a live preview of the entered text.
   
   

   <div ng-controller="Wiliam.SplitTextController">
       <ng-form name="splitTextForm">
           <input type="text" class="umb-textstring textstring" style="width: 150px" ng-model="leftText" />
           <input type="text" class="umb-textstring textstring" style="width: 150px" ng-model="rightText" />
           <span style="padding: 5px; display: inline-block">
               <span>{{leftText}}</span> <strong>{{rightText}}</strong>
           </span>
       </ng-form>
   </div>
       

   
   
5. That’s all for the data type. As for your MVC project, make a simple extension method so you don’t have to split the pipe character all the time:

 public static IHtmlString SplitText(this string Content)
     {
            if (string.IsNullOrEmpty(Content))
                return new HtmlString(Content);
            var arr = Content.Split('|');
            if (arr.Count() != 2)
                return new HtmlString(Content);
            return new HtmlString(string.Format("<span>{0}</span> <strong>{1}</strong>", arr[0], arr[1]));
    }

This is called in your view simply:

@(Model.GetValue<string>("title").SplitText())

Worth mentioning – my Nuget installed version of Umbraco was running with debug mode set to false by default. This meant that all scripts were managed by ClientDependency and cached, so my controller code never appeared to update.

Make sure you set <compilation debug="true" /> before you start!