Generate HTML from XML using XSLT in webmethods

Before we dive into the code, let’s understand the role of XSLT.

XSLT :

• XSLT(eXtensible Stylesheet Language Transformations) is a language used to transform XML documents into different formats like HTML to present the data visually with color effects but you should write the instructions or rules to do the same. 
• XML is a way to structure and store data, similar to HTML, but designed to carry information instead of presenting it visually.
• XSLT works like a set of rules that you create to define how the XML data should be changed or rearranged. These rules are expressed in the form of an XSLT stylesheet.
• Using XSLT we will traverse the xml and based on our requirement we will form the output data.

• Good to have basic knowledge of XSLT
• Good to have basic knowledge of webmethods flow services.

• Create a package with name “HG_XSLT_Demo” and create below folder structure.
  

   

• Now right click on the services folder and follow screenshot to create the xslt service.
  

   

• Give a name for the XSLT service and proceed by clicking “Next” if you wish to utilize a template. else, you can click “Finish” to begin crafting the service from the ground up.
  

• Check the “Use Template” option and choose the “Basic stylesheet – XSLT 2.0” template then click the “Finish” button to proceed.
  

   

• Now you will notice your xslt service has been populated with template code, now we will make changes to transform xml to html tabular format.
• In the xslt service <xsl:template match=”/”> expression designates a rule for transforming the root element of an XML document. It’s like a starting point for the transformation process, you can also provide root element of your xml explicitly. 
• In this demonstration, we’ve prepared an XML file for your convenience. You can download it using the button below. However, if you prefer to work with your own XML data, you’re welcome to do so. Just remember that in such cases, you should adapt the XSLT script to match your specific XML structure.
  

   

• If you observe the Employee xml, the root element is “Employee” and we have four attribute as “Name”,”Age”,”Designation” and “Salary” so let’s create the html structure inside our xslt service.
• Update the xslt service with the basic html table script like shown in the below screenshot.
  

   

   

• If you see the above screenshot the basic html table script has been applied and the first table header is also added now we need to write the logic to traverse the xml and form table rows for each iteration , so let’s do it.
• If you observe the Employee XML which you have downloaded , you will notice the presence of several “EmployeeDetails” elements, each containing distinct employee information. This collection resembles a list. To process this, we’ll iterate over the “EmployeeDetails,” extracting individual employee details. Let’s now incorporate the logic for this procedure.
• Update the xslt service with <xsl:for-each select=”Employee/EmployeeDetails“></xsl:for-each>, This will allow us to iterate through the “EmployeeDetails” section of the XML.
  

   

• Now update the below code in the XSLT service by adding the following code snippet to extract the “EmployeeDetails” and structure the table rows and columns accordingly.
  

   

• As we have inserted the table row code within the <xsl:for-each> loop, it will now generate rows for each iteration, utilizing the employee attributes during this process and <xsl:value-of select=””/> will extract the value of the attribute based on the attribute name.
• As of now we have completed the development for the XSLT service but let’s add the border to the table by inserting below code.
  

   

• Now you can run the XSLT service directly but let’s create a flow service with name “htmlFormatter” and invoke the XSLT service in the flow service and store the html output in a file.
• Once the flow service creation is done, create an input variable with name “xmlString” in the flow service.
• Now invoke the XSLT service inside our flow service and perform below mapping.
  

   

• Please note that if you have the XML stored in a file or possess its URL, you can explore alternative methods of XSLT service input.
• Invoke “pub.file:stringToFile” service and follow below mapping as shown in the screenshot, it will allow us to store the html content generated from the XSLT service to .html extension file.
  

   

• Please note: if you want to store the file or read file from your internal file location, you need to update the root file path into the fileAccessControl.cnf  which you can find it ‘C:SoftwareAGIntegrationServerinstancesdefaultpackagesWmPublicconfig’ and then you need to reload the WmPublic package.
  

   

• We have done with the development now, let’s run the service by giving the xml as input.
  

   

•  Once the service runs successfully, you’ll observe that an “Employee.html” file is generated at the specified location.
  

   

• Now open the Employee.html file in your preferred web browser.
• Congratulations ! we did it!😊
  

   

Please click below download button to download the source code😊.