Umbraco 7 - Highlighting selected items in custom tree

Custom Tree elements are fairly straight forward using the “umb-tree” directive.

If you want to highlight selected nodes in a custom tree the same way as they are in the main content tree, you’ll have to use the “treeNodeSelect” event in your controller.

Custom Tree Directive

Controller

function DialogControllerFunction($scope, dialogService, eventsService, navigationService, appState, treeService) {
    var dialogOptions = $scope.dialogOptions;
    var node = dialogOptions.currentNode;

    $scope.dialogTreeEventHandler = $({});


    $scope.dialogTreeEventHandler.bind("treeNodeSelect", function (ev, args) {
        args.event.preventDefault();
        args.event.stopPropagation();

        var _selectedNode = args.node;
        var _treeRootElement = $(args.event.currentTarget).closest(".umb-tree");

        //Clear previously selected items (remove if you want to select multiple)
        //  iterate through each child element in the current tree
        _treeRootElement.find("li[tree='child']").each(function () {
            $(this).scope().currentNode = null;
        })

        //this will highlight the current node
        args.element.currentNode = _selectedNode;
    });

}
angular.module("umbraco").controller("CustomApp.Namespace.DialogController", DialogControllerFunction);

In this example, my custom tree is a navigation dialog:

Add new Document Type icons to Umbraco 7

The process for adding new document type icons is a little more complicated in Umbraco 7.

Document type icons are now displayed as fonts (svg/woff/eot files), the icon sets are created using Icomoon.io.

To add new icons you have to create a new set, these can then be included in Umbraco by created a new plugin.

Step 1 - Create new icon set

Go to https://icomoon.io/app, here you can load in icons from other available sets or create your own.

Select any icons you want to include in your new set.

Next, click on the "Font" button at the bottom.

In the next screen:

You'll see a list of the selected icons, take note of the values below each icon, these "code points" are used in CSS to locate each icon in the final file.

Click download and unzip.

Step 2 - Add to Umbraco

To include the new icons in Umbraoo, you have to create a new plugin to load in CSS which references the font files.

Create a new folder in "App_Plugins" for your plugin, in here create a new "package.manifest" and CSS file, next copy in the downloaded font files.

My package is called "IcoElegant", here's my layout:

Package Manifest

{
    css: [
        '~/App_Plugins/NewIcons/css/icoelegant.css'
 ]
}

Change this to reference your CSS file.

CSS

@font-face {
    font-family: 'icoelegant';
    src:url('../Fonts/icoelegant.eot');
    src:url('../Fonts/icoelegant.eot?#iefix') format('embedded-opentype'),
    url('../Fonts/icoelegant.svg') format('svg'),
    url('../Fonts/icoelegant.woff') format('woff'),
    url('../Fonts/icoelegant.ttf') format('truetype');
}


[class^="icon-icoelegant-"], [class*=" icon-icoelegant-"] {font-family:'icoelegant';width:auto;height:auto;}
.icon-icoelegant-mobile:before{content:'\e000'}
.icon-icoelegant-laptop:before{content:'\e001'}
.icon-icoelegant-desktop:before{content:'\e002'}
.icon-icoelegant-tablet:before{content:'\e003'}
.icon-icoelegant-phone:before{content:'\e004'}
.icon-icoelegant-document:before{content:'\e005'}
.icon-icoelegant-documents:before{content:'\e006'}
.icon-icoelegant-search:before{content:'\e007'}
.icon-icoelegant-clipboard:before{content:'\e008'}
.icon-icoelegant-newspaper:before{content:'\e009'}
.icon-icoelegant-notebook:before{content:'\e00a'}
.icon-icoelegant-book-open:before{content:'\e00b'}
.icon-icoelegant-browser:before{content:'\e00c'}
.icon-icoelegant-calendar:before{content:'\e00d'}
.icon-icoelegant-presentation:before{content:'\e00e'}

Change the font-family name and src attributes to match your font files.

Each icon needs a prefix (starting with ".icon"), you'll also have to swap the content value for the "code point" value when exporting from Icomoon.

Save the files and refresh Umbraco, you may have to clear the ClientDependency cache "\App_Data\TEMP\ClientDependency" first, the new icons should now be available in the Document Type section of Umbraco.

Programmatically add new member to a group in Umbraco 7

If you want to assign a new member to an Umbraco member group in .net, you have to use the "MemberService.AssignRole" method.

IMember _newMember = ApplicationContext.Current.Services.MemberService.CreateMember("username", "user@email.com", "Full Name", "Member");
Services.MemberService.Save(_newMember);
Services.MemberService.AssignRole(_newMember.Id, "Group Name");

The new member has to be saved first before you can assign it to role/group.

Regular Expression Command Line Arguments Parser

Here's a simple way to extract a list of switch/flags and their parameters from a command line argument in C#.

Regex regex = new Regex(@"(?< switch> -{1,2}\S*)(?:[=:]?|\s+)(?< value> [^-\s].*?)?(?=\s+[-\/]|$)");

string commands = "--switch value1 --switch2 \"c:\\folder 1\\file1.txt\" -switch-3 value-3 --switch4 -switch5";

List< KeyValuePair< string, string> >  matches = (from match in regex.Matches(commands).Cast< match> ()

select new KeyValuePair< string, string> (match.Groups["switch"].Value, match.Groups["value"].Value)).ToList();

foreach (KeyValuePair< string, string>  _match in matches)
{
Response.Write("
switch:" + _match.Key + "  value:" + _match.Value);
}

You can pass in a command with multiple switches such as "-switch" or "--switch":

--switch1 value1 --switch2 "c:\folder 2\file2.txt" -switch-3 value-3 --switch4 -switch5

 the regex will extract the flags along with any optional values and return a list of key-value pairs.

I had looked at a couple of solutions such as http://www.codeproject.com/Articles/3111/C-NET-Command-Line-Arguments-Parser and http://lukasz-lademann.blogspot.co.uk/2013/01/c-command-line-arguments-parser.html but I think this way is a bit simpler and returns better results.

Also, this way allows optional parameters which can contain file paths, you can test here http://regexhero.net/tester/?id=2f4e252d-c89e-4134-8c7c-65c5186b3338

Umbraco Examine - Indexing Custom XML Data

I recently ran into a problem with an Umbraco Examine indexer suddenly stopping after trying to index the first node in the content tree.

The only error information I could get was:

Exception information:
Exception type: NullReferenceException
Exception message: Object reference not set to an instance of an object.
at UmbracoExamine.UmbracoContentIndexer.OnGatheringNodeData(IndexingNodeDataEventArgs e)
at Examine.LuceneEngine.Providers.LuceneIndexer.GetDataToIndex(XElement node, String type)

I tried using NodeIndexing & GatheringNodeData handlers to find out more but all I could see was the Examine was trying to index the root node (100 in this case), then looking for Node 1 (Which didn't exist).

Eventually I found out it was due a custom data type (TheFarm - EmbeddedContent) saving content as XML.

The data was being stored as:

    
      
        Node 1 content
        Node 2 content
      
    

The problem seems to be with using "id" as an attribute as it is used in umbraco.config:

<NodeType id="100" parentID="99" level="4" ...

It appears the indexer assumes it is parsing a new node when it reads this.

There are a few options to resolve this problem:

1. Wrap custom XML data in <![CDATA[
2. Try using a NodeIndexing handler on the BaseIndexProvider to deal with the XML.
3. Avoid using id as an attribute in custom XML data.

Option 3 seemed the easiest for me, I updated the  EmbeddedContent source code to use another id attribute.

Adobe Wallaby

The world of rich internet content and animation has been in a transitional period for a while.

For years Flash has pretty much been the only viable option (apart from Silverlight), but now other technologies such as Webkit, CSS3 and Canvas are providing alternatives.

It’s no secret Flash has its enemies, but it’s popular with a lot of producers because Adobe have a good suite of development packages that make it accessible to designers and developers.

In order for new options to overshadow Flash, designers will need development software to make producing rich content for Webkit and HTML5 browsers a lot easier.

There are a few out there, Sencha looks quite promising and Adobe has their Edge software in development for authoring HTML5 & Webkit animations.

Another offering is Adobe Wallaby, an application that will convert Flash animations into a Webkit Enabled version. I’ve tried a quick test myself here, it’s a little limited, and its output only seems to run properly in Chrome. It’s still in development, but it looks promising, and it should provide Flash developers an easy way to create content for the iPad and iPhone.

The main problem with these alternative, as far as I can see, is the animations they output all require a Webkit browser to run. In order for a true shift away from Flash I think we need decent development software that will produce standards compliant animations running purely in Canvas.

Umbraco - Missing node in content tree.

I've encountered this problem a few times, a page will go missing from the Umbraco content tree but it will still display on the front end.

It doesn’t show up in the recycle bin but you can find it when you search for it by name, and when you try and open it you get the following server error:

“No Document exists with Version 'xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx”

It turns out to be due to data being orphaned when the database is updating, you can find out more here .

I followed the advice on the Umbraco issue tracker and deleted the last entry for the affected node in the cmsContentVersion table, it worked for me.