Sharepoint 2003: Developing Information Kiosk in 5 hours

English

One of common question from client when we offer Sharepoint’s is “Can you make nice impression on the design?”. We can use Macaw Sharepoint skinner to customize the design. Macaw uses HttpModule and sets of regex match and replace technique. However, I still found it difficult to produce liquid design using that tool.
Let’s assume the client want to have information kiosk to be delivered in very short time. If we wanna use Macaw then we must create skinning template that is not very intuitive to do – at least for me. So, what is the alternative?
Here I’ll show a difference approach, thus we can deliver the solution quicker – using out-of-the-box capabilities in Sharepoint and less coding (only javascript and some css).

Ok, let’s start with the design from Graphic Designer – below

Assignment:

1. The above image shows main theme of the kiosk
2. Information kiosk will display list of company and detail information for each company – using consistence design with the main page
3. All pages will be shown in 800×600 screen in a kiosk.
4. The administrative area will use standard Sharepoint’s UI.
5. Estimated Time for full Appearance (ETA) is 5.00 hours

Planning (est. 1.00 hours, ETA 5.00 hours)

1. We will use graphic designer tools (Macromedia, Photoshop etc) to help us with the layout.
2. Sharepoint Designer / Frontpage 2003 will be use to apply new layout to the default.aspx.
3. We also create two or more new pages template for list and detail page.
4. We will create custom list for the company list.
5. Javascript , CSS and xslt queries to help us more on some functions – such as full text search.

Slicing and Applying Design Template (est. 1.30 hours, ETA 4.00 hours)

Since we have only very limited time, then help from graphic designer tools is very importance. Open the design in Macromedia / Photoshop, and make slices to the design. There are two part that we need to slice,

1. Image that involved in transition, such as button / image button which change on mouse over action
2. Image that represents web part place holder

After all slices are in place then we are ready to export it to HTML layouts – along with required images. Export it and open the new html page in Sharepoint Designer / Frontpage 2003. Start applying the layouts by opening default.aspx in Frontpage 2003.

• Removes existing web part from the page
• Moves form tag to after end of main table
• Copy the new layouts table inside the form, and don’t forget to import all required images too
• Hide main table by adding style=”display:none” as css attribute to the table

And using similar scenario, you can continue to apply the layouts design for the other page too – in this case (detail information and list).

Full Text Search and List (est 1.00 hours , ETA 2.30 hours)

Searching can be seen as ,

• using search “engine” in WSS / Sharepoint, but with a little drawback. All results will be displayed in standard Sharepoint’s UI or we must develop custom page so we can render it according to the desired layout.
• filtering list column using search criteria. This is our preferred approach, since the result can be data view which can be customized using xslt for desired appearance

Following the last reason, we need to create custom list for company information – name it “Information” list. The “Information” list will store any information about the company – including the description; each in separate field. Remember, that we will use filtering as our full text search, so we also need description row in the list!

In the templated list page (created in Slicing & Applying Design Template) , put two web parts,

• Content Editor Web Part, to hold the script for searching
• List view web part, to show “Information” list

Open the page in Frontpage 2003 and convert List view web part to XSLT dataview (** due to known bugs in Sharepoint Designer, please don’t convert to XSLT using it, at least beta 2 will mess up the dataview **)

Edit the new XSLT dataview so we can use URL paramater to filter the view. In this sample, I’ll use “Search” as URL paramater name for the searching function.

Then modify the filtering rules so it works just like full text search.

The last modification in this page is to edit item link, so it open Detail information page instead of edit page. In this case I add new xsl variable “detailUrl” and modify default link tag for item. $detailUrl contains page location for Detail information page.

In the content editor web part create drop-down list, text box and submit button. Also make a javascript to construct URL parameter to filter the list.

Detail Information Page (est 1.00 hours , ETA 1.30 hours)

Using prepared templated detail information page, we’ll put List view web part for “Information” list. Only single item description will be shown at a time – and we use XSLT to format the view. Compose the fields from “Information” list in a table or choose whatever you need to present in the detail page.
URL parameter filtering technique also applied here, in order to select item detail based on its ID.

 

Review and Package (est 0.30 hours, ETA 0.30 hours)

At last you can review the new kiosk and package it into fwp file – ready to deliver to the client. Don’t forget to give some instructional direction to update the data in the list. Ups, its about the time 5.00 hours, developing information kiosk using Sharepoint out of the box functionalities, plus javascript, xsl and CSS.

This only to open our mind about one of Sharepoint’s concept – “laveraging web application for business users”.

About cakriwut

Riwut Libinuko, experienced Architect. Currently working with Credit Agricole CIB, responsible for SharePoint platform in Asia Pasific. . Certification: SharePoint 2013, SharePoint 2010, SharePoint 2007, ITiL v3

‹ MOSS 2007: Rounded Web Part , a Nifty Corners Cube hacks

WSS 3.0 : New Extensions for Visual Studio 2005 ›

Posted in Microsoft Sharepoint, Tips and Tricks