Your want to display the content of an HTML/XHTML document.
In the example below, we will go through the above steps using the static sample page located at http://static.klipfolio.com/static/klips/samples/html/data.html.
HTML documents are written in an endless number of variations, but to extract data from a web page for a Klip, all you need to focus on is the section that includes the data you want to display in the Klip. Whether it is contained in a table, list, or any other tags, the data should be in repeating blocks of opening and closing tags.
In this article, we will go over how to extract data from a table, but the steps discussed here apply to any other types of repeating tags in an HTML document.
Let's take a look at a sample HTML table:
<html>
<table>
<tr>
<th></th><th colspan="2">Annual average</th>
</tr>
<tr>
<th>City</th><th>Snowfall (cm)</th><th>Total precipitation (mm)</th>
</tr>
<tr>
<td class="city">Beijing</td>
<td>30</td>
<td>623</td>
</tr>
<tr>
<td class="city">Ottawa</td>
<td>235</td>
<td>943</td>
</tr>
...
</table>
</html>Let's say we want to write a Klip that displays all the available information about each city. We want each city's name, snowfall and precipitation amounts displayed in a row, or as an "item", in the Klip.
We suggest that you start out with a blank Klip, which can be added by clicking the New button in the toolbar and selecting Blank Klip.
First, let's update the <contentsource> with the URL of the sample data. Look for <contentsource> in the Klip and update it like this:
<contentsource>
http://static.klipfolio.com/static/klips/samples/html/data.html
</contentsource>When the Klip is saved and reloaded, it should look like this:
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.
selector {
property: value;
}
<style>
tr {
type: item;
}
</style>The cities are in the first set of <td>...</td>. To display them in the first column of the Klip, specify it using the itemcol property:
<style>
tr {
type: item;
}
td {
itemcol: 1;
}
</style>When you save the updates and reload the Klip, it should look like this:
Why doesn't the Klip display the snowfall and precipitation values even though they're also inside <td>...</td> tags?
This is because, according to the <style> block that we wrote so far, the Klip looks for <tr>, then for the first <td> inside it.
td+td {
itemcol: 2;
}td+td means, "<td> that is immediately preceded by a <td>".
Similarly, add the column setting for the 3rd set of <td>...</td> for the total precipitation, then save and reload the Klip:
td+td+td {
itemcol: 3;
}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.
td+td {
itemcol: 2;
type: number;
}
td+td+td {
itemcol: 3;
type: number;
}It doesn't matter in what order the properties appear within the brackets. When you save the change and reload the Klip, it should look like this:
Here are some settings you might also consider:
Download the finished sample HTML Klip.
For more customization options, refer to the how-to article Top 5 Klip Development Best Practices.
For the full list of how to write the selectors for the desired tags, refer to the Klip Developer Guide.
