On Focus: Module Builder or How to Manage Ad Banners in Sitefinity

There is no doubt that using different marketing tools has become a must-have for every website these days. Creating sliding content, for instance, is one proven way to attract users’ attention and win more of their time. And time is money, so ideally you would convert that time into revenues for some organization and the marketing people in there will be happy. Yes, it definitely sounds important, so let’s see how we can interpret that from a Sitefinity’s standpoint.

For front-end and developers is a fairly easy and straightforward task to create a sliding content for the pages. In the context of ASP.NET development, you can use different technologies like jQuery based sliders, ASP.NET controls like the RadRotator, Silverlight based rotators and Flash based rotators.  There are so many options and they can all work with Sitefinity because of the way it was designed – as a native ASP.NET web application. In other words, everything possible with ASP.NET is possible with Sitefinity.

While building a rotator is a relatively trivial task for technical people, the real questions is how to make this easy to maintain for the business users. Because building hardcoded things is not the best practice and will work only if we create something that will remain unchanged and that is never the case.  The world is dynamic and users’ tastes change, and ideally the marketing people from any organization would appreciate the ability to flexibly change the sliding content and win more time, remember?

Thus, the goal of this blog post is to walk you through one of the alternative possibilities of creating banners with Sitefinity. The focus here will be more of the approach over the technology so to see a way how to leverage Sitefinity in a way that will leave more power in the hands of the business users.  Fortunately, Sitefinity was designed as a flexible platform to allow technical folks to deliver easy-to-use solutions for the business users and this is going to be an easy task.

Ok let’s start then. Of course, first we need to select  a fancy looking jQuery plugin. With so many of those available in the web, it’s not a difficult task. I will pick an open source solution called JSliderNews jQuery Plugin (it’s available on the LandOfCoder and you can take a look at that slick slider here).

A closer look at the demo pages, quickly gives the answer on what will be needed in terms of references, html mark-up and JavaScript code to start the fire. All right, let’s take a look at those then:

• CSS resources- a single CSS file called style6.css
• JavaScript references – jQuery, jQuery Easing and the plug in file called script.js
• Markup – A wrapper div element with an id “jslidernews3” on which we will call the lofJSidernews JavaScript function(). Of course the div element should have other properties, but you will be able to see then in the demo or the template

The next step is to see how this custom structure can be translated into Sitefinity content exposed to the marketing people. Yes, if you have thought for the Module Builder, that is the right answer. Every time when there is a a custom units of structured content, the module builder offers the perfect solution as it will not only create the infrastructure in terms if Database content. It will also generate the rich UI for editors and the rich API for developers. It will also create the widgets and this will further facilitate the plan we have taken.

Content:

For the purpose of this sample, I have exposed for the editors almost every element of the banner, like the image, the heading,  the small heading, the link, the link text and the summary. Depending on your goals, you may also decide to add more elements to structure – gallery of images, documents, full article… there is no limit and only your user case shall define what is needed and what’s not. In anyways, it’s good to know that you can always change the structure of the module should you need to.

Presentation:

By default, the module builder generates 2 templates – one for list view of the elements and one for the detailed view for each individual item. I have decided to provide a 3rd one, that displays a list of elements but enhances it with the jQuery rotator. The template adds all the needed references, defines the mark-up structure and calls the JavaScript function to trigger the slider. For the sake of simplicity, I have added the references directly from the website of the JSliderNews, but should you need to recreate it, it is a wise idea to locally copy the files from the publisher. Here are the sample files and here is the instruction video:

Surely, there are some things which can be improved. After all, that is just a sample. Probably, you can add a tracking code to provide marketers with a good analytics on what has been clicked, how many times and by who and that is absolutely possible with Sitefinity. Maybe in the future, I may focus on a similar example. So here goes the moral of the story.

As a front-end designer of that tool, it’s up on you to define what will be left to the “non-technical” folks for editing.  So the module builder is helpful also for front end developers as now they can focus entirely on the front–end tasks as they can leverage what has already been developed for Sitefinity.