Better Previews with Sample Data

Better Previews with Sample Data

  • Comments 4

Hello again. It's Jon again, with another tip to make your SharePoint Designer experience better when using external data. When using external data or large data sets in SPD, you can end up with slow performance while your data is retrieved and rendered. In SPD there is a built in way to make your life a little easier by using sample data instead of the real data. In doing so, you can save time by not using the network connection to request the data, but also time not having to render what can be a very large data set. Office Online has an article describing the basic steps to using sample data, but the downside of that method is that you end up with extremely generic data. (Note - this setting only applies to design time, it has no affect at runtime.)

Let’s say you had an XML file with the following format:

<?xml version="1.0" encoding="utf-8" ?>
<trainingTimes>
   <trainingTime>
      <day>Tuesday</day>
      <StartTime>6:30pm</StartTime>
      <EndTime>8:30pm</EndTime>
   </trainingTime>
   <trainingTime>
      <day>Thursday</day>
      <StartTime>6:30pm</StartTime>
      <EndTime>8:30pm</EndTime>
   </trainingTime>
   <trainingTime>
      <day>Saturday</day>
      <StartTime>9:00am</StartTime>
      <EndTime>11:00am</EndTime>
   </trainingTime>
</trainingTimes>

If you were to drag the XML file onto the page, the default DataFormWebPart would look something like this:

clip_image003[4]

Select the data view, then click the ">" icon in the upper right corner. In the "Common Data View Tasks" menu that is displayed, select "Show with sample data". The result will be as follows:

clip_image005[4]

The sample data you see is fairly generic. However, you can do better. On the DataFormWebPart, there is a property called "Sample Data". You can set it by right clicking on your Data View, then selecting Web Part Properties.... Next, expand the Miscellaneous section. If you click the "..." next to the text box for sample data, you will be presented with an "Web Part Property Value" dialog where you can type or paste some XML. The idea is to input some representative XML data that will allow you to better visualize and style your data without the overhead of going to the real data source. In our case, we had a list of many training times, but for the sample data we only want a single training time (or perhaps a few). Paste the following into the box:

<trainingTimes>
   <trainingTime>
      <day>Tuesday</day>
      <StartTime>6:30pm</StartTime>
      <EndTime>8:30pm</EndTime>
   </trainingTime>
</trainingTimes>

Then hit OK to both the "Web Part Property Value" dialog and the "Data View Properties" dialog.

clip_image007[4]

Now your data exactly matches what your data source outputs. This technique can also be very useful for times when you want to do special formatting for a specific value, but your data source isn't providing such a value at a given time.

Enjoy!

-Jon

  • PingBack from http://microsoft.wawblog.info/?p=21132

  • > "Paste the following into the box"

    There's no code following !

    (This text is just above the final screen shot.

  • Entwicklung Entwickeln für SharePoint SP1 und SP0 Tools Using the Virtual Earth Control in SharePoint

  • Mike - thanks for pointing that out. I will see about getting the post updated, but in the meantime here is the xml that goes into the sample data property:

    <trainingTimes>

    <trainingTime>

     <day>Tuesday</day>

     <StartTime>6:30pm</StartTime>

     <EndTime>8:30pm</EndTime>

    </trainingTime>

    </trainingTimes>

    Note that its a slimmed down version of our previous xml. Also note that you must not include the <?xml ...> tag in your sample data since it ends up as a property on the DataFormWebPart.

    For easy copy/paste, here is the full xml from above:

    <?xml version="1.0" encoding="utf-8" ?>

    <trainingTimes>

    <trainingTime>

    <day>Tuesday</day>

    <StartTime>6:30pm</StartTime>

    <EndTime>8:30pm</EndTime>

    </trainingTime>

    <trainingTime>

    <day>Thursday</day>

    <StartTime>6:30pm</StartTime>

    <EndTime>8:30pm</EndTime>

    </trainingTime>

    <trainingTime>

    <day>Saturday</day>

    <StartTime>9:00am</StartTime>

    <EndTime>11:00am</EndTime>

    </trainingTime>

    </trainingTimes>

    Enjoy!

Page 1 of 1 (4 items)
Leave a Comment
  • Please add 8 and 6 and type the answer here:
  • Post