Developer
How-To Articles

Displaying large text or images with captions

Problem:

You want to mix large and small font sizes within each item.

Solution:

You can use a combination of the height property and layout: card to display the contents of the first column(s) in a larger size, followed by one to 3 lines of data in each item.

Download the finished sample Klip.

This article covers the minimum amount of code that is required in order to achieve the layout, using a very simple set of data. For information on how you can integrate this layout with currency symbols, icons, mini charts, etc., see the "What's next?" section below.

In this article, you will find out how to create a Klip whose layout looks like this using a very simple example Klip.

Overview

Each item in a Klip using the caption layout has a consecutive series of columns in large display (at the height of 2 or 3), followed by one single column (and no more) containing rows of data at height: 1 that would normally be displayed in individual columns.

It's best to start with a regular Klip whose columns are displayed side by side. See step 1 in the example below.
Starting from itemcol: 1, use height: 2 or height: 3 for as many consecutive columns as you'd like to have displayed in a large size. See step 2 in the example below.
The height property is measured as a line-height in the current font size set for the entire application (under Options > Display tab) and can be set to 1 (default), 2 or 3.
Use layout: card for the element that is type: item. See step 3 in the example below.
When the Klip encounters a column with height: 1 after a consecutive series of columns with height: 2 or height: 3, it will start putting the content of that and the following columns in rows within one single column. See the screenshot under step 3.
The style definitions for each column (itemcol: x) are applied in the same way in this layout as they are in the default layout. This means that, for example, you cannot mix type: text (default) and type: number or different format settings for values in the same itemcol. However, this also means that, each itemcol with height: 1 that is displayed as a row in the last "column" of each item can be set with its own styles. See step 4 in the example below.
If you want to use different formats in the same column, you must make sure that the data includes the formatting by the time it reaches the <style> block to be parsed using type: text (default). This can be done either by ensuring that the data source itself has the formatting included or by using JavaScript in the Klip to add any formatting and return the values as Strings.

Example

Let's say that your data source looks like this:


<row>
    <col1>1</col1>
    <col2>2</col2>
    <col3>3</col3>
    <col4>4</col4>
    <col5>5</col5>
</row>
...

1. First, write a basic Klip.

We'll start with a very basic example Klip that includes a static data source in its <contentsource> for this example.

2. Add height: 3 to the first 2 columns, and leave the rest of the columns as they are, which means they are the default height: 1:


<style>
    col1 {
        itemcol: 1;
        height: 3;
    }
    col2 {
        itemcol: 2;
        height: 3;
    }
</style>

Save and reload the Klip.

Note how the 5 columns are side by side just like any other regular Klip at this point.

3. Add layout: card for the element that is type: item:


row {
    type: item;
    definition: all;
    layout: card;
}

When the Klip is saved and reloaded, it should look like this:

Now the last 3 columns are displayed as 3 rows within each item.

4. To see how each itemcol in the last column can have its own style, try adding these two lines to col3, col4 or col5, then save and reload the Klip:


type: number;
format: "decimal(2)";
emphasis: strong;

The data in the itemcol in which the above has been added will be treated as a number and displayed in bold with 2 decimal places, while others are unchanged from before. In that column, note that the data that is originally text (e.g. "three", "four", "five") is displayed as 0.00 when using type: number.

Here's what the Klip would look like if you added the settings to col5:

What's next?

As demonstrated in step 4 above, you can apply formatting to any column, just like Klips whose columns are displayed side by side. Refer to the relevant how-to articles to find out how to format values in a given column.

Here's a list of some of the formats that our users have asked about:

To leave a comment, you must sign in or register (it's free).


Comment Type:
Title:
Comment: