Examine the data source and identify what constitutes an item.

To view the sample data source, load http://support.klipfolio.com/files/demo/demo.xml in a web browser and view the page source. At the time of this writing, this is what it looks like:

<alerts> 
  <alert> 
    <level>http://static.klipfolio.com/images/klip-assets/assorted/warning_yellow.png</level> 
    <sender>Server Monitor</sender> 
    <summary>Server BU172 is down.</summary> 
    <date>01/07/2011 20:29</date> 
    <category>Category 1</category> 
    <url>http://www.klipfolio.com/</url> 
    <id>1133054944</id> 
  </alert> 
  <alert> 
    <level>http://www.klipfolio.com/static/support/demo/images/normal.png</level> 
    <sender>Transaction Monitor</sender> 
    <summary>Transactions are running too slow.</summary> 
    <date>01/07/2011 20:31</date> 
    <category>Category 2</category> 
    <url>http://www.klipfolio.com/</url> 
    <id>1133055050</id> 
  </alert> 
</alerts>                 

You see that there are 2 repeating blocks of information, each of which is called an "item". Every item in demo.xml starts with <alert> and ends with </alert>, and it contains several elements using pairs of start and end tags, such as <level> and </level>, <date> and </date>, and <category> and </category>.

Specify the name of the tag that starts each item as type: item.

<style>
  alert {
    type: item;
  }  
</style>

This tells the application to look for a pair of opening and closing <alert> tags and consider each instance of it an item.

Reload the Klip.

The Klip still looks the same because you have only identified what constitutes an item, not what in the item should be displayed.

From each block of items, you need to identify the tags from which you want to extract data and specify which columns to display them.

For example, to display the contents of <sender> and <summary> in the first and second columns, respectively, add the tag names and use the itemcol property:

<style>
  alert {
    type: item;
  }  
  sender {
    type: text;
    itemcol: 1;  
  }
  summary {
    type: text;
    itemcol: 2;  
  }
</style>

You set these columns to type: text, as you want their contents to be treated as text. Since type: text is the default type in every Klip, you can choose to omit it.

Klipfolio Dashboard supports several types, all of which are listed in Appendix A, Supported CSS Properties at the end of this document.

Reload the Klip.

If your Klip still looks the same as it did at step 3, double-check the following:

Remember that the Klip has successfully accessed its data source if it isn't dim anymore. If its content isn't being displayed in the Klip as you specified in the <style> block, it probably means you are missing something in it.