Try Now
More in this section
Blogs RSS feed

Creating a content module - Sticky Notes for your backend Dashboard

by Liubomir Velkov

Sticky notes are very useful when you need to write down some information to remember across work sessions.

The Dashboard page of the Backend can be used to show these notes. Every time you login to your Backend you will see the notes that will remind you of what you wrote in your previous session. We will build a module that will add a new content type - Sticky notes - that you can manage from the Backend, and modify the Dashboard page to display these notes. We will use the jQuery Sticky Notes Plugin - http://www.jquery-sticky-notes.com/ .

Let's start by building the content module - we'll name it StickyNotes. This module is based on the Locations module from the SDK. It adds a very basic content type - "StickyNote" - that doesn't support lifecycle or multiple languages and allows to edit only two fiels - Title and Content. The model class for StickyNoteItem also contains 4 more fields - Left, Top, Width and Height - that will store the position and size of a sticky note. We'll also use the Visible field derived from the Content class to determine whether the note should be displayed on the Dashboard.

The configuration, provider, manager, model, mappings and UI templates are basically the same as in the Locations module. They have been tweaked a little to be more fitting for our purposes. The Content field now is a simple TextField instead of HtmlField, even though you can enter HTML tags there. Please note that in the CreateStickyNote(Guid id) method of the provider we initialize the Left, Top, Width and Height properties of the created item to have some meaningful initial values.

The module class is also pretty much the same. However we register two WCF services in Initialize() - one is the generic content service used to manage the Sticky notes content items and the other is a utility service used when interacting with the notes on the dashboard - e.g. moving, hiding or changing their text. We use the following lines to register the services:

SystemManager.RegisterWebService(typeof(StickyNotesBackendService), "Sitefinity/Services/Content/StickyNotes.svc");
SystemManager.RegisterWebService(typeof(StickyNotesUtilityService), "Sitefinity/Services/Content/StickyNotesUtility.svc");


In the project there is also a widget control that takes care of the displaying of the notes - StickyNotesWidget. We add this widget to the Dashboard backend page during the installation of the module using the following code:

var pageManager = PageManager.GetManager();
var dashboardPage = pageManager.GetPageNodes().Where(p => p.UrlName == "Dashboard").FirstOrDefault();
var dashboardAdd = new StickyNotesWidget();
var pageControl = pageManager.CreateControl<PageControl>(dashboardAdd, "Content");


We'll take a closer look to this widget now. Since the sticky notes library uses its own JavaScript, CSS and image files we need to add them all as resources to our project. jquery.stickynotes.js is the main library file and StickyNotesWidget.js is the script for the widget. I modified a little jquery.stickynotes.js - in the prepareContainer() method - in order to make it more convenient with the Dashboard page. jquery.stickynotes.css is the CSS file that has several image references inside it. In order to make these references work with our resources we use the following dynamic syntax inside the CSS file:

background:transparent url(<% = WebResource("StickyNotes.Resources.delete.png") %>) no-repeat top left;


This allows us to link images from resources to inside of CSS files. The CSS file itself is included in the widget template - StickyNotesWidget.ascx - using the following Sitefinity control:

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<sf:ResourceLinks id="resourcesLinks" runat="server" UseEmbeddedThemes="True">
    <sf:ResourceFile Name="StickyNotes.Resources.jquery.stickynotes.css" AssemblyInfo="StickyNotes.StickyNotesModule, StickyNotes" Static="true" />


Now inside the StickyNotesWidget itself we override GetScriptDescriptors() and GetScriptReferences(). In our client side code we need an array of note objects that will be initialized using the sticky notes library. In order to properly serialize such object we have a proxy object - StickyNoteProxy - that is decorated with the following attribute:



We also define a collection of such objects in our StickyNotesWidget class and decorate them with another attribute:

public virtual Collection<StickyNoteProxy> StickyNotes


This allows us to serialize a collection of these proxy items to the client as a JavaScript array. Now all we need to do is export the visible notes and the actual utility service URL to the client, register the needed scripts and we are done with the server side of the widget and we can move to the client side. The scripts that are required for this library to run are jQuery, jQuery UI, jQuery Cookie and the library code itself. Please note that the names for the jQuery and jQuery UI libraries are jquery-1.7.1.min.js and jquery-ui-1.8.8.custom.min.js and are for Sitefinity version 4.4. In future version they might change.

On the client side we build an options object that holds all the notes initialized with their appropriate text, coordinates and sizes and we attach to four events that the sticky notes library fires - move, resize, text change and close (delete). When we close a note we don't actually delete it, but rather set its Visible to false. You can delete the note from the Backend menu Content -> Stick notes, if you wish. These events fire the hooked delegates that call our utility WCF service using the jQuery ajax() call. The different service call methods are defined in the IStickyNotesUtilityService interface.

This basically concludes this blog post. If everything goes normal you will have the following Dashboard and Backend edit screens:




And finally the link to the whole project - here.

P.S. Please note that you might want to edit StickyNotes.csproj to fix the path to you OpenAccess installation in order for the OA Enhancer to work properly. Verify the following elements in the file:

    <OpenAccessPath>$(SolutionDir)Reference Assemblies\Telerik\OpenAccess</OpenAccessPath>


Leave a comment
  1. Jens Jan 11, 2012
    Nice Idea.

    But the original http://www.jquery-sticky-notes.com/  Demo faild with IE9.

    So this is an nice example for the  HTML and Javscript Browser hell in development.

    Thanks for the artikel.
  2. Lubomir Velkov Jan 16, 2012
    You are right - the original demo site for some reason isn't working properly with IE9. However I tested the resulting Dashboard page with all major browsers and it works properly with them all. Must be the small tweaks I did to the original script. 

    Leave a comment