Nibble

Archive for July, 2009

Adding a new/custom section to umbraco, sample project 9

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.

You can download the sourcecode here

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.

image

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

image

In the custom section you’ll find this:

image

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

Thoughts,tips for creating umbraco packages 4

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 .

New Package - Poll package for umbraco 4 17

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

image

The package installs the following:

image

 

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

image

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:

image

 

  • 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:

image

or (with submit button)

image

The Results can look like this:

image

Sorted:

image

Width Total Votes:

image

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