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:
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 ==
var dashboardAdd =
var pageControl = pageManager.CreateControl<PageControl>(dashboardAdd,
(<% = WebResource(
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" %>
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:
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: