Wednesday, November 4, 2015

Displaying XML in SharePoint

So you need to display XML on your page.  Using OOTB tools here is a simple method to display XML in SharePoint 2013

image

Using the demo xml from w3schools

http://www.w3schools.com/xml/xml_xsl.asp

Copy and paste into file … breakfast.xml

<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>Light Belgian waffles covered with strawberries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>Light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<price>$4.50</price>
<description>Thick slices made from our homemade sourdough bread</description>
<calories>600</calories>
</food>
<food>
<name>Homestyle Breakfast</name>
<price>$6.95</price>
<description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
<calories>950</calories>
</food>
</breakfast_menu>

Copy and paste into file … breakfast.xslt

<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="breakfast_menu/food">
<div style="background-color:teal;color:white;padding:4px">
<span style="font-weight:bold"><xsl:value-of select="name"/> - </span>
<xsl:value-of select="price"/>
</div>
<div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
<p>
<xsl:value-of select="description"/>
<span style="font-style:italic"> (<xsl:value-of select="calories"/> calories per serving)</span>
</p>
</div>
</xsl:for-each>
</body>
</html>

Now using SharePoint upload both files to a document library

image

Copy the shortcut for the xml file

image

Using the XML Viewer Web Part

image

Edit the web part

image

and paste the URL to the XML file then do the same for the XSLT file and click ok to save your settings

image

Vola …

image

Reference from Microsoft

https://support.office.com/en-US/article/Use-the-XML-Viewer-Web-Part-to-display-structured-data-and-XML-based-documents-and-forms-00D6ED40-BD73-4754-B869-0477A034BCFD

No comments:

Post a Comment