Every company, beyond a certain size, needs a customer interaction portal for their products and services. Today, if you are a technology company delivering hardware or software, services, or even online retailing, any kind of static site is grossly inadequate and actually doesn’t scale. In the age of Internet and Social media, your tech savvy customers will expect you to present your latest and best portfolio online—no holds barred!
With proliferation of internet-enabled devices, customers have a variety of avenues to visit your site. They can use a phone with a three inch screen, a tablet with a resolution higher than a desktop monitor, and even massive QHD displays. To make things worse, if your competitor is out there with multi-device access to their product showcase, you are already being judged unfavorably by your potential customers.
Given the situation, you would like a system where your Engineering team gets you started with specs and datasheets as they become GA, while ‘Marketing’ and ‘Support’ teams, push out content and responses as fast as required. You would like a system that requires IT to provide minimal handholding and support, maybe only limited to managing the servers that the system runs on.
How do you proceed?
Web Content Management Systems
The answer lies in a solution called a Content Management System. Before we go into details, what is a Web CMS? Web Content Management Systems, provide an infrastructure for content creators to create and manage content like html, graphics, video, and documents in a way that doesn’t require calling up the IT department every second. It enables Business Users in Marketing, Sales, Support and other departments to keep your site fresh and up to date without having to fire a change request with IT. So what CMS options do we have?
The first option of course is to try out one of the several Open Source or free CMS’s available. Without actually spouting the standard open source vs. commercial argument, we can take a pragmatic approach and assume that the assurance of having a Customer Support number to call 24x7 tilts things in favor of a commercially well-baked product. This is a convenience, because it cuts down on development time and cost.
We’re going to look at one such commercial product: Telerik’s Sitefinity v6.0 . Thanks to Sumit Maitra for co-authoring this article with me.
Sitefinity v6.0 just launched with lots of bells and whistles for building multi-device front-ends to its core CMS product. Given its focus of Responsive Web Design and multi-device support, Sitefinity is well worth investigating.
Nailing Down the Required Features List in a CMS
Like any project, we have to start out with a list of must-have CMS features. Let’s nail these down first.
1. Easy to get started with quickly. It shouldn’t require dedicated hours of highly specialized consultants to come and set-up. It should be easy enough for IT to set-up without getting grumpy.
2. Easy to manage, simple administration interface for the content creation team. The target user group is technically savvy non-coders. They can create content and present it well. The system shouldn’t expect them to know anything beyond HTML.
3. Content accessible on widest platform and device combination. That means mobile: handhelds, tablets, phablets and desktop computers with insanely high resolutions should all be supported by the CMS without having to replicate content.
4. Bridges to existing content infrastructure. It’s good to have this as it reduces duplication of content maintenance efforts.
5. Multiple Templates and Easy extension points. These add extra functionality.
6. Device specific content. This is an added bonus.
7. Community Support.
As we can see, we have the usual set of contradictory requirements that is often difficult to fulfill via one product. Let’s see how Sitefinity claims to make these things easy on all fronts.
- Ease of installation – 
- Good User Interface with appealing design and Drag-n-Drop based content creation (no HTML required either) - 
- Support for Responsive Web Design – Check. Previewing content on multiple devices/emulators before deployment – 
- Sitefinity can connect to SharePoint, so you can synchronize SharePoint lists with Sitefinity libraries and allows assets to be edited and synced from both ends - 
- Sitefinity's extensibility, open API and out-of-the-box features allows you to leverage existing modules as well as accommodate specific requirements. You have multiple predefined templates and can build custom ones yourselves - 
- Support for building device-specific Apps – well cookie cutters don’t result in good final products, but leveraging Kendo UI and Apache Cordova, Sitefinity does deliver quite competent mobile apps - 
- Although we haven’t tested it ourselves, after reading existing customer testimonials, it seems Sitefinity offers multiple support options – 
Given the above promises let’s see how it delivers in real world.
Getting Started with Telerik Sitefinity
Setting up Sitefinity is a breeze as the Enterprise Edition trial is available for a hassle free download.
· Go to Sitefinity Try-Now Page
· Click on Download to get the boot strapped installer
· Run the Installer in any of the supported OSes (I chose Windows 7 Pro). The download is about 450-odd MBs and pretty much question free except for opting to go for the Visual Studio Plugin or not. Let it chug along and at the end of the installation you have a default site running on Cassini at http://localhost:[port#]/default
Nice and quick start to get your confidence soaring. Now for the content management part!
Note: If you don’t want to download it at all, you could opt for a online Sandbox trial too (that requires a sign up).
The default location mentioned above does not have any content to begin with. We need to start adding pages with content for the URL to start serving up anything.
Introducing our Imaginary Product Line ‘Minsk’
We will set this up for our revolutionary new (imaginary) product line called Minsk that has multiple products.
Starting with the Home Page
As a part of our content layout design, we will have Minsk (Home Page), the Product Page, the Forum Page and the Blog page at the same level. Each of these pages may have further sub-pages for each. With this layout in mind, let’s get started.
Creating your First Page
Once you have Sitefinity trial setup, the login password to the backend is admin/admin.
Once logged in, you are at the Dashboard page which is also referred to as the backend. You have the following view. Click on Pages to go to the Pages home.
Since there are no pages to start off with, click on the Create a Page to start the create process for your first page.
Step 1: Give our page a Name. As we can see below, the name Minsk is converted into a nice, lower cased SEO friendly URL that we have an option to change if required.
Step 2: The Create a Page section is pretty extensive and as we scroll down, we see more options. These include selecting a page template, SEO related options, SSL, caching and even an option for specifying custom code behind.
Step 3: Selecting a Template - Clicking on the Select another Template gives us a popup with the following options
Note the suggested Template for the Page. We can select one from multiple predefined templates or build a custom one ourselves and select the .master file if we have one. For this page, we will select the Left Sidebar, Content template and click on Done.
We click on the Create and go to add content to get to the next step of the Page creation
Adding Widgets to a Page
Once we create the page and navigate to the Add Content page, we are presented with the following:
There are two areas or empty regions on which we can drag from the list of available widgets on the right and drop them in these areas to setup our Page’s content.
We will drop a Navigation widget on the left hand pane and two Content Block widgets on the right hand pane.
Adding Content and Configuring Widgets
Now that we’ve placed the widgets in our Layout, each widget has configurable properties. The Content block widgets are simple to use and can contain Rich Text/HTML.
We will update the top content Widget with a page title. Then next Content block, we’ll just paste some lorem ipsum. Notice the bullet, italic and bold text implying support for Rich Text.
Next we setup the Navigation widget to be Vertical in orientation and show only Top level Pages. This setup will automatically start adding links to the Navigation section as we start adding pages to the link. However if we setup a page to be ‘under’ another page, then those links will not be shown.
Once we save the changes and Publish the page, it becomes available and now we can navigate to the Site and it comes up nice and clean as follows.
Creating a Mobile App from our Custom Module
One of the key features of Sitefinity 6.0 is its ability to bootstrap an app targeted for the iOS or Google Play store.
The scenario is that our imaginary site Minsk has multiple Products and product content is available on the web as well the devices for easy browsing. Remember the app that is generated is a bootstrap, but it does generate a lot of code and puts in place necessary infrastructure to expand on the functionality as required.
Mobile apps source their data from what’s referred to as Custom Modules in Sitefinity. So before we can build a mobile app, we actually have to create a Module, content type and then add some data to it. So we start by creating a new custom Module.
Setting up a Products Module
A Module is like custom Entity Collection that we can define in Sitefinity. To setup a new Module, we start with the Administration menu and select the Tools > Module Builder option.
Step 1: Click on the Create a module link to start a new module.
Step 2: Provide a Name and Description for the new module. As a matter of convention, Module names are plural so we call it Products and provide a one-liner description.
Step 3: Next we set-up the content type of the Module as referred to by Sitefinity. Continuing with our parlance of a Module being an Entity, Content Type is the Entity’s Type and it contains the Fields and their data-annotation properties.
We name the content type as the singular form of the Module i.e. Product. Note there is a developer name too; it’s for the backend metadata.
There is a concept of Parent Content Type that loosely resembles Inheritance.
By default one field Title is defined and its type is Short text.
Also there is an Identifier field that we can set which roughly equates to the primary key.
We click Finish to complete the basic Module Setup.
Step 4: Once the Module is setup, we have to explicitly Activate it to be able to do anything with it (including editing).
Once activated, we can use it in a new Page or Edit it to add more fields. Note that you can have one or more Content Type in a module so you can add a ProductCategory or ProductDetails content type in addition to the Product Content Type.
We won’t walk through the creation of all the fields but there are various options you get while specifying a Type for the fields. Our final Content Type is described as follows.
It has a total of 5 fields with their respective types: Title, ProductCode (text), ProductId (numeric), Image (media/image), Configuration (Rich Text). Each type has further customization options like Text has Min/Max length, Numeric has Min/Max value, decimal places, prefix text etc. Media types can be Video or Image and can further be specified as single upload or multiple upload.
Adding Products to the Product Module
To add Products to the Product Module in our Site, we go to Content menu and select the Products option. Note this option is added only after we’ve activated our Module. First time this leads us to a blank page where we click on ‘Create a product’ to create our first product.
The ‘Create a Product’ screen as we can see has all the fields that we had defined for it using the required field types. We create our first Project, Jupiter, as shown here.
The rest of the fields are standard however, the Images field bears special mention. Images for any Content Type is actually saved in an Image Library. By default there is a Default Image Library, but we’ll create a new one for ourselves. To do so, we can click on the Select Images button to bring up a Select Image pop-up from which we can invoke the Select a library dialog.
In this dialog, we click on Create a new library to get another pop-up as shown below. Here we specify the name and then travel back through the pop-ups thus selecting the ProductImages library as the default library for Products.
Now adding a file should be as simple as Select a file and Upload.
Alternately we can go to the Image library directly and upload images to it. Then while creating the Product, we can choose to select a file from an image library instead of a local file. To select an Image Library to upload images, Use the Content Menu to navigate to Images. Then select the correct library and upload files to it.
Just like Jupiter above, we go ahead and add a few more products to our Content and end up with the following Products:
The Mobile App Builder
Ideally the number of products we want to sell maybe higher or lower, but fact is that Products are core to our business. So now let’s see what it takes to put Products in our own branded App and how does Sitefinity help us with it.
We start the process off by clicking on the Mobile app builder menu item in the Administration Menu. Click on the Create your first mobile app to get started.
As we can see, we have to provide an App Name, select the ‘Based on…’ Module name. We have selected Products here. We can either make the app Read Only or with ability to do CRUD operations. Since we are targeting end users, we’ll keep it read only. We keep the default App Icon and click Continue.
In the next step we get the adjacent options. Off these download, the app as a Zip file is amply clear, however the other two items are unique and need some added explanation.
Sitefinity Box
Sitefinity Box is a mobile app available on the iOS App Store and the Google Play store for Andriod. It is essentially an App Container that can host other HTML5+JavaScript based apps as generated by the Mobile App Builder. So when you say Publish in Sitefinity Box, the app gets posted in your Sitefinity Box and you can fire up the Sitefinity Box App on the device, point it to your Sitefinity URL and log in to be able to access your App.
Modify the App in ICENIUM & Previewing Your App on Multiple Devices
Icenium is another Telerik product that has a web-based and rich client interface for building multi-device Mobile apps using HTML5+JavaScript and the Apache Cordova framework. Since the Mobile App Builder leverages the same technique, apps created by the Mobile App builder can be directly opened in Icenium. I installed the rich client version of Icenium called Graphite and decided to test the App out.
When you click on the second option, you are requested to log in using your Telerik account.
Once you click on Send to Icenium, an activity bar indicates that an upload is in progress, and on complete a green banner displays that the app was successfully uploaded to Icenium. Time to fire up the Icenium IDE.
On launch, it goes to the Dashboard and shows you that your App Minsk Products has been deployed.
Select it and click Open.
Once the Project Opens, Wait for it to complete downloading all the packages required (there is a progress indicator at the bottom right status bar of the IDE). Hit F5 to run the app in Simulator.
As we can see, the Device Simulator is pretty slick with Geo Location replication built in. By default it starts off with iPhone 4. Other options are iPhone 5, Android Phone, Android Tablet and iPad. Best part is that the simulator can be changed on the fly and the UI responds appropriately.
Once we login to our App, we start off with the Product Page. Notice if we had more content Types, each would be listed here. Navigating through the app, we see each the standard Navigation style of an iOS app in action and even the images that we associated come up correctly.
One Gotcha: To be completely honest I was not able to run the app out of the box. The Login failed with ‘invalid url’ error. The fix was trivial. I had to open up the config.js in ICENIUM and change the websiteUrl = “http://localhost:15864/” to “http://localhost:15864/Default”. I am assuming this is because the Trail is running on Cassini Web Dev Server instead of an IIS server.
Either ways, now we have investigated how Sitefinity App Builder helps us build new sites and declare custom content that can later be used to generate a new device-specific application with ready to test code.
Extension Points
Having covered the most prominent features of Sitefinity 6.0, let’s look at another feature that we had on our Good to have list. SharePoint Integration!
SharePoint is nearly a de facto intranet platform of choice. Given the scenario that internal teams might be adding important documents to SharePoint and our CMS being able to serve the same data to selected users, is indeed a powerful feature.
Thing to remember: when we say extension point we are still referring to code-free linkages between two Systems. Behind the scenes Sitefinity has capable APIs that can be leveraged via code, but one of our first requirements today was to investigate what can be done without Code. In that regard, Sitefinity’s SharePoint Connector is rather painless. Let’s see how we can connect to SharePoint and Sync Data between SharePoint and Sitefinity.
SharePoint Integration
To start with SharePoint integration, we use the Connector for SharePoint menu item in Administration menu.
Click on Add a SharePoint Site to get started.
Note: I tested against only two SharePoint platforms Office365 and SharePoint Foundation 2010. Somehow I couldn’t connect to Office365 the connector kept repeating ‘Invalid username or password’ so I am guessing the Auth implementation doesn’t support Office 365 yet. The Local installation of SharePoint Foundation worked like a champ.
The Add SharePoint Site requires the following information
· Site name – A label used to indicate the SharePoint Site to which the current Connection is being made
· URL /IP Address – URL of the SharePoint Site to which we are connecting
· Username and Password – The Authentication information. If you are using Windows Authentication on a Standalone installation, you don’t need to provide a domain name. Simply provide the user name and the password.
Once you are logged in, it takes a few seconds and navigates to the Connect Lists dialog
By default Automatically is selected. This would result in syncing of All Lists on the SharePoint site. This may or may not be desirable, so I selected Manually before I hit Continue. This take us to the Connect Lists page
This gives us an opportunity to select SharePoint Lists that we want to connect to Sitefinity Content Types. If you don’t have a Content Type or a Library in Sitefinity, simply select New Library or New ContentType (based on what you selected on SharePoint).
Next you can set-up either a two-way Synchronization or a one-way Sync. One-way can be either Sitefinity to SharePoint or vice versa. Finally you select a Sync time. You can select 5, 30, 60 minutes before going on to a Daily Schedule and a Weekly Schedule.
Hit Save and you are done.
Now you can either wait for the first Sync to happen or from the Connected Lists page pick the Synchronize now action for the desired list.
To ensure data from SharePoint has come over, navigate to the Content > Documents & Files Menu Item. Next select the Library called “Shared Documents”. Similarly access SharePoint and open the Document Library to which Sitefinity was connected. Compare to ensure both have the same content.
So sync between SharePoint and Sitefinity gives a really seamless feeling and works as promised.
Responsive UI – The other type of Mobile
Previously we saw how Sitefinity could generate Device Specific Apps based on Custom Modules. Now what if we wanted our Content to be flexible enough such that it can adapt to any screen size? The standard way of doing this is using CSS Media Queries. However, Sitefinity has a neat implementation that takes away ‘coding’ CSS queries.
Making Pages ‘Responsive’
To start off with, let’s look at the Default home page we have. If we reduce the size of the browser, the page does not respond, instead the left navigation continues to take a bulk of your space while we get a horizontal scrollbar for the rest of the content. This type of a layout would look terrible on small screen devices as we can see below.
Note: The Multi Device preview is available in Sitefinity. You can simply open a Page’s Content and from More Actions select Preview for Smartphones and Tablets option.
Defining Rules to make Sitefinity Responsive to Device Type
To resolve the above issue, we can define rules for Sitefinity such that it transforms the page content at runtime to select the best possible view for a given device. Let us see how we can do that.
From the Dashboard, select Design and the Responsive & Mobile design. On the empty page, click on Create a group of rule to create your first set of rules.
Defining Rules – Setting target devices
The Create Rules page can be split up into Setting target devices and defining the transformations. Let’s look at the options for setting target devices.
- First up, we set a name for the group of rules. We can call it Phones or Smartphones.
- Then we select the type of devices that we are targeting. Sitefinity provides us with a Smartphones template that has a pre-defined set of rules for a bunch of devices. Each rule is nothing but a CSS media query condition.
- Third we select what kind of behavior should we apply once the incoming request satisfies one of the rules defined above? We have two options, either Transform the layout (How we’ll see in a bit) or re-direct to a separate web-page that’s specifically designed to cater to the category as defined by the rules.
- Finally we can also specify third party CSS that should be applied during the transformation. We can potentially inject jQuery UI styles here or BootStrap styles.
- Now that we’ve defined the rules and selected the behavior, we have to actually define the transformation
- In the above grid, we see, some of the transformations defined, like 2 columns get transformed into 2 rows and so forth. We select the default for each type and hit done. Our Transformation Rule is now done.
Next we repeat the same procedure above to setup the Rules for Tablets.
Linking Rules to UI Content Page
- Go back to the Pages and select the Minsk item to edit content
- In the content screen, select the Layout button on the top right of the edit screen.
- Now scroll right to the bottom and under Responsive Layout click on the Settings button.
- In the pop-up, select All groups of rules are applied.
- Say done and save draft.
- Select the Preview for Smartphones & Tablets option. This time the views will be different as we can see below. They adjust nicely and automatically. Sitefinity did the work of setting up the Media Query rules based on the rule groups we defined via the wizard.
Wrapping it up
With that, we have covered three of the most exciting new features of Sitefinity 6.0 and applied it to a near real life scenario of an online Products retailer and how they can approach building device-agnostic Responsive UI to device-specific Mobile Apps.
We didn’t see how we could possibly modify the default template and create a more colorful and engaging template. We save it for another day as that involves little bit of tweaking and tuning in Visual Studio.
Sitefinity as a platform is huge and we have barely scraped the surface. We didn’t get a chance to look at all the other built in content types, however it’s noteworthy that we can create Blogs, Forums, Image Galleries and a lot more, straight out of the box, no code required.
In conclusion, Sitefinity 6.0 CMS is a nifty commercial solution that not only fulfills common CMS needs, but also provides a major leg up by providing the infrastructure and creating a bootstrap for platform/device-specific Apps. So looking back at the goals that we started with, Sitefinity seems to have achieved them all, elegantly.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn