As a result of freedom fridays at the umbraco HQ I’ve made a new little umbraco package.

Make sure your content editors don’t end up editing the same document and overwriting each others changes with this addon for umbraco.

In environments with multiple editors the editors will see in the umbraco content tree which documents are currently being edited.

Also on the content page there will be a notification when another editors are viewing/editing the same document.

For a quick demo check out this video

You can download the package on the project page at http://our.umbraco.org/projects/backoffice-extensions/look-who’s-editing-now

Want to output Contour records with razor instead of xslt well I’ve created some dynamic objects you can use to do so (please note that this is just a primary version of the dynamic objects, this will be improved in a next Contour release)

Here is an example:

@using Contour.Addons.DynamicObjects

<ul id="comments">

 @foreach (dynamic record in Library

           .GetApprovedRecordsFromPage(@Model.Id).OrderBy("Created"))

 {

     <li>

          @record.Created.ToString("dd MMMM yyy")

          @if(string.IsNullOrEmpty(record.Website)){

             <strong>@record.Name</strong>

          }

          else{

             <strong>

               <a href="@record.Website" target="_blank">@record.Name</a>

             </strong>

          }

         <span>said</span>

        <p>@record.Comment</p>

     </li>

  }

</ul>

This example uses the comment form created from the comment form template and then simply outputs all comments submitted on the current page. To access the field values you can simply use the dot notation (.FieldCaption like @record.Comment)

Download the assembly here: (simply unzip and drop in your bin directory)

Make sure you are running at least version 4.7 of umbraco since it won’t work on older version and of course have Contour installed.

The video wasn’t available when I posted the slidedeck and sourcecode so now you can also watch the “Master of Datatypes” session. See how  easy it is to create your own custom umbraco datatypes (I’m creating 3 new datatypes in 30 minutes in the video).

Make sure to check out the buug.be site since you can watch all the other sessions from the Umbraco Be Festival to!

http://www.buug.be/en/events/umbraco-festival

The getting started with umbraco post is the most visited one on this blog. I thought I would make an update since getting started with umbraco got a lot easier recently because there are 9 free videos on umbraco.tv outlining the basics for both site builders and developers. Learn about the basis building blocks like document types, templates and macros and also see how easy it is to use .net user controls.

You can find the free umbraco foundation videos on umbraco.tv

For site builders:

• Document types
• Templates
• Stylesheets
• What are macros
• Creating your first xslt macro

For developers

• Using .Net User Controls
• Macro Parameters
• Macro Caching
• Debugging

These should be your first stop when diving into Umbraco!

You can relate stylesheets to the richttext editor datatype in umbraco, sometimes this will cause an unwanted effect. Like a background color that you don’t want, …

But this can easily be changed.

You can target the richttext editor with the class

.mceContentBody

So by appending this to the related stylesheet, you have more control over the styling in the richttext editor datatype.

(make sure to clear your browser cache, to view the result)

The last couple of weeks I’ve gotten lots of request for the poll package sourcecode.

So I’ve added the sourcecode to the poll project page on our.umbraco.org (attached files).

Enjoy!

Simon Justesen, has a great post describing how to add new sections and trees inside umbraco (part 1, part 2).

To make it easier to get started, I thought I would provide some starter sourcecode for a demo custom section.

Steps to get this running on your umbraco installation:

- Copy the assembly (CustomUmbracoSection.dll) to the \bin directory

- Copy the file custom.gif to \umbraco\images\tray\ directory

- Make a ‘custom’ directory in \umbraco and copy the editCustom.aspx page to \umbraco\custom directory

- Insert a new row in the umbracoApp table

INSERT INTO [umbracoApp]

           ([sortOrder]

           ,[appAlias]

           ,[appIcon]

           ,[appName])

     VALUES

           (9

           ,‘custom’

           ,‘custom.gif’

           ,‘custom’)

- Insert a new row in to umbracoAppTree table

INSERT INTO [umbracoAppTree]

           ([treeSilent]

           ,[treeInitialize]

           ,[treeSortOrder]

           ,[appAlias]

           ,[treeAlias]

           ,[treeTitle]

           ,[treeIconClosed]

           ,[treeIconOpen]

           ,[treeHandlerAssembly]

           ,[treeHandlerType])

     VALUES

           (0

           ,1

           ,0

           ,‘custom’

           ,‘custom’

           ,‘custom’

           ,‘.sprTreeFolder’

           ,‘.sprTreeFolder_o’

           ,‘CustomUmbracoSection’

           ,‘Trees.LoadCustomTree’)

- Update the \umbraco\config\create\UI.xml file, add:

  <nodeType alias=”initcustom”>

      <header>Custom</header>

      <usercontrol>/create/simple.ascx</usercontrol>

      <tasks>

        <create assembly=”CustomUmbracoSection” type=”Tasks.CustomTasks” />

        <delete assembly=”CustomUmbracoSection” type=”Tasks.CustomTasks” />

      </tasks>

  </nodeType>

After these steps are completed you will have to enable the new section for your user.

Then it should show up as the last icon in the sections (called custom, with a HAL’s camera eye icon).

In the custom section you’ll find this:

So just a sample node that will open a demo edit page.

I’ve created my share of umbraco packages and thought I’d try to share some tips/insights.

Creating packages is easy, the built-in package creator makes it super simple and with package actions you can perform additional common tasks (like updating the xsltextensions) without having to write a single line of code.

It really takes a minimal effort to package something up that you made, even if it’s very project specific it should be possible to isolate the functionality and package it up.

Dare to share

Even a simple package can be a great help, so don’t hesitate and share

Naming

To avoid conflicts and overwriting other existing items when installing a package, make sure you have unique and meaningful names

• Assemblies

Starting these with your name or company name followed by a project name should be enough to make them unique
FE: Nibble.Umb.Poll

• Stylesheets, Scripts, Document types, Templates, XSLT files, Macros

A unique and meaningful name that links them back to the package, so it easy to see that they are part of a package
FE: not style.css but starrating.css
not list.xslt but bloglistposts.xslt       

• Usercontrols

placing these in a new unique folder inside the /usercontrols folder makes it easy to see that they are part of a package
FE: /usercontrols/Nibble.Umb.Poll/poll.ascx

• Config files

place these in the /config folder (again, with a unique and meaningful name)

Installation

Package are really easy to install but in some cases the package installation might fail. So it’s always great to provide some manual installation instructions, just in case.

Think ahead

You might have created a package with a simple site in mind, but don’t forget they can/will also be used on multilingual sites, site running a different database engine. Or in case it’s a datatype, will be used with Canvas, autoform, doc2form. It’s a great plus if this is taken into account.

What doesn’t work

If the package only works with a certain umbraco version and up or if it only works on sql server, don’t forget to mention this to avoid that people install it on non supported installations.

I’ve also added this post to the wiki on our.umbraco.org, if you have anything to add/change (or correct my bad spelling) please do so .

I finally got round to polish and package the umbraco poll I made some time ago. So here it is …

The package installs the following:

The document types (Polls, Poll, Poll Answer) will be used to setup the polls.

So you’ll have a Polls document that will contain several Poll documents and these will have several Poll Answer documents beneath it.

After you have setup a poll with some answers in your content area you can get the poll on your page.

First add a reference to the installed stylesheet (/css/Nibble.Umb.Poll.css) and then place the Poll macro on your template.

Please note that:

• The macro will have to be placed inside a form with runat=”server” attribute
• There has to be a scriptmanager on the page

The poll macro has several parameters:

• Poll Node Id: This is the id of the Poll content node that you want to display
• Display Only: Check this if you only want to display the results of a poll
• Submit On Select: Check this if you want to submit the vote when a user selects a answer
• Hide Submit: Check this if you want to hide the submit button
• Sort Results: Check this if you want that the results are sorted by number of votes
• Width Total Votes: Instead of the highest number of votes being equal to 100% width, the total number of votes is 100%
• Hide Question: Check this if you want to hide the question
• Random Poll: Check this if you want to display a random Poll, you’ll also have to update the Poll Node Id to the Polls document (containing the different polls)

So depending on the parameters (Submit On Select and  Hide Submit) your poll can look like:

or (with submit button)

The Results can look like this:

Sorted:

Width Total Votes:

You can download the package here: http://our.umbraco.org/projects/poll

First some info on the setup:

After installing runway to get a basic site up and running I created a folder in the media section and added several images

On my homepage document type I added a ‘media picker’ property called ‘Pictures’. There I’ll select the media picture folder.

All that’s left now is to write some xslt that will select a random image from the media folder.

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>

<xsl:stylesheet 

    version=”1.0″

    xmlns:msxsl=”urn:schemas-microsoft-com:xslt”  

    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” 

    xmlns:msxml=”urn:schemas-microsoft-com:xslt”

    xmlns:umbraco.library=”urn:umbraco.library”

    xmlns:myFuncs=”urn:my-scripts” 

    exclude-result-prefixes=”msxml myFuncs umbraco.library”>

<xsl:output method=”xml” omit-xml-declaration=”yes” indent=”yes”/>

<xsl:param name=”currentPage”/>

<xsl:variable name=”imageRoot” 

    select=”$currentPage/ancestor-or-self:: node[@level = 1]/data [@alias = ‘Pictures’]”/>

<msxsl:script implements-prefix=”myFuncs” language=”JavaScript”> 

<![CDATA[

var myArray = new Array();

function random(){     

    var index = Math.floor(Math.random() * myArray.length);    

    return myArray [index];

}

function addtoArray(item){

    myArray.push(item);

}

]]>

</msxsl:script> 

<xsl:template match=”/”>

<!– start writing XSLT –>

<xsl:call-template name=”buildArray”>

<xsl:with-param name=”arrayNodes” 

    select=”umbraco.library:GetMedia($imageRoot, ‘true’)/node/data[@alias=’umbracoFile’]”/>

</xsl:call-template>

<xsl:value-of select=”myFuncs:random()”/>

</xsl:template>

<xsl:template name=”buildArray”>

<xsl:param name=”arrayNodes”/>

    <xsl:for-each select=”$arrayNodes”>

        <xsl:value-of select=”myFuncs:addtoArray(string(./text()))”/>

    </xsl:for-each>

</xsl:template>

</xsl:stylesheet>

This snippet will output the relative url of a random picture from inside the selected media folder ( like /media/44/dsc00033.jpg ).