How to implement a News Carousel Using DotNetMushroom RAD and JQuery

By Ruben Gatt

May 2010

In this tutorial we demonstrate how to create a News Carousel using the DotNetMushroom RAD Module, JQuery and the JCarousel plug-in.

This article is a continuation of the How to Implement Paging using DotNetMushroom RAD. We will be adding some new forms into the News Application using the DotNetMushroom RAD Module. Using JQuery and the JCarousel plug-in we will implement two News Carousel designs.

Introduction

Before attempting this tutorial it is recommended to follow the preceding tutorials regarding the DotNetMushroom RAD Module if you are not already familiar with the features and functionality of the module. This article continues from the previous articles so we recommend you install or create the application by following the previous tutorials.

Unpackaging the Application

To begin this tutorial you will need to download and setup the News Carousel application by following these instructions.

1. Download the code from the bottom of this page
2. Unpackage the News Carousel application
3. Navigate to the “News_Carousel” form
4. While viewing the form properties scroll down and press “Save” to save the form properties in order for the css to work properly
5. Go to Header Template
6. Change the .css and .js file paths Portal Number and the Application Number to match your portal and DotNetMushroom application
7. Press “Save” to save the Header Template

Creating Some News Items

After creating or installing the Multi-Language News Application with paging you should start by adding a minimum of 8 news items (preferably 4 in English Language and 4 in Italian or any other language) so that when the JQuery functionality is implemented the results will be visible.

Items should now look similar to the screenshots below.

Creating the News Detail Form

We will create some new forms using the DotNetMushroom RAD Module in order to implement a News Carousel using DNM RAD and JQuery.

Start by creating a new form and name it “News_Detail”. This form will contain a detailed view of the news item so that in the carousel a summary of the news item will be displayed and if the user wants to view more details about the news items they would need to click on the article’s link.

While creating the form, select the Data Source of the form to load the data from tb_DNM_2_News table so that when the form is filtered, the form will know which data needs to be loaded. Also enter the name of the css file – news.css – this is found in the CSS folder of the DotNetMushroom application which will be edited later on to style the new forms.


Before we continue, we will need to create some new fields in the News table, these new fields will be used to provide more information about the news item and to create a better user layout.

Go into the Tables section of the Application and click on the News table.
Add three new fields which include:

LargeImage


SmallImage


NewsTitle


After creating all of the new fields in the News table go back to the News_Detail form.

Now click on the “Template” tab and make sure that the “Current Template” selected is the “Header Template.”

Click on “Generate View from Template” to generate the html code and the DNM controls.


Now modify the code to match the following code:


Press the Save button to save the template.

The last thing we need to do in order for the News_Detail form to be completed is to modify the Date Control properties.

Click on the “Properties Tab” and then click on the “Date” control.

Modify the control properties as shown in the two screenshots below in order to display the date in the correct format.



Finally press the Save button to save the control properties.

Creating the News Carousel Form - Part 1

Next we will need to create a new form that will display the news carousel after we implement it using JQuery and the JCarousel plugin.

Start by creating a new form using the DotNetMushroom RAD Module. The form has been named as “News_Carousel”.

Make sure to tick the “View as Textbox” checkbox as this will help to keep control over the code we enter as the FCK Editor tends to close some tags automatically and therefore the code will not work as expected.

Form Data

Select the Data Source from the dropdown list to be “tb_DNM_2_News”


Form Data Display

Tick the “Multiple Rows” checkbox

Set “Items per Page” to 5


Form Design

Set the “CSS FileName” to “vertical_carousel.css”


Form Multi Language

Tick “Multi Language” checkbox

Set “Multi Language Field” to “Language”

Tick “Use Resource Files” checkbox

Set “Resource File Specification” to “NewsView”


After setting the required properties press the Save button and make sure that all the properties have been correctly saved and are properly set.

Next click on the “Template” tab and select the Body Template.

Click on “Generate View from Template” to generate the html code and the DNM RAD controls from the template. Now modify the code to match the code below:


In the above code you should note that some extra controls were created. A literal control “ltl_newsPk” was created in the id of the <li> item; this will be useful when we create the JQuery code in order to populate the data in another div which will be created further on.

Two additional controls that were created are the Edit and Delete buttons which will be used when you wish to edit an article or delete it from the list.

Also notice that the “NewsText” label control is enclosed in a div which has the class “dnm_NotVisible.” This means that the text will not visible to the user as the css will not display it in the browser but will still be available to be copied over to another div.

The next step is to click on the “Header Template.” Since the body template will be repeated several times only the <li> tag and its content has been put in the “Body Template” so now we will need to add some code in the Header and Footer Templates of the form.

In order to create a News Carousel with JQuery you need to download the [JCarousel plug-in] LINK [http://sorgalla.com/projects/jcarousel/]. In previous versions of DotNetNuke, i.e. DNN4 and earlier, you also need to download the JQuery framework in order to implement any JQuery functions, but from DNN5 onwards, the JQuery framework has been integrated into the CMS so that we no longer need to link to the JQuery file.

After downloading the JCarousel plug-in extract the contents of the zip file to your computer. Now we need to copy some files from the extracted zip file.

Create a folder named “js” in the CSS folder of the application in order to add the required files from the JCarousel plug-in.


Then in the “js” folder add another folder named “carousel.”


In the newly created “carousel” folder some of the files from the JCarousel plug-in have been copied.

The tango folder can be found in the skins folder of the JCarousel plug-in.

The ”jquery.jcarousel.js” and the “jquery.jcarousel.css” files can be found in the lib folder of the JCarousel plug-in.



After the structure of the folders has been set-up and the files have been copied into the correct folders you can copy the code below into the header template.
You should notice that the “href” path needs to be modified because the portal number and the application number may be different.

The paths should be as follows:

Header Template code:
Remember to press the Save button to save the Header template code.

You should notice that in the code above there are some DNM Controls. These controls have been included and will display the first item of the list which will then be replaced with other items content using JQuery.

Finally, click on the “Footer Template.”
The “Footer Template” will contain the JavaScript control of the form and also an “Add New” button for adding news items.

The code is as follows:

Press the Save button to save the template and click on the Properties tab.

Creating the News Carousel Form – Part 2
After creating the html of the News_Carousel form we now need to set the properties of the controls and also enter the JQuery code to complete this form.

Start by navigating to the Properties Tab of the News_Carousel form.

1. Click on the “LargeImage” control to view its properties and set the “Image Height” to 40 and delete the content of the “Image Width” field. Finally, press the Save button to save the modified properties.


2. Next we want to modify the “NewsTitle” control. Set the “CSS Class” to “title” and press the Save button.


3. Click on the “Date” control and modify the control properties as shown in the screenshot below.


4. Click on the Edit button control and set the properties as shown in the screenshot below. Plus also tick “Visible to Edit Rights” so that the unauthorized users will not be able to edit the news items.


Now click on “Click here to Add Navigator” so that we link the button. Set the “Navigation Tab” to the page where the module is located, choose an existing module from the page, set the Key to
“Change Form” and set the Form to “NewsEdit” and finally press the “Add” button


Next we need to add a filter on the form to load the data of the item we want to edit.

First select the “Module” to be equal to the previous navigator item that has been added, change the “Key” to Filter On Form and enter pk={pk} in the “Parameter” field.

Press the “Add” button and make sure that the filter has been added.

Finally press the “Done” button.


5. Next click on the “btn_Delete” control and modify the control properties to look like the properties in the screenshot below.

Remember to tick the “Visible to Edit Rights” checkbox.


6. Click on the “NewsText” control and enter "text" in the “CSS Class” field.


7. Click on the “ltl_newsPk” control and set the “Data Source” to “pk.”


8. Next click on the “js_Script” to view the control properties.

In the “Script Text” property we will enter the JQuery in order to call the JCarousel function and also other functions to copy and paste the text from a div into another div.

The code is as follows:

9. Finally click on the “btn_AddNew” control to view its properties. Set the properties as shown below and Press the Save button.

Remember to tick the “Visible to Edit Rights” checkbox.


The next step is to set the control Navigator. Click on the “Click here to Edit Navigator”.

Set the “Navigation Tab” to the page where the module is found.

Set the “Module” to an existing module in the page.

Set the “Key” to “Change Form (Add New).”

Set the Form to “NewsEdit.”

Press the “Add” button and make sure that the data was saved correctly. Finally click on the “Done” button to finish.

Making the News Carousel Visible

After we modified all the properties of the form and the data has been saved, we can now view the Form in the page.

Go to the page were the module has been created and navigate to the Module settings.

Scroll down to the DNM settings and change the “Form” setting to the newly created form, in this case “News_Carousel,” and click on the Update button to update the form settings.

Now the form should look like the screenshot below.


If the form does not look like the above screenshot check that the properties of the controls are correct, check that the templates are correct and that the paths to the JavaScript and CSS files are being loaded.

Modify the News Items - Part 1

You may notice that currently only the date is visible in the news items of the right panel and only the text is visible in the news item of the left panel. We now need to modify the news items and add more details.

But first we need to modify the “NewsEdit” form in order to display the fields that have been added earlier in this tutorial.

Modify the News Edit Form

The code in the “Body Template” of the “NewsEdit” form has been modified to add the news title, large image and the small image fields that were added to the News table.

This is the code:

After modifying the Template click on the “Save” button.

Now click on the “Properties Tab” as we need to modify the properties of Large_Image and Small_Image in order for the “Image Upload” control to work, and we also need to set the height of the NewsTitle control.

Click on the “Large_Image” control. Tick the “Edit/Upload Image Control” and set the “Data Source” to “LargeImage” and press the “Save” button to save the changes made.


Now click on the “Small_Image” control to view its properties. Tick the “Edit/Upload Image Control” and set the “Data Source” to “SmallImage” and finally press the “Save” button to save the control properties.

Click on the “NewsTile” control, set the “MemoField Height” to 150 and press the “Save” button.

Modify the News Items - Part 2

After the “NewsEdit” form has been modified we can now modify the news items. The news item title, the large image and the small image have been set for each news item.


After modifying all the news items the News Carousel application will look similar to the screenshot below.



The news items will scroll automatically but you can also press the arrow buttons to scroll. By using JQuery we also added a function so that when an item is clicked it is shown in a more detailed view on the left panel.

Finally the last step we need to implement is the navigation of the News title so that when the user clicks the article’s title from the right pane he is redirected to the “News_Detail” form.

Navigate to the “News_Carousel” form and click on the “NewsText” control to view its properties.

Now click on “Click here to Add Navigator.”

Select the page of the module in the “Navigation Tab.”

Set “Module” to the module in the chosen page.

Set the “Key” to “Change Form.”

Set the Form to “News_Detail” and click the “Add” button.


Now add a filter on the form as follows.

Set the “Module” to be exactly the same as the previously chosen module. In this case “DNM News.”

Set the “Key” to “Filter On Form.”

Enter pk={pk} in the “Parameter” field.

Finally press the “Add” button and then the “Done” button to complete and close the popup.


Now if the user clicks on the news item title from the right panel it will load the item detailed view as shown below.


Finally the carousel is complete.

If you have any problems working with the DNM RAD module you can visit the DotNetMushroom Forums.

Comments