Klipfolio. The KPI Dashboard - Evolved
The KPI Dashboard – Evolved
1-877-233-6149
Contact Us

Klip Developer Guide

Table of Contents

2.5. Making Basic Enhancements: CSS

Earlier in this chapter, some basic stylesheet settings were discussed. Though it may be sufficient to just use those simplest settings, there are several styling options that are quite simple to add but can greatly enhance the Klip's look and usability. Here are some of the additional settings that can be applied to most Klips, basic or otherwise.

Specifying column header labels

You can specify the text that is displayed in the column headers by using the collabel, label or name property for the desired column. If none is specified, the tag name is used by default.

For example, your basic Klip's style looks like this:

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

Because the sender and summary columns don't have collabel, label or name specified, the tag names ("sender" and "summary") are displayed in the column header:

Now, try updating the styles as follows and reload the Klip:

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

Note how the column headers have been updated with "Sender" and "Summary", with the letter S in uppercase.

You can also use the label or name property instead for the same result:

<style>
  alert {
    type: item;
  }  
  sender {
    type: text;
    itemcol: 1;  
    label: "Sender";
  }
  summary {
    type: text;
    itemcol: 2;  
    name: "Summary";
  }
</style>

What's the difference? What happens if you use them all? Here are the rules for the column header labels:

  • The collabel property takes precedence over label and name.

  • The label property takes precedence over name.

  • The name property takes precedence over the tag name.

  • If none of the above is specified, the tag name is displayed.

Adding a tooltip

In addition to displaying the data in the Klip itself, a tooltip can be used to display additional information about each item. A tooltip is displayed when the user hovers over an item with the mouse pointer.

[Note]Note

Klipfolio Dashboard refers internally to a tooltip as a 'note'. You can think of a note and a tooltip as the same thing.

To add a tooltip, use noterow: n for the desired column(s), where n is the row in which you want its content to be displayed.

For example, update your stylesheet as shown below.

<style>
  alert {
    type: item;
  }  
  sender {
    type: text;
    itemcol: 1;  
    noterow: 1;
    collabel: "Sender";
    notelabel: false;
    emphasis: strong;
  }
  summary {
    type: text;
    itemcol: 2;  
    noterow: 3;
    label: "Summary";
  }
  category {
    type: text;
    noterow: 2;
    label: "Level";
  }
</style>

In addition to setting the noterow property for sender, summary and the newly added category columns, note the following:

  • The sender column has notelabel: false that turns off the label in the tooltip.

  • The sender column also has emphasis: strong that causes its content to be displayed in bold in the tooltip.

  • The summary column is using the label property, which is used in the column header label as well as the label in the tooltip. You can add the collabel property if you want to use a different label for the column header.

  • The category column's content is displayed only in the tooltip and not in the Klip because it doesn't have the itemcol property set.

Displaying the items you intend to display

Whenever the Klip is refreshed, the incoming items are compared with the existing items in the Klip. If an incoming item is identical to one of the existing items in the Klip, the new one will replace the existing one.

However, it may be that you want every single item in the source to be displayed in the Klip, even when some are identical to one another. For example, it is not uncommon to have two or more identical orders made by the same customer. With the default functionality of the item comparison and removal in place, though, the Klip would display only one of those orders.

In most data sources, there is usually at least one tag or column that uniquely identifies each item, such as a purchase order ID, employee ID or region ID. Whether or not you display this information in the Klip and/or tooltip, you can use key: override for this column to tell the Klip to use its content exclusively when comparing incoming and existing items.

In the case of the basic Klip, for example, you could include the <id> tag in the <style> block:

<style>
  alert {
    type: item;
  }  
 sender {
    type: text;
    itemcol: 1;  
    
  ...
  
  id {
    key: override;
  }
</style>

Note that you can use key: override for only one column because it is used to tell the Klip to ignore the key settings of all other columns.

If your data source does not have any tags or columns that contain information that is unique to each item, you can instead use key: exclude to tell the application not to use the content of that column(s) for item comparison. To figure out which column(s) to set key: exclude, consider which columns should be included in the comparison a minimum, so that the combination of those columns will make each item uniquely different from one another. Any columns that do not fall under this condition can be set with key: exclude. It is typical to use key: exclude on number columns because they change the most often.

[Tip]Tip

To try how the key property works with a very simple example Klip, refer to the how-to article, "Why is my Klip displaying fewer items than the data source?".