How to design a XSLT to transform XML to HTML/TEXT/CSV


Tarun Kumar Chatterjee
.Net – Technology Specialist
Published On :   03 Jan 2016
Visit Count
Today :  6    Total :   5208



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

Categories