In this post we are going to see how to use XSLT in
Sharepoint 2010, to display the list data in a customized way on a webpart
page.
This article will be helpful for those who are just starting
with XSLT in MOSS 2010.
Consider the below list EmployeeDetails
At the end of this post we will be displaying the above list data as below in the web part page.
Expected Result:
Step1:
To start with, whenever we talk about creation of XSLT
we must be ready with the HTML markup how we want to display.
In order to achieve the above expected result I have created
the HTML markup as below.
<table border="1">
<tr>
<td rowspan="3" valign="top"
width="30%">
<img src="" />
</td>
<td style="text-align: left"
valign="top"
width="70%">
Name
</td>
</tr>
<tr>
<td style="text-align: left"
valign="top"
width="70%">
Skills
</td>
</tr>
<tr>
<td style="text-align: left"
valign="top"
width="70%">
Summary
</td>
</tr>
</table>
Step2:
Now let’s start with the creation of XSLT. The above
highlighted yellow fields will be replaced by XSL values of the fields.
Lets create the below XSLT Template with the name MyCustomStyle.
<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">
<table border='1'>
<tr>
<td rowspan="3" valign="top" width="30%">
<img>
<xsl:attribute name="src">
<xsl:value-of select="substring-before(@UserImage,',')" />
</xsl:attribute>
</img>
</td>
<td style="text-align:
left" valign="top" width="70%">
<h3>
<xsl:value-of select="@UserName" />
</h3>
</td>
</tr>
<tr>
<td style="text-align:
left" valign="top" width="70%">
<xsl:value-of disable-output-escaping="yes" select="@UserSkillset" />
</td>
</tr>
<tr>
<td style="text-align:
left" valign="top" width="70%">
<xsl:value-of disable-output-escaping="yes" select="@UserSummary" />
</td>
</tr>
</table>
</xsl:template>
Step3:
Now we are going to add this XSL Template to a existing
XSLT(ItemStyle) present in XSL Style Sheets which is present
under Style Library.
Download the ItemStyle xslt and add the above
template at the end of the style sheet.
You can even create a new XSLT rather than adding in any
existing one.
Step4:
With the above steps we are ready with our XSLT changes and
ready to add this to a webpart page.
A)
Create a webpart page.
B)
Add a Content Query Webpart.
C)
Open the tool pane of the above webpart(Edit
Webpart).
D)
Select the list EmployeeDetails in the
source section.
E)
Expand the Styles Section which is
present under Presentation Group.
F)
In the Item Style Drop down, you will be
able to see the XSLT template name MyCustomStyle and select it.
G)
Once after you select our custom created style,
You must be able to see the green colored highlighted variables present in XSLT
in the Fields to display section.
H)
Add the respective Field internal name to the
respective Variables.
I)
Finally Click Apply and Press Ok button.
Your expected result will be available now.
Hope this helps...
