Migrating Umbraco SQLCE database to MSSQL

Since Umbraco version 4.6 (correct me if I’m wrong here) we (developers) have been blessed with the possibility of using a Microsoft SQL Compact Edition database for developing Umbraco sites. If you’re using WebMatrix to manage your Umbraco sites, like I am, you would know of the “Migrate” button in the database section in WebMatrix. Pushing this button should easily migrate your Umbraco SQLCE database to any MSSQL database. However, this fails if you have any content which contains the characters ‘$(‘ – i.e. if you’ve used jQuery.

I tried nearly everything to export the data from the SQLCE database, but with no luck untill I found a program called Data Port Wizard by a company called Primeworks. This can be downloaded as a 30 days trial and migrates the data and tables in a matter of seconds with keys, indexes and everything you could wish for :-)

The program can be downloaded here: http://www.primeworks-mobile.com/Downloads/DPW.html

So, if you (like me) are stuck in a project with migrating data from SQLCE to a MSSQL server and don’t have the patience to manually add indexes, keys and stuff like that, this should be the right tool for the job!

Posted in Umbraco CMS | Tagged , , | Leave a comment

Umbraco development structure/architecture

It’s been over a year now since I decided settle down as an independent webdeveloper. Basically, it was just pure coincidence that I started developing Umbraco-based sites, but as we all know, Umbraco is quite addictive once you get the hang of the endless possibilities as a developer.

Now, in this first year as an independent webdeveloper I’ve seen a lot of good stuff out there and certainly a lot of bad stuff aswell! I have seen well-structured Umbraco solutions with just the right (amount of) patterns used and a very welldefined structure matching the ambitions of the solution. Sadly, I’ve also seen what I would like to define as “the ASP.NET developer building a huge website in addition to Umbraco” trying to ignore the Umbraco API at all costs. Don’t get me wrong here, there’s definitely some great ASP.NET/C# developers out there – it’s just a shame they don’t seem to take their time to acquaint themselves with the documentation.

With that said, I don’t consider myself as a software-architect (or some sort of fancy title like that). I still have a lot to learn when it comes to software architecture. However, I think it would be interesting to start an open discussion on how to structure an Umbraco solution and share some experiences across the awesome community. I do know that it’s not all sites that needs 5+ or 10+ different class libraries in Visual Studio ;-) After all, we are blessed with a lot of built-in plug-and-play stuff in Umbraco to set up small sites.

I’d like to share how I generally set up a structure for a medium-sized Umbraco solution.

The screenshot below shows the solution in VS2010 that I typically use:

I think the names of the libraries are pretty self-explanatory and typically we could leave some of them out depending on the needs of the solution. I.e. the Interfaces, Model and DAL could be left out if no custom tables/databases are required, the Events library can be left out if we don’t need to hook up on any of the Umbraco events and so on so forth.

Although we could leave some of these libs out, I like to have them there anyway since requirements can/will be changed as the project goes on. Also, some might say that it’s totally overkill to have these libraries, but I actually find it pretty convenient once you have your post build events set up to copy the dll’s.

It would be interesting to know your opinion on this topic and eventually start a discussion on best-practices. I bet there’s just as many ways to structure an Umbraco solution as there are developers out there ;-)

Posted in ASP.NET, Umbraco CMS | 2 Responses

Umbraco: more event goodness!

More event-based programming. Can’t get enough of it!

On a more serious note, as an adjunct to my previous post about page events, I want to go into details (as much I can, really) on how I also made use of the Document events in Umbraco.

It seems like editors/webmasters are more demanding these days when it comes to doing their task automatically in their CMS. My latest project was no exception. Basically, the requirement was to do four different tasks in two clicks three clicks (right click -> Create -> Create)

What we want to achieve in these three clicks is:

  • Create a root document
  • Create a corresponding UserGroup
  • Create a news section under the root document
  • Set permissions to the created UserGroup on the root document

Of course, we could also use the Relationship API to relate members to the root document, but since we’re going to use the built-in ASP.NET MemberShip provider, a corresponding usergroup would be the best option (at least in my opinion)

So, on to the event stuff! Doing this is actually quite simple using the before-mentioned event model in Umbraco.

First, create a new class (I called mine ‘DocumentEvents’), we need this class to inherit from the ApplicationBase found in the umbraco.BusinessLogic namespace. In the constructor of the class, we’ll hook up to the Document.AfterPublish and Document.AfterDelete events.

Let’s first have a look at the Document.AfterPublish event. First, we make sure that the document in question is of type “YourDocumentAlias” so we won’t be creating a new usergroup for every (other) document being published ;-) Next, we create a new usergroup with the same name as our Document as long as it doesn’t already exist. Then we create the news root node as a childnode of the document being published and at last, we set the permissions so only the members of our new usergroup may access our new rootnode and all it’s childnodes.

Onto the Document.AfterDelete event. Whenever an editor/administrator deletes the rootnode, we want to make sure he deletes the usergroup aswell. All we have to do in the event is to check if the usergroup exists and if it does, delete it.

And that’s basically all there is to it. This post is just an example of what we’re able to do with the event model in Umbraco. Basically, by using the event model, you should be able to publish whole sections in one go and even a whole site, maybe? :-)

Posted in ASP.NET, Umbraco CMS | Tagged , | Leave a comment

Umbraco: send document as newsletter

In one of my recent projects, the client wanted to be able to send a news-document as a newsletter by clicking on a button similar to publishing the document.

Since I’ve never had a chance to actually modify the backend (other than creating new sections), this was a fun challenge. This is what I did:

To achieve this we have to:

  1. Hook into the Page event in Umbraco
  2. Add a new button to the Save/Publish menu
  3. Only show the button on news documents
  4. Send the current documents header and text as an e-mail
We then need the following references:
  • umbraco.BusinessLogic
  • umbraco.presentation.masterpages
  • umbraco.uicontrols
  • umbraco.cms.businesslogic.web
  • umbraco.BasePages
  • System.Web.UI.WebControls

First off, we create a new class and inherit from the ApplicationBase class found in the umbraco.BusinessLogic namespace. In the class’ constructor we’ll hook up to the Page.Load event, so whenever a Page is loaded in Umbraco, we want to do something.

In the eventhandler we have to get a reference to the page, grab it’s URL and check a few things before proceeding. We want to make sure that: we have a querystring with a node id, we’re in the Content section of Umbraco and last, that we have clicked a news document.

Check querystring, page url and document type

So whenever a Page (in the Umbraco backend) is loaded we check the querystring, the URL and the document/node we just clicked. The ‘currentDoc’ is the document the user has clicked in the backend.

Time to add the send-as-newsletter button!

To add the button we need to get a reference to the TabView control (the control which shows the nodes tabs), then get a reference to the TabView panel inside it. We’ll then loop through the TabPages of the TabView to be able to add the button.

Insert button into Umbraco backend

Finally, we need to add the logic (i’ll leave that one up to you ;-) ) to send the newsletter to all the members which are set to receive newsletters. As you can see, the way I wanted to show a Success/Failure speechbubble in Umbraco is deprecated (it works though!), so if you know of a better way, please let me know.

That’s all! :-)

Posted in ASP.NET, Umbraco CMS | Tagged , | 4 Responses

Working with Umbraco Checkboxlist prevalues

Recently, a fellow ASP.NET/Umbraco developer asked me about my approach to working with prevalues of the Checkboxlist datatype in Umbraco from a UserControl.

For a regular CRU(D, the prevalues are deleted when the document containing the datatype is deleted) there’s three steps:

  1. Creating a new document with selected prevalues
  2. Reading prevalues from a documents datatype
  3. Updating the prevalues

I’d like to start with reading the prevalues. What we need is a regular CheckBoxList ASP.NET control in our UserControl:

This will be used to populate the prevalues from a document. To populate/read the prevalues of a document, we can make use of the GetPreValues(int) method from the Umbraco library. This method returns an XPathNodeIterator since the prevalues are stored as XML. When iterating through the prevalues, we can then add a new ListItem with the id and the value of the prevalue to a ListItemCollection which we can use for databinding, like this:

The id ’1100′ used in the umbraco.library.GetPreValues(1100) call is the id of your checkboxlist datatype, which you can find by hovering the datatype in the developer section -> datatypes in Umbraco.

This should leave you with a databound CheckBoxList control corresponding to the Checkboxlist in Umbraco.

For creating a new document where the user have checked some of the ListItems, we need to loop through the ListItems in the ListItemCollection and check if each of them is checked:

For saving a clean string with no extra commas, we simply get the substring starting from position 0 until we hit the last comma.

Last, for Updating the values, we have to compare the CheckBoxList ASP.NET control with the Checkboxlist datatype on the document in Umbraco and add or remove values to/from the comma seperated string:

That’s about it! As always, if you know of a better way of doing this from an ASP.NET UserControl, please let me know :-)

Posted in ASP.NET, Umbraco CMS | Tagged , , | 19 Responses

Using KnockoutJS with Umbraco /base

It’s been a long time since my last blog-post and a lot has happened when it comes to learning new technologies, frameworks and common best-practices. Also, the solutions I’m building are getting bigger and more demanding when it comes to the great user experience both in the backend (Umbraco) and on the frontend.

When I attended CodeGarden ’11, I was introduced to a JavaScript library called KnockoutJS. As a former Silverlight and Surface developer, I found KnockoutJS interesting since it gives us the possibility to work with the MVVM pattern on the frontend of a website. Without writing a wall of text about how KnockoutJS works, i’d like to pinpoint some of the concepts and goods that this library gives us:

  • Declarative bindings: Easy ability to two-way bind elements using the data-bind=”" attribute.
  • Automatic UI updates: The UI changes whenever the viewmodels data changes.
  • Dependency tracking: Makes it possible to create relationship between model data.
  • Templating: Create templates to render the UI with the model data.

Last week I had the opportunity to make use of KnockoutJS in one of my clients Umbraco sites. The following scenario I’m going to show you in this blogpost is a fairly simple form to edit some details on a document. While this sounds simple, it was a challenge to work with a checkbox list because I had to populate the already chosen values in the list.

In this example I’m using:

First off, let’s have a look at the Document Type in Umbraco to get an overview of what data we’re working with (sorry about the danish names):

From top to bottom, freely translates: Title, Comments, Contact data, Description, Goals, Max. number of visitors, Course, Class, Knowledge center

Next, we’ll use Razor to populate the values into some HTML. You could use XSLT for this if you’re into that kind of gloomy business ;-)  Since my Razor file is about 130 lines I’m going to split it up a little. Explanation is in the code snippet. Here, we populate the Class checkbox list:

And next, a more simple snippet where we populate string values:

As you can see in the above snippets, we’re using the data-bind=”" attribute on elements. This tells KnockoutJS, that we’re trying to bind this element to a property on a viewmodel. I.e., in the second snippet we’re binding the input elements value to the contact and comments properties on our viewmodel. You can bind to just about any attribute and/or event an element have and you can even write your own binding handlers. In this case, we need to pass the values of the already selected checkboxes in our checkbox list to the viewmodel when the page is loaded. For this, we can create a custom binding handler which I will cover later.

Next, let’s have a look at the actual KnockoutJS viewmodel:


For those of you who have worked with Silverlight/WPF/Surface before, this snippet should be quite similar (though simpler) to a viewmodel in .NET terms. What happens here is fairly simple really: we declare our viewmodel and set the properties we need. When setting the properties, we need to set them to ko.observable(string) or ko.observableArray(). This will hook up dependency tracking to the property, which tells knockoutJS that it need to observe any change to this property. In .NET we can think of this as the INotifyPropertyChanged interface and the observableArray() as the ObservableCollection. So basically, everything (except the nodeId which comes from a hidden field) is hooked up to KnockoutJS in the viewmodel as observables – notice even the submit buttons click event is bound to the save property which sends off the viewmodels current state as JSON to the server using the ko.toJSON(viewmodel) function. We need to make a call to the ko.applyBindings(viewmodel) function afterwards to.. well.. apply the bindings ;-)

We still need to populate the already selected checkbox values to our checkbox list and store any changes to this. For this we can write our own binding handler (thanks to Ryan Niemeyer for clarification on this!)

Since the values are stored in an array, we’d like to get these values as a comma-seperated string for later use when updating the document. This can be done like this:

This sets a new property on the viewmodel with the comma-seperated string of values from the array.

We can now bind to this custom handler like this: <input data-bind=”classCheckedWithInit: selectedClassChoices” type=”checkbox” checked=”yes” value=’@pairs.Value’>@pairs.Key</input>

So now our complete viewmodel looks like this:

Whenever the client is changing any value, it will be reflected on the viewmodel (and thus any element that’s bound to the given property being changed) and as previously written, when the save event occurs, the whole viewmodel is being send to the server as JSON. For sending the data, we can use Umbracos /base functionality. In this example we’re making an ajax call to the SaveChanges.aspx page with the json object in the querystring (if anyone has got a better way of doing this, please let me know! :-) ) On the serverside, we’re going to use the JSON.NET from Newtonsoft to parse the json string to an actual object that we can get the values from. The base method looks like this:

In a perfect world, you would return a value to tell the client if the request succeeded or not, though ;-) Most important in this snippet is how to parse the string to a JSON object and pull the values from it.

Anyway, this turned in to a rather long wall of text. I’m sorry, guess I got carried away. I hope it makes sense though, even if it seems like a whole lot of work for something that simple I think the MVVM approach with KnockoutJS is a step in the right direction for making thick, responsive and intuitive frontends! And i’m definately not done learning all the cool stuff KnockoutJS gives us.

Posted in JavaScript, jQuery, KnockoutJS, Umbraco CMS | Tagged , , , | Leave a comment

Uploading multiple files to Umbraco with Uploadify

Last week I was working on an Umbraco project which required that the frontend users are able to upload several images to Umbraco. After a good few minutes of googlin’ for a javascript library that could handle this, I ended up fooling around with a library called Uploadify.

Uploadify is described like this:

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.


  • jQuery Implementation
  • Multiple File Upload Capabilities
  • SWFObject Integration
  • Compatibility with Popular Server-Side Languages
  • Highly-Customizable
  • Large Support Community
  • Extensive Documentation with Examples”

You can check out live demos of Uploadify here: http://www.uploadify.com/demos/

What I like about Uploadify is that it’s highly customizable with different events, HTML/CSS layout and so on, so forth. The only thing I need is if the users haven’t installed Flash and/or has disabled javascript, it will fail gracefully, but I’m sure it’s possible to write some custom JS code to take care of this.

Setting up Uploadify is quite easy, you just need a regular HTML input like this:

Place the files downloaded from here: http://www.uploadify.com/download/ in your solution

.. and reference it on your UserControl:

Looking at the documentation page (http://www.uploadify.com/documentation/) in the Implementation chapter it’s all described right there and the default way of setting up Uploadify will be:

This causes the queue to automatically start (hence the ‘auto’: true property) uploading the selected picture(s) when selected. Also, notice that Uploadify needs two urls: the uploader .swf file which should be included in the Scripts/uploadify/ folder and a path to the actual upload script. The upload script is the code that actually uploads the file(s) to the server.

While this works out of the box (depending on if your upload script works) I wanted it to start uploading the selected files when the user clicks an Upload button/link. Also, the users should be able to enter a description text to each of the images in the queue before uploading. To do this, I had to modify the HTML in the jquery.uploadify.v2.4.1.js file to add a description field for each of the items in the queue. Scrolling down to about line 134 in the code you’ll find the actual queue HTML output which needs to be changed. I changed it to:

Remember to add a ‘\’ at the end of every line. Since the id needs to be unique I simple gave it the ID of the queueitem.

Next, I set up the Uploadify script like this:

First I create a new array which acts like the queue and set the folder id, which is the root media folder in Umbraco. Next I set the properties to taste – i.e. the queue should not be cleared when upload is finished etc. One of the events you can subscribe to is the onSelect which fires whenever a user selects one or more files. In this case I add the selected item(s) id to the queue array.

Finally, when the user is done selecting files, writing descriptions to each of them and clicks the Upload button, I loop through the items in the queue array and call the uploadifyUpload() method which fires the upload script. Before making a call to the uploadifyUpload() method I chose to pass some settings with the call. In Uploadify you can pass values to the call by adding these to the scriptData property. In my case I would like to know the id of the media root folder to upload the pictures to and also grab the description that the user has entered in the textfield. To get the description for the right queue item I need to find the HTML element, which id is the same as “description + the current queue id”

Let’s take a look at the upload logic. First off, I had to create a new Generic Handler to run the upload logic since this needs to be called for each of the items in the queue.

When creating a new Generic Handler in Visual Studio you get a method called ProcessRequest which takes a HttpContext object as parameter. This context holds all the data needed – the data which I passed to the scriptData above. So I start by fetching the data needed by doing this:

Since this is a regular POST I’m able to fetch the values from context.Request["postValue"]. The HttpPostedFile is the selected file from Uploadify.

Next up, I’m writing the logic for the upload to Umbraco, which looks like this:

And the method for creating the thumbnail:

And basically, that is all there is to it :)  As always, feel free to comment/discuss this.

Thanks for reading!

Posted in ASP.NET, Umbraco CMS | 10 Responses

Combining Silverlight 4 and Umbraco pt. III: Final preparations and copy/pasting

Alright, so far so good! J In this last part of my blogposts about running Silverlight with Umbraco as backend I will go through the final steps to get the application up and running.

When everything builds nice and smoothly it’s time to change the path to the services in the Silverlight application. These paths can be found in the config file called ‘ServiceReferences.ClientConfig.’ This config file shows you the bindings and endpoints to the services you’ve referenced in your project. What we need to change here is that it tries to find the services on the endpoint: localhost:1234/Services/MenuService.svc. We need to tell it to look for the service at “/Services/MenuService.svc” since we will be placing the service folder in the root of our website:

After this is done, we need to build our solution and copy over some files in order to get the Silverlight application to run in Umbraco.

First off, we need to open the default webpage in our website that hosts the Silverlight application and copy everything except for the first line: <%@ Page Language=”C#” AutoEventWireup=”true” %> we don’t need that.

In Umbraco we will copy this into the Silverlight Homepage template found under Settings -> Templates -> Silverlight Homepage (in my case). Going through the pasted code you will see that it’s the code that’s hosting the Silverlight application (.xap file) and if we take a look at the path to where it’s looking for the xap file it should say: “ClientBin/SilverlightUmbraco.xap”. So this will be the next thing to copy over.

Going to the websites project folder, we have to copy the Silverlight.js file and the ClientBin, Model, and Services folders to the root of the Umbraco website:

Also, in the bin folder, we need to copy over the .dll file to the bin folder in the root of the Umbraco website.

The last thing to copy is found in the web.config file in the website that hosts the Silverlight application. We have to copy the <system.serviceModel></system.serviceModel> snippet in order to make the services available. So copy the following snippet:

And paste it into the web.config file found in the root of the Umbraco website right under the </system.web> end tag.

To make sure the services are running as expected we can go to the following url: http://yourdomain.com/Services/MenuService.svc and you should see a screen that represents the service which indicates that it’s running.

That’s it – the Silverlight application should start up as soon as you hit the domain.

If you have any questions or want to discuss anything about these blogposts, please feel free to contact me on info@nuanceweb.dk or mail@bo-mortensen.dk and I will be happy to talk it over with you since there’s possibly a lot of other ways to run Silverlight with Umbraco.

Thanks for reading! J

Posted in Silverlight, Umbraco CMS | Leave a comment

Combining Silverlight 4 and Umbraco pt. II: Setting up the Silverlight application

Hi again, in this part I will go through setting up the Silverlight application in Visual Studio and create the WCF services needed to consume the XML data from Umbraco.

First off, let’s create a new Silverlight Navigation Application. You could go for a regular Silverlight application and make some custom navigation, but as I see it, there’s no reason not to make use of the Navigation framework that comes with Silverlight version 3+.

When hitting the ‘OK’ button it prompts you to choose if you want to host the Silverlight app in a new Website, which we certainly would like to!

Now that we have our new solution containing a Silverlight application and a website that hosts it, we can start adding business classes, services, viewmodels, views and so on, so forth. This is my humble, very simplified structure:

Notice that the Model (business classes) and Services are just folders in the web project. This is for the sake of demonstration and I do not recommend you to do this in a production, large-scale environment – instead I would recommend you to split it up in projects i.e. SilverlightUmbraco.Services, SilverlightUmbraco.Services.Contracts, SilverlightUmbraco.Model and reference these where they are needed.

At first, let’s dig into the Model and Services folders:

We have to sort of ‘mirror’ the document types in Umbraco. As shown in the above image I have a NewsItem class, a TextPage class and a Menu class which are containing properties to store the data needed from Umbraco. I.e. the Menu class looks like this:

Simply three string properties containing the name of the menu item, the url to a page and the alias of the page which I will talk about later on.

Same goes for the TextPage and NewsItem classes, with the respective properties needed.

Now, the services job is quite simple: consume data and return objects. Let’s have a look at the MenuService:

First off we tell the service to load XML data from a given source, in this case the XML from Umbraco as shown in the first part:

We loop through the collection of <navigationItem> elements and add a new Menu object to a List which we return at the end. Simple stuff! Note that the service needs the full path to the XML data.
Again, same goes for the TextPage and NewsItem services. Although the TextPage is a bit different because it takes a URL parameter to know which Umbraco textpage it needs to read the XML from – more on this later.

Now, let us have a peek at the Silverlight Navigation Application:

For this I am using a simple MVVM structure containing the ViewModels folder and a Views folder. If you want to know more about this pattern, just do a search on ‘MVVM’ on google.com and you should have enough pages to read for the next few decades ;-)

We still need to compare the Silverlight application to our Umbraco installation and to do that we need to have a MenuViewModel, NewsViewModel and a TextPageViewModel and the following views: MenuView, NewsView and TextPageView.:

At first we have to set the MenuView’s datacontext to the MenuViewModel and tell it to get the menu items:

The MenuView and MenuViewModel will be our “anchor” when it comes to navigation in that we have to know the difference between a TextPage view and a News view – that’s where the Alias property comes into play. The Alias property is basically the nodeTypeAlias from the document type, i.e a TextPage will have the alias ‘umbTextPage’. If we take a look at the XAML for the MenuView we will see that we have to make use of the Tag and CommandParameter properties on a button (even though I don’t use commanding in this example) we are binding the Tag property to the url for the Umbraco page i.e. /getting-started.aspx or /news.aspx. The CommandParameter property is bound to the Alias to tell us what “type of page” we need to show.

When it comes to navigating I’m using a switch on the MenuViewModel that looks at the alias of the button clicked and tells the MainPage’s navigationframe to navigate to the corresponding view like this:

This is where MVVM purists will preach for hours and hours about best practices because essentially the ViewModels shouldn’t know anything about the View which it clearly does here by referencing the MainPage. If anyone knows of a better solution to this, I would be more than happy to hear from you J

I should also note that I have set up the navigation frame’s uri mapping in the App.xaml which looks like this:

It makes the urls more userfriendly after all.

As you can see in the above image, we’re trying to load the TextPageView with a url parameter. This parameter is basically the url to the umbraco text page, i.e. “/installing-modules.aspx” and is used by the TextPageService to get the XML data, create the TextPage object and return it to the TextPageViewModel’s TextPage property. So this will be the workflow when we want to show a TextPage:

In the TextPageView loaded event we can get the querystring which contains the Umbraco text page url as shown above. Then we can call the GetTextPage(string url) method on the TextPageViewModel which fetches the XML data for the given url and sets the TextPage property to the object returned from the service. Like this:

Then at last, we can set up the bindings as we like on the TextPageView:

I hope this gives an idea of the workflow in the Silverlight application. If you have any questions, please feel free to contact me J In the next post I will go through the final steps to get the application up and running in Umbraco.

Posted in Silverlight, Umbraco CMS | Leave a comment

Combining Silverlight 4 and Umbraco pt. I: Setting up Umbraco

Hi all, time again to update my blog here with some new stuff regarding Umbraco and Silverlight. I’ve always been fascinated by the possibilities of working with Silverlight and since my first impression of using Umbraco in my online solutions I’ve thought about combining these two powerful tools – even though the man himself, Niels Hartvig doesn’t seem to enjoy the existence of Silverlight ;-)

What got me started on this were the videos from Umbraco.tv about combining Flash and Umbraco: reading and writing data from/to Umbraco. So by any means, go check these out at http://www.umbraco.tv (you’ll need a subscription to view them though) they give you a good idea of what I’m about to babble about.

So what did it take to use Silverlight with Umbraco the way I did it? Basically, three things are needed:

  • Setting up a new site in Umbraco that is supposed to only show XML data to the frontend (more on this later)
  • Setting up a Silverlight navigation application in Visual Studio
  • Creating the WCF services needed to consume data from Umbraco

At first, let’s take a look at the site structure:

As you can see, this site is quite simple since it’s for demonstration purposes. We have our root site “Simple Silverlight website” where the .xap file is hosted, a news section and some regular text pages with the standard text in it. Last, there is a folder called [XML Files] which is placed outside the site itself. This folder should contain documents that outputs XML – in this case, the menu structure of the site.

As you can see, I’ve made an icon to show the Silverlight logo in the content tree and a thumbnail for when creating the document. These can be found here:




The first 16×16 pixel icon should be placed in /umbraco/images/umbraco and the thumbnail should be placed in /umbraco/images/thumbnails and you’re good to go.

The good thing about this structure is, that you can actually create another site for the non-Silverlight users and copy over the content from the Silverlight site, you simply just switch the template to a regular HTML template on the documents.

The document types I have used are as follows:

I have then created a template for every one of them to be able to output the XML needed to show in the Silverlight application.

To output the XML, I’ve used XSLT files. In this case I have the following XSLT files:

  • XMLGetTextPage – outputs the XML for any of the text pages.
  • XMLListNews – outputs the XML for the list of news, this being “News Item 1, News Item 2 and News Item 3″
  • XMLTopNavitation – self-explanatory: outputs the XML for the top navigation

Let’s have a look at the XMLGetTextPage.xslt at first to get an idea of how to output XML:

Basically, I have the main XML tag called <Content> (could be whatever you decide, really) and the child node called <TextPage>. In this child node I’m setting the attributes I decided to output: id, name, author, createDate and content. More (or less) could, of course, be added if needed. Time to place my XSLT/Macro on the Text Page template:

When you hit save and try to load one of the text pages in a browser it will be blank, but if you go to “View Source” you should see the XML output.

This above example goes for the other XSLT files I have – simply just tell it to output the XML you need and place the macro on the given template.

That’s about it for part one, we’re now ready to consume the XML data with WCF services in our Silverlight project. In the next post I’ll take you through my (very) simple Silverlight application in Visual Studio. Thanks for reading.

Posted in Silverlight, Umbraco CMS | Leave a comment