Using Dotnetnuke FNL Module to create random quotes

Few days ago, I was working on a project that was a website for a training center. Website required to have random quotes. Because I managed to make it different, I thought it’s good to share it. When it comes to websites, my default option is Dotnetnuke. I used to work with DNN since version 3, so it’s quite easy for me to do things with it. Sometimes I find people(developers) having a little doubt about Dnn, but as I noticed, for most of them it’s because they don’t know how to use or they had misconceptions about DNN. Once I had the chance to present to them, I saw they change their minds about it :).

There are a lot of free DNN modules developed by core members or other developers, you can find most of them on Codeplex using Dotnetnuke key in search criteria, or you can go to Dotetnuke Forge. If none of them helps what you are looking for, it’s quite easy to develop one of your own.  You can start by using Christoc’s module template.

I think the last option is developing a new module, because even if your need is special, you should check if there is a free module that provides the funcionality or can be configured to achieve your needs. At least you can go to Dotnetnuke Store and buy one :). In this blog post, I’ll try to give you a ‘simple view’ how you can use Form and List Module to create random quotes. Our scenario is to publish guests reviews in our site as random quotes. The fields that we should defined are: Name (name of guest), Title (ie. student, trainer), Photo (guest’s photo) and Review. So it’s going to be something like this:

OK, here we go,  let’s say we’ve already downloaded and installed latest version of DNN FNL Module(we can also use another version), add an instance of FNL module to a page and go to Form and List Configuration found under Action Menu. We start by clicking Add New Column button and for each field we follow instruction below and click Save button.

Title
Type: Text
Title: Title
Help Text: Enter title.
Required: Checked

Name
Type: Text
Title: Name
Help Text: Enter guest name.
Required: Checked

Photo
Type: Image
Title: Photo
Help Text: Upload guest’s photo
Required: Checked

Review
Type: Rich Text (Html)
Title: Review
Help Text: Enter guest review.
Required: Checked

Now that fields are defined, we are ready to go to Rendering Method and select XSL option, after that, under XSL Script click Generate button and new screen is going to be shown. Because we want to list all reviews in unordered list element, let’s select Undordered List option at List Type. If everything was OK, we should see in editor that module has generated for us following html:

<li class=”dnnGridItem”>[UDT:EditLink];
[Name];
[Title];
[Photo];
[Review];</li>

Let’s design it and make it looks better:

<li>[Photo] <h3>[Name]</h3>
<small>[Title]</small>
<p>[Review]</p></li>

Let’s click Generate from HTML Template button, save the XSLT file and Save Configuration and Return. Now, if we click Add New Record, we will see the entry form.

For our demo purpose, we just put some reviews, 3-4 entries are enough.

In order to style our unordered list elements, we can open our XSL file we saved earlier. The default path is \Portals\XslStyleSheets. We can simply use a text editor to open the file, we are going to use VS2010 to open it. We should find unordered list opening tag <ul> that is under currentData variable and add id=”randomquote”, now it should be <ul id=”randomquote”>. We will use ID selector to style and manipulate with css and js respectively. Save the file and go to Stylesheet Editor that is under Admin -> Site Settings. Put the following code in the editor and click Save Style Sheet.

#randomquote{ border:1px solid #F2F2F0;
background-image: linear-gradient(right , rgb(222,222,220) 0%, rgb(255,255,255) 61%);
background-image: -o-linear-gradient(right , rgb(222,222,220) 0%, rgb(255,255,255) 61%);
background-image: -moz-linear-gradient(right , rgb(222,222,220) 0%, rgb(255,255,255) 61%);
background-image: -webkit-linear-gradient(right , rgb(222,222,220) 0%, rgb(255,255,255) 61%);
background-image: -ms-linear-gradient(right , rgb(222,222,220) 0%, rgb(255,255,255) 61%);
margin:0 0 16px 0;padding: 20px 0;}
#randomquote li {display:none;}
#randomquote li img {float:left;margin:0 20px;}
#randomquote li h3 {color:#820A32;margin:0;}
#randomquote li small {margin-bottom:5px;}
#randomquote li p {margin:0 20px;}

As we can notice, we set display:none to list items, we will talk about it later.

Now we have styled our unorederd list items, we can start adding javascript to manipulate it. After googling for a jQuery plugin that generates random number for a range of elements, I found this article very helpful http://www.yelotofu.com/2008/08/jquery-shuffle-plugin/. Basically, it shuffles list items randomly and it’s perfectly OK for our scenario. We should download the plugin mentioned in the article (here is the link http://yelotofu.com/labs/jquery/snippets/shuffle/jquery.shuffle.js) and put in portal root folder \Portals\, add the reference of js file in Page Header Tags that is under Page Settings and call shuffle function.

Shuffle function is going to randomize list items, we styled early list items to display:none in order to make them invisible until shuffle will be finished, and now we can use CSS and jQuery power to select first list item ul#randomquote li:first-child and make it visible $(‘ul#randomquote li:first-child’).css(“display”, “list-item”);

Now, if you refresh the page you will see how list items are going to be shown randomly. If there will be too many reviews, you can go to Form and List Configuration and set to 10 Records Returned and you will see randomly only 10 top reviews.

I hope you enjoy reading this post and no doubt, it’s not perfectly written and described, you can help me with your comments, suggestions and shares.

Here you can find a short screen cast how it worked for me 🙂

http://screencast.com/t/enBtsfTjPv

Advertisements

3 thoughts on “Using Dotnetnuke FNL Module to create random quotes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s