Parsing data: XML, RSS, ATOM, RDF

Problem:

Your want to display XML data (including RSS, ATOM, RDF).

Solution:

Whenever you make changes in the Klip's source and save it, be sure to reload it.

In the example below, we will go through the above steps using the static sample XML data located at http://static.klipfolio.com/static/klips/samples/xml/data.xml.

XML data, whether in the RSS, ATOM or RDF format, is written in repeating blocks of opening and closing tags.

<telethon>
    <participant>
        <name>Cathy</name>
        <city>Tucson</city>
        <id>1024</id>
        <donation>100</donation>
    </participant>
    <participant>
        <name>Bob</name>
        <city>New Orleans</city>
        <id>1010</id>
        <donation>50</donation>
    </participant>
<telethon>

Let's say we want to write a Klip that displays all the available information about each participant, with his or her name, city, id and donation values displayed in a row, or as an "item", in the Klip. Using the above sample data, we should see 2 items when we are finished with the Klip.

1. Specify the <contentsource>

We suggest that you start out with a blank Klip rather than a template if you are not familiar with Klip development. To add one, click the New button in the toolbar, then select Blank Klip.

<contentsource>
    http://static.klipfolio.com/static/klips/samples/xml/data.xml
</contentsource>

Save and reload the Klip to allow the change to be reflected.

The important thing here is that the Klip displays no data -- its title and icon may be different in yours depending on its <title> and <icon> settings.

No data is being displayed at this point because the Klip doesn't know what part of the content source to parse. For this, we must write a <style> block that is specific to this data source.

2. Write the <style> block

selector {
    property: value;
}

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

<style>
    participant {
        type: item;
    }
    
    name {
        itemcol: 1;    
    }
</style>

When you save the updates and reload the Klip, it should display 2 items:

city {
    itemcol: 2;
}
id {
    itemcol: 3;
}
donation {
    itemcol: 4;
}

The Klip should look like this now:

As far as displaying the data goes, this is it. However, you will want to make some customizations so that the Klip presents your data in a more coherent manner.

3. Specify additional settings

donation {
    type: number;
    itemcol: 4;
    format: "currency($),decimal(2)";
}

Download the finished sample XML Klip.

For additional customization options, refer to the how-to article Top 5 Klip Development Best Practices.

For the complete list of supported style properties, refer to the Klip Developer Guide.