InterDash Blogs

Sharing experience

Working with KooBoo – Part 1

This series of blog posts will cover implementation of the Application Gallery used on  I share the experience to help others that are using KooBoo, or looking to use KooBoo CMS.

The Problem

I need an application gallery for the six applications I have in the Windows Store.  I’m looking for a content slider that displays images, text, and links and rotates through a list unless the user interact with the control.  A hover should select a frame, and a click should jump to the application on the Windows Store.

The Solution

KooBoo makes implementing javascript controls simple. The control I selected was already in use in the template I am using and I found it was well documented.

In this post I will implement the structure and establish the ‘Main’ section. In my next post I will complete the ‘Middle’ section, flush out all issues, and publish.

KooBoo CMS Structure

If you use MVC4 and like MVM structure KooBoo is a great choice for your CMS. The Admin interface is easy to understand if you take the right approach. I’ll walk through the steps I went through to create the Application Gallery.


Create a new Model (ContentType) called Application.

Create a Datastore for the Applications

Add some content to the Applications folder


It seems most templates I’ve looked at have the View broken into sections with consistent names. The section of interest in this effort is Main.

Create a view in the Main folder called Main.AppGallery.

Click on + to add a DataRule

Displaying the Data

KooBoo supports inclusion of javascript controls. To verify a control exists, or install a control for use navigate to Development->Files->js on the site of interest. For this effort verify that contentslider.js and jquery.lightbox-0.5.js exist. If not, then refer to documentation at and add them.


With the Model in place with data, and the View in place to provide data, what remains is the ViewModel.

Javascript control

Add the script for including any javascript controls at the top.

<script type=”text/javascript” src=”@Url.FrontUrl().FileUrl(“js/contentslider.js”)”></script>

  Loop through the View and create the data display.



<div id=”mid_applicationWindow”><span></span>

    <div id=”slider1″ class=”applicationWindow”>

@foreach (var item in ViewBag.ActiveApplications){

<div class=”contentdiv”>


<img src=”@item.ImageSmall” alt=”@item.Title” class=”floatLeft” />


<br clear=”all” />





<div id=”paginate-slider1″ class=”pagination”>


Add the script to initialize the contentslider control.


<script type=”text/javascript”>



id: “slider1”, //id of main slider DIV

contentsource: [“inline”, “”], //Valid values: [“inline”, “”] or [“ajax”, “path_to_file”]

toc: “#increment”, //Valid values: “#increment”, “markup”, [“label1”, “label2”, etc]

nextprev: [“”, “”], //labels for “prev” and “next” links. Set to “” to hide.

revealtype: “click”, //Behavior of pagination links to reveal the slides: “click” or “mouseover”

enablefade: [true, 0.4], //[true/false, fadedegree]

autorotate: [true, 2000], //[true/false, pausetime]

onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)






With everything in place we are ready to create the Page for displaying the information. This is not a ‘Home’ page, Create and select ‘Main’.

Hover over the Main section to expose the menu. Click on + to add the View.

You should see the ‘Place Holder’ has been replaced with

Save and preview.


Leave a Reply

Your email address will not be published. Required fields are marked *

InterDash Blogs © 2014 Frontier Theme