Deliver superior customer experiences with an AI-driven platform for creating and deploying cognitive chatbots
Deliver Awesome UI with the most complete toolboxes for .NET, Web and Mobile development
Automate UI, load and performance testing for web, desktop and mobile
A complete cloud platform for an app or your entire digital business
Detect and predict anomalies by automating machine learning to achieve higher asset uptime and maximized yield
Automate decision processes with a no-code business rules engine
Optimize data integration with high-performance connectivity
Connect to any cloud or on-premises data source using a standard interface
Build engaging multi-channel web and digital experiences with intuitive web content management
Personalize and optimize the customer experience across digital touchpoints
Build, protect and deploy apps across any platform and mobile device
The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
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:
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.