Using XSL to display XML data into a human-readable format

Abstract

When we open our XML document on browser, we will notice only the elements of that XML document. If we want to display our XML data in a table like format then we need to know about XSL.

HTML

HTML contains the predefined tags like <TABLE>, <H1>, etc. This will be well understood by the browser. And the browser also knows how to display these tags.

XML & XSL

The most recent version of XSLT is XSLT 2.0.

XML does not use any predefined tags i.e., we can use any tag-name we like. And these names are not well understood. The browser doesn’t know how to display these tags. Now the XSL plays its role, it stands for “Extensible Stylesheet Language”, which describes how the XML document should be displayed on the browser.Have a look at the following XML Document, which describes about Employees. It contains reference to the XSL file (Employee.xsl).

Employee.xml:

Now we need to create a XSL file, by name “Employee.xsl”.

Employee.xsl:

In the above code, xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. The is used to build a template, and match attribute is used to associate a template with an XML element. Use “/” to associate the whole XML document.

which associates the whole XML document to the template. The used to select every XML element of a specified node-set: in our example “Employees/Employee”. The used to extract the value of an XML element. It is a simple XSL style sheet, there are other elements of XSL (if, choose, sort…), which are also very useful for transformation.Now the browser will nicely transform the XML document to XHTML.Open the “Employee.xml” in your browser.

XML data will be displayed in a table format. XSL also used to transform XML documents into some other formats.

Silverlight Slide Show in SharePoint Page

It is very easy to display Silverlight powered slide show in SharePoint using Slide.Show. Vertigo Software has released this full-featured interactive open source Silverlight 1.0 control for publishing photo slides on the web.

Download Slide.Show from Codeplex.

I have used this Slide.Show to display silverlight powered slide show in my SharePoint page.




I have created a basic html page to display this Silverlight powered slide show and used a “Page Viewer WebPart” to display the slide show in my home page. You can refer this Quick Start Guide for configuration.

Created a folder in my document library to store HTML and other files and also created two xml files Configuration.xml and Data.xml in the same location.



Use Data.xml to create albums and slides. I have used an Image Library to display these images. You can see buttons for displaying the Album list and also to display the slides in full screen.



Slide.Show supports 300 configurable options. Now it is very easy to play with Silverlight with the use of Slide.Show.

Creating Wiki Site in SharePoint

A Wiki site is a collection of web pages, which allows users to easily add or edit content on the web. Wiki site contains collaboration of works from different authors. It is very easy and straightforward to create a Wiki site in SharePoint.

Creating Wiki Site

Create a site in SharePoint using the “Wiki Site” template from the Collaboration tab. To do this, go to Site Actions --> Create --> Sites and Workspaces. Fill Title, Description, and URL name input boxes and select the “Wiki Site” template.





Once the Create button is clicked, it will create a Wiki site with default pages in it. The Home page will contains the welcome message and some information about the Wiki and also it contains details about how Wiki used in business environment.





A new “Wiki pages” library will be created when you create a Wiki site. It also contains one more page by name “How to use this wiki site”. This page has the detailed description about the creation and management of Wiki pages.





The Wiki site provides WYSWYG (what you see is what you get) editing. Use the Edit button at the top of the page to edit the page. You will get the entire “Rich Text box” editing features to format the text.

To link to another page in this Wiki site, enclose the name of the site in double brackets on the edit form.

Ex: [[MOSS]] --> this will link to the page moss page.

Use the pipe “” symbol after the page name to display the link in some other text than the page name.

Ex: [[SPDesignerSharepoint Designer]]





Now, click the Edit button at the top of the Home page.






I have given links to two pages namely “MOSS” and “SPDesigner”, and note I’ve used “” to display the page SPDesigner as “Sharepoint Designer”. After adding the above text, click “OK” button, this will bring the below page.





The two sites “MOSS” and “Sharepoint Designer” are underlined, which shows these pages are not exist. Click on the MOSS link, this will create a new Wiki page by name “MOSS” in edit mode.





Add some more information to this “MOSS” page. I have added one more link in this page to go back to home page. Create “SPDesigner” page as we created “MOSS” page.

There are some other options “History” and “Incoming Links” available at the top of the page.


History

Use History to restore a previous version of a page. Each page will contains version history. If you need to restore to previous version, click History at the top of the page.





As shown in the above image, select the version which you want to restore and click “Restore this version” in the top toolbar.

Incoming Links

This will display the page which links to the current page.





These are the pages “MOSS” and “SPDesigner” has the links to the “Home” page.

Displaying charts in SharePoint using Excel Services

A chart displays data in a visually appealing way. By using charts, it is very easy to understand and compare data. We can use Office Excel 2007 for creating charts and Excel Services of MOSS to display it in SharePoint.


Excel Services

Excel Services is part of MOSS 2007. Excel Services has a server-side engine for loading Excel spreadsheets, calculating formulas and rendering their output as wide-reach HTML targeting the browser.

Open the Central Admin--> Operations --> Services on Server then Start the Excel Calculation Service on the server if it is stopped.


Excel Web Access

Excel Web Access is a webpart that displays data and charts from excel workbook. It has similar look like office excel workbook.


Creating a Document Library

Create a Document Library in your MOSS Site. Go to Site Actions --> Create --> Document Library to create document library in your SharePoint Site. This document library will be useful to publish our Excel spread sheets.


Trusted File Location

Excel Services opens Excel workbooks that are stored in trusted file locations only. Trusted File location is a SharePoint Document Library, a UNC path, or an HTTP site that is configured as trusted repository for excel workbooks.

Add this newly created excel document library as a trusted file location for storing excel workbooks. To do this, open the Shared Services Administration Site then click the “Trusted File Locations” link from Excel Services Settings. Now, click “Add Trusted File Location” and add our document library as a trusted location.






Creating Charts Using Office Excel 2007

We can use Office Excel 2007 for creating different kinds of charts like Column, Pie, Bar, Area, Scatter etc. See the following image which shows the different chart types available with Office Excel 2007.





In this sample, I’m going to create a Column Chart by using following sample data.






To create Column Chart select the data and Click on Insert-->Column (Chart) and select your desired chart. See the following screen, I’ve selected Clustered cylinder.





The below chart will be created once the chart type (Clustered Cylinder) is selected. And this chart will be named as “Chart 1”.





We are going to use Excel Web Access Webpart to display this particular Chart. It is also possible to display the Entire Workbook. Once the chart has been created, publish this workbook to the document library. From the Office menu click Publish-->Excel Services as shown in below image





Click on that Excel Services, this will open a “Save As” popup dialog and enter the Document Library path to save this file the Library.





“Open in Excel Services” – Once the form is saved, Excel Services will open the excel workbook in a new browser.

We can add some more options like showing only selected sheets, named items, or adding parameters, etc., with the use of “Excel Services Options”. See the below image which shows the Excel Services Options.






These are the different options available, here we can select the Entire Workbook, only selected sheets or any named item. In our sample, we are going to display only a Chart. Select the “Items in the Workbook”, this will show a list of named items, in our case we have only one item “Chart 1”. Check “Chart 1” from the list. Click “Ok” and save the excel workbook to the Document Library.

There is one more tab “Parameters” which can be used to pass parameters to excel services. Excel Services will create UI by using InfoPath at run time to get input for those parameters.

Now, Open your SharePoint site and add the “Excel Web Access WebPart” to your page.
If this WebPart is not in your list then activate the “Office SharePoint Server Enterprise Site Features” feature.

Once the WebPart is added to the page, Open the Tool pane, this tool pane contains different properties that will be helpful to display the workbook, part of workbook or an item in a workbook.





Browse and select the Workbook from the document library, enter “Chart 1” in Named Item property and enter other properties like rows, columns etc. Now, click ok, Excel services will render the chart. If the published workbook contains parameters then an InfoPath form will be displayed along with the chart. InfoPath form will be used to get input and the calculation service of excel will perform the calculation in server and render the results back to the browser.





It is also possible to use Excel Web Services (EWS) hosted in SharePoint that provides several methods that can be used as an API to build custom applications based on Excel workbook.

Displaying Custom Icon in Document Library

It’s easy to display custom icon for documents in the Document Library. By default if a file extension is not know to SharePoint (doesn’t has an entry in DOCICON.xml) then it will display a default icon “ICGEN.GIF”.

Instead of displaying the Default Icon in the document library, I want to display a custom icon. To do this, we should know about “DOCICON.xml” file. This file resides in “Local_Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\XML “. This file defines mapping between each file extension and its icon.

You can even define your own file extension and associate a custom icon to that file extension. It is also possible to change already defined icons. Changes to the “DOCICON.xml” will affect all site definitions under the front-end web server. So the changes should be made with extreme caution.

See the below document library which displays a default icon.



To change the default icon to a custom icon

1) Create a 16x16 icon in “Local_Drive:\Program Files\Common Files\Microsoft
Shared\Web Server Extensions\12\TEMPLATE\IMAGES” location

2) Take a copy of “DOCICON.xml” – Take a backup of this file

3) Open “DOCICON.xml” and navgaete to the “Default” node and replace the “icgen.gif”
by your custom icon name.



4) Reset IIS.

Now you can see the default icon is replaced by the custom icon.

Publishing InfoPath Form

InfoPath form services will throw an error if the InfoPath form template is not properly published. Follow these steps to publish an InfoPath form (.xsn) and use this template in Form Services of MOSS 2007.

Create an InfoPath form and add Business logic to it (If any).

Open Your Project (InfoPath) in Visual Studio. Open Tools à Form Options

In this “Form Options” Dialog, some properties need to be set.

1) Security and Trust

--> Select Full Trust (Browser enabled forms must have the “Full Trust” Security level.

--> Check Sign this form template (Create a new certificate by clicking “Create Certificate”.





2) Compatibility

Check the “Design a form template that can be opened in a browser or InfoPath” in Browser Compatibility section. Enter the SharePoint site URL to verify the compatibility.





After setting these properties click “Ok”. Check the “Design Checker”, it should not have errors.

Now go to Build à Publish in Visual Studio. This will open the below dialog.





Here, publish this InfoPath form to a network location. In my case I’ve published in C:\MySampleInfoPathForm.xsn




Click next and Publish to your network location. An “.xsn” file will be created which will have all the business logic in it. (No need to copy the business logic dll’s to server).

Now, Open the SharePoint Central Admin Site.

Go to “Application Management” --> Manage Form Templates



This will take us the following page



Click on Upload form template



Select your “.xsn” and click ‘Verify”. This will show a success message if the form is trusted. Otherwise, it will throw an error.

After the Verification click the Upload button to upload the InfoPath form as an Administrator approved template.

After successful upload, activate the form to your site collection. See the below screen



We are going to use this template as “Content Type” for a document library.

Go to that site, which you have activated this template. Create a Document Library.
Go to Settings of the Document Library.

Settings --> Advanced Settings




1) Select “Allow Management of Content type” to Yes. (Default it is set to false)
2) Select “Display as a Web page” then click OK.

Now, In Document Library Settings page click on “Add from existing content type”



Select your content type (see the below screen)



Click on Add then OK. Now this Content type (MySampleInfopathForm) has been added to the Document Library.



Click that Content type; InfoPath Form Services will display the InfoPath form in a browser.

Inline Video in SharePoint

Abstract

This article provides the information to add inline video to a SharePoint Site. We can achieve this by using Built-in “Content Editor WebPart”.

Content Editor WebPart

Content Editor Web Part is intended for adding HTML content to a Web Part Page, which may include hyperlinks.

It is possible to add content to the Content Editor WebPart in three ways

Rich Text Editor:

Use the Rich Text Editor to create the formatted content without the prior knowledge of HTML.
There are different toolbars available in this editor to format the content.

Source Editor:

Use this Source Editor to add or modify the HTML source code. This Source Editor is a plain text editor and it is intended for users who are familiar with HTML syntax.

Content Link:

Use this Content Link to link to the existing content by entering a hyperlink to a text file that contains a HTML source code. HTTP or HTTPS are the two valid hyperlink protocols that you can use to link to the file.

The Following image shows the Content Editor Tool Pane.





Adding a Video File To SharePoint Site

It is Simple and straight forward to add a video file. Add a Video file to your library or to a location, which can be accessed by an UNC path. Content Editor WebPart uses this source location to display the video.

In this following scenario I’ve a document library “Sample Documents”, which I’ve used to store my sample video clip.




Here, “My Sample Video” is the video file, which has been uploaded to my document library “Sample Documents”.

Now, Add Content Editor WebPart to your page. In this webpart we are going to add few lines of HTML source to embed the video file “My Sample Video”.

HTML Source



Details about the properties of embed tag.

src – source location

autoplay – If autoplay set to true, the video will be played immediately upon opening the SharePoint site. If this is set to false, the user has to manually click play to play the video.

loop – If loop is set to true, the video will be played over again after the end. If this is set to false, only once the video will be played.

height, width – you can use these properties to adjust the height and width respectively. Next, Get the location of your video. To get this location, go to your library and right click the video file. Copy Shortcut will give the location of your file. Now place the location in src of embed tag.– If autoplay set to true, the video will be played immediately upon opening the SharePoint site. If this is set to false, the user has to manually click play to play the video.

loop – If loop is set to true, the video will be played over again after the end. If this is set to false, only once the video will be played.

height, width – you can use these properties to adjust the height and width respectively. Next, Get the location of your video. To get this location, go to your library and right click the video file. Copy Shortcut will give the location of your file. Now place the location in src of embed tag.







Once the above HTML source code is entered in to source editor, click on save button, this will embed the video in to your page.

With the help of Content Editor Webpart it is very easy to play the inline video in a SharePoint site.

FormState in InfoPath 2007

Introduction

This Article is about the FormState of InfoPath 2007.

InfoPath 2007 has the new property called “FormState”, this could be used to store the state values. In previous version of InfoPath, to store the state values, you would have used hidden variables. This property will reduce or avoid the use of hidden variables.

About FormState

FormState is an IDictionary object, which holds the user-defined state values, which were defined in the variable declaration section i.e., before the InternalStartup() of FormCode class.

Using FormState, user-defined state variables can be accessed from code running in forms opened in Microsoft Office InfoPath 2007 or in a Web browser. It is also possible to store the state value in global member variable only when you use InfoPath client, but this will not work in Web browser. Design Checker of InfoPath will throw an error to use the FormState instead of global member variables.

Example

Following example shows the design pattern for creating the user defined state variable in declaration section of FormCode class.

///

/// Get or Set Count
///

private int count
{
get
{
// If the state variable “count” is not initialized then
// return 0; return the count otherwise.
if (FormState["_count"] != null)
{
return (int)FormState["_count"];
}
else
{
return 0;
}
}
set
{
FormState["_count"] = value;
}
}


In the above example, “count” is a private property, which can be accessed only within the FormCode class. FormState holds the values as “Key, Value” pair, here the Key is _count. If the _count is not initialized, zero will be returned; otherwise the value stored in the _count will be returned.

It is also possible to store different types of objects in FormState. For example, I have a list of holidays for a particular location, which is in the Holiday Table in the database. I have to use this list in different methods in my FormCode class and also each time I do not want to fetch this list from database.

For the above scenario, we can create a HashTable (which is also inherited from IDictionary) to store the holiday list from the database in the Load event of the Form. Store this in the FormState Dictionary.

///

/// Get or Set the Holiday List
///

private Hashtable holidayList
{
get
{
return (Hashtable)FormState["_holidayList"];
}
set
{
FormState["_holidayList"] = value;
}
}

Now, this property “holidayList” can be used in different methods in the FormCode class.

Conclusion

FormState will be very useful to store the user-defined state data and access the same in InfoPath 2007 and also in Web browser.