Blog

Many of you know the power of the Data Form Web Part (aka: Data View) when it comes to outputting dynamic HTML.  Did you know you can also use the DFWP to output XML?  Let’s take a look at how to do this:

Create an .aspx page to host your DFWP

First, we’ll create a blank .aspx page to host our Data Form Web Part:

• Open your site in SharePoint Designer 2007
• Choose a location for your .aspx page (I’m using a document library called “Pages”)
• From the File menu, choose File –> New –> ASPX:
  
• Name your new aspx (I called mine xml.aspx) and open the file

You’ll see that you now have a completely blank canvas to work with!

Add the DFWP and choose what XML output should display

Next we’ll add a Data Form Web Part to display entries from our Posts list:

• From the Data View menu, choose Insert Data View.  This will open the Data Source Library.
• Select the Posts list and from the contextual dropdown, select Show Data:
  
• Now select which fields you want to display in your XML.  You can use Ctrl+click to select multiple fields
• Once you have selected a few fields, click the Insert Selected Fields as... dropdown and select Insert Multiple Item View:
  
• Now that we have a DFWP on the page, you can take a look at the filtering and sorting to get it to display only the data you’re interested in.  I won’t walk through all of this but if you are new to Data Form Web Parts you should be able to find your way through the sorting and filtering by selecting the chevron to open the Common Data View Tasks menu:
  
• One thing you will want to do to simply things later is change the Paging options.  Since our goal is to display XML, we really don’t need paging enabled.  Disable it by choosing to limit the number of displayed items:
   

Now we have a Data Form Web Part linked to our Posts list!  If you preview the page and view the source you should see something similar to this:

Modify the DFWP to remove wrapping HTML

Now that we have a DFWP displaying data, it is time to take a look at the XSLT that defines how the Web Part should be formatted.  We’ll modify that XSLT and cleanup that output so it doesn’t have all those tables and divs.

• By default, SharePoint Designer uses a basic table layout to display data.  We can change that by selecting Change Layout from the Common Data View Tasks menu:
  
• Scrolling down to the bottom of the layout options you will see a nearly blank layout called Layout table form (note: layout names appear as tooltips when you mouse over the layout visualization).  Select the Layout table form and press OK.
• You will be prompted to continue because changing layouts can remove any visual customizations you have made to the Web Part (not things like filtering/sorting).  Select Yes.
• You should now see a pretty boring Web Part! :-)  Next, select one of the displayed Title fields and switch to Code View:
  
• Once in code view you will enter the world of XSLT.  There are some great resources out there if you are new to XSLT (see Marc Anderson’s series over at End User SharePoint.com)
• The main thing we want to do is strip away the HTML formatting that is part of our Data View.  You will find the HTML elements inside of <template> tags and there should only be 3 we are concerned about:
  • <xsl:template name="dvt_1">
    • This is where most of the offending HTML will be found.  It creates the table structure for your DFWP:
      
    • Remove the HTML and you’ll simplify your output
  • <xsl:template name="dvt_1.body">
    • This template shouldn’t contain any/much HTML so it can be left alone:
      
  • <xsl:template name="dvt_1.rowview">
    • This template will usually contain a wrapping div which can be removed:
      
• Once you have removed that HTML, when you view source you should see something closer to this:
  
• Ok – progress right?  We still have a lot of HTML happening on our page though so let’s take this opportunity to do a little cleanup.  In your Page, find the opening <WebPartPages:DataFormWebPart> tag and go ahead and remove the HTML above it.  Take out the HTML, Head, Body, Form tags – whatever is up there EXCEPT the <%@ Page and <%@ Register tags:
  
• Make sure you cleanup the closing Form, Body, and HTML tags as well.  Now when you view source you should ONLY get the output of your DFWP:
  
• You may have noticed that although we stripped out the Table, TR, and TD tags from our XSL, some remains...  don’t worry, we’ll get to that in a minute.  For now let’s focus on turning our output into XML.

Modify the DFWP to output XML

Let’s revisit those templates we cleaned up earlier.  We’ll add some new tags with the goal of having output like this: <items><item>content here…</item></items>

• Let’s start with the wrapping <items> tag.
  • In code view, find the <xsl:template name="dvt_1"> tag again
  • Before the <xsl:call-template name="dvt_1.body"> tag, add your <items> open tag
  • After the matching </xsl:call-template>, add your </items> close tag
  • You should end up with something like this:
    
• Now let’s add our <item> tag
  • Find the <xsl:template name="dvt_1.rowview"> tag
  • The only content in there should be a xsl:value-of tag that displays the Title field.  Wrap that in a new <item> tag and maybe a <title> tag:
    
  • Now, to make it more interesting, let’s add a few more fields.  You can drag and drop if you’d like but I usually copy and paste the xsl:value-of and then use the intellisense to select what field I want to display:
    
  • HINT: you can get the intellisense to display by pressing Ctrl+Spacebar when your cursor is inside the quotes
  • Add a few more fields if you’d like but your XSL should look something like this:
    
  • [UPDATE:  I have since learned that outputting multiple <body> tags makes SharePoint Designer unhappy.  You may want to come up with a different tagname or once you exit your page you won’t be able to re-open it!]
• Now view your XML output.  It may be a little busy but you’ll notice that we’ve got some XML in there:
  

Modify the DFWP to output only XML

So we have some XML being output but it is still wrapped in HTML elements!  NO GOOD!  Not to worry  - there are two quick steps to fix that:

1. Return to your Data Form Web Part and find the xsl:output tag:
    
   • Change the method from “html” to “xml”.  This will tell the Web Part to output XML instead of HTML.  That isn’t enough though, the web part itself still wants to display formatting HTML for the Web Part title, header, etc
   • You can also change the indent property to “yes” if you’d like indented output
     
2. The last piece is the real magic.  You’ll want to add a special attribute to your DFWP:
   
   • By adding SuppressWebPartChrome = “True”, you are telling the Web Part not to display the wrapping table and div

Now when you view the source of our output you should see nothing but beautiful xml:

View my sample page here:  http://www.iwkid.com/blog/Pages/xml.aspx (remember – not pretty in the browser, but view source to see the goodness)

This XML (while it may not display nicely in the browser) can be used by external systems or consumed via JavaScript/jQuery to help build Composite Applications.  In my next posts we’ll explore other ways you might use this technique.