SharePoint Pals
 | Sign In
How to design a XSLT to transform XML to HTML/TEXT/CSV
by Tarun Kumar Chatterjee 3 Jan 2016
Author
.Net – Technology Specialist
Visits   
Today  :   5     Total  :    4691

XSLT can be designed to transform XML to different output formats. But before going into the actual implementation let me share you some advantages/disadvantages of using XSLT. After considering all the below points & depending on the actual scenarios, we should have to decide if XSLT can be used in live project.

Here are few more advantages of using XSLT.

1. Server-side XSLT is that the application is free of browser compatibility issues.

2. XSLT is used for user defined transformations to XML document and the output can be HTML, XML, or text. So it is easy to merge XML data into presentation.

3. XPath can be used by XSLT to locate elements/attribute within an XML document. So it is more convenient way to traverse an XML document rather than a traditional way, by using scripting language.

4. By separating data (XML document) from the presentation (XSLT), it is very easy to change the output format in any time easily without touching the code-behind.

5. Using XML and XSLT, the application UI script will look clean and will be easier to maintain

6. XSLT templates are based on XPath pattern which is very powerful in terms of performance to process the XML document

7. XML is platform independent.

Disadvantages:

1. It is difficult to implement complicate business rules in XSLT

2. Changing variable value in looping, is difficult in XSLT

3. Using XSLT have performance penalty in some cases as its engine don’t optimize code by using caching technique like traditional compiler.

Let see an implantation which simply transforms the XML file to output format as HTML using the XSLT.

First I have created a XML named as “Employees.xml”

 <?xml version="1.0" encoding="utf-8"?>
 <?xml-stylesheet href="Employees.xsl" type="text/xsl"?>
 <Employees>
   <Employee>
     <EmployeeID>1</EmployeeID>
     <EmpName>Tarun1 Chatterjee1</EmpName>
     <Department>IT1</Department>
     <PhNo>9111111111</PhNo>
     <Email>tarun1.chatterjee1@gmail.com</Email>
     <Salary>99999</Salary>
   </Employee>
   <Employee>
     <EmployeeID>2</EmployeeID>
     <EmpName>Tarun2 Chatterjee2</EmpName>
     <Department>IT2</Department>
     <PhNo>9222222222</PhNo>
     <Email>tarun2.chatterjee2@gmail.com</Email>
     <Salary>99999</Salary>
   </Employee>
   <Employee>
     <EmployeeID>3</EmployeeID>
     <EmpName>Tarun3 Chatterjee3</EmpName>
     <Department>IT3</Department>
     <PhNo>9333333333</PhNo>
     <Email>tarun3.chatterjee3@gmail.com</Email>
     <Salary>99999</Salary>
   </Employee>
   <Employee>
     <EmployeeID>4</EmployeeID>
     <EmpName>Tarun4 Chatterjee4</EmpName>
     <Department>IT4</Department>
     <PhNo>9444444444</PhNo>
     <Email>tarun4.chatterjee4@gmail.com</Email>
     <Salary>99999</Salary>
   </Employee>
 </Employees>
 

Now writing the below code in Employees.xslt file to display the output data as HTML format

 <?xml version="1.0" encoding="utf-8"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
 	<?xml-stylesheet href="Employees.xsl" type="text/xsl"?>
     <xsl:output method="html"/>
 
   
   <xsl:template match ="/">
     <html>
       <head> 
         <script language="javascript" type="text/javascript"></script>
       </head>
       <body>
         <h2> Employee Details</h2>
         <table border="1">
       <tr bgcolor="aqua">
         <th style="text-align:Left"> EmployeeId</th>
         <th style="text-align:Left"> Employee Name</th>
         <th style="text-align:Left"> Department</th>
         <th style="text-align:Left"> Phone No Name</th>
         <th style="text-align:Left"> Email ID</th>
         <th style="text-align:Left"> Salary</th>
       </tr>
       <xsl:for-each select="Employees/Employee">
         <tr>		
           <td>	          
             <xsl:value-of select="EmployeeID" />
           </td>		
           <td>            
             <xsl:value-of select="EmpName"/>
           </td>		
           <td>            
             <xsl:value-of select="Department"/>
           </td>		
           <td>            
             <xsl:value-of select="PhNo"/>
           </td>		
           <td>            
             <xsl:value-of select="Email"/>
           </td>		
             <td>              
               <xsl:value-of select="Salary"/>
             </td>  		
         </tr>
       </xsl:for-each>
     </table>
         <br/>
         <br/>
         <form id ="form" method="post" >        
         </form>
         </body>
     </html>
   </xsl:template>
 </xsl:stylesheet>
 

So, here <xsl:output method="html"/> is code of returning the output format as HTML.

Now run the Employees.xml file in browser

clip_image002

In XSLT file, let me change the output format as “text” : <xsl:output method="text"/> & after running the same Employees.xml file in browser

clip_image004

So, depending on design of XSLT we can easily transform the XML to different output formats.

Now, let me try to modify the XSLT file so that the output will be looking like CSV.

 <?xml version="1.0" encoding="utf-8"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
 	<?xml-stylesheet href="Employees.xsl" type="text/xsl"?>
     <xsl:output method="text"/>
 <xsl:variable name="delimiter" select="','"/>
   
   <xsl:template match ="/">
     <html>
       <head> 
         <script language="javascript" type="text/javascript"></script>
       </head>
       <body>
         <table border="1">
         <tr bgcolor="aqua">
         <th style="text-align:Left"> EmployeeId</th>
 	      <xsl:value-of select="$delimiter"/>
         <th style="text-align:Left"> Employee Name</th>
 	      <xsl:value-of select="$delimiter"/>	
         <th style="text-align:Left"> Department</th>
 	      <xsl:value-of select="$delimiter"/>
         <th style="text-align:Left"> PhoneNumber</th>
 	      <xsl:value-of select="$delimiter"/>
         <th style="text-align:Left"> EmailID</th>
 	      <xsl:value-of select="$delimiter"/>
         <th style="text-align:Left"> Salary</th>
 	      <xsl:text>&#xa;</xsl:text>
       </tr>
       <xsl:for-each select="Employees/Employee">
         <tr>		
           <td>	          
             <xsl:value-of select="EmployeeID" />
 	    <xsl:value-of select="$delimiter"/>
           </td>		
           <td>            
             <xsl:value-of select="EmpName"/>
 	    <xsl:value-of select="$delimiter"/>
           </td>		
           <td>            
             <xsl:value-of select="Department"/>
 	    <xsl:value-of select="$delimiter"/>
           </td>		
           <td>            
             <xsl:value-of select="PhNo"/>
 	    <xsl:value-of select="$delimiter"/>
           </td>		
           <td>            
             <xsl:value-of select="Email"/>
 	    <xsl:value-of select="$delimiter"/>
           </td>		
             <td>              
               <xsl:value-of select="Salary"/>	    
             </td> 
 		  <xsl:text>&#xa;</xsl:text>
         </tr>
       </xsl:for-each>
     </table>
         <br/>
         <br/>
         <form id ="form" method="post" >        
         </form>
         </body>
     </html>
   </xsl:template>
 </xsl:stylesheet>
 
 

Here you can observe that I am using the below two lines of code to form the output display format like CSV.

<xsl:variable name="delimiter" select="','"/>

<xsl:value-of select="$delimiter"/>

Run the Employees.xml & the output:

clip_image006

Happy coding

Tarun Kumar Chatterjee

Tags :  , ,

blog comments powered by Disqus

SharePoint Pals

Pals
SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile

Training

Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community




SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to articles@sharepointpals.com in a word document.

Related Resources

Recent Tweets

Twitter January 15, 00:25
How To Enable Target Value And Actual Value In #D3 Gauge Chart https://t.co/VxSi4QnNrC

Twitter January 15, 00:24
How To Open #SharePoint List Hyperlink Column In Modal #Popup Window https://t.co/EQ7HkoZDkX

Twitter January 15, 00:24
Quick Introduction To #Asp.NetCore And It’s Features https://t.co/zAXObHCFpH

Twitter January 15, 00:22
How To Configure #PerformancePoint Services To Use Secure Store In #SharePoint 2013 https://t.co/LEwnUoI7EY

Twitter January 15, 00:21
How To Block Or Disable #Office365 Services https://t.co/Yvp2VPFIRP

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation