Build-a-Klip Tutorial: Phase Two

We’re going to build Phase Two of a Klip with multiple components:

Good job on your Klip, but it doesn’t look anything like the example. Let’s get to that.

Phase Two: Layout Grid

You can follow along with our video as well as our step-by-step guide.

It should look like this:



Click on the Klip’s menu and select Edit….
You’re now back in the Klip Editor.
In the example Klip, we have two sets of values side-by-side, with a line between them.
To get any kind of sophisticated layout, you need to use a component called a Layout Grid in your Klip.
A Layout Grid is a special component because you can place other components within it.
Drag and drop a Layout Grid component from the Components Palette to the Klip.
Your Klip should now have a Layout Grid component in it, with two rows and three columns.
First, let’s move your existing Label components into cells. Select a Label and use its blue grab handle to move the component to a cell.
Move the other Label. Your Klip should look something like this:
Let’s get that dividing line in there. Drag and drop the Separator Component from the Components Palette onto the Klip, in the middle cell, top row.
Use the Properties Panel of the Separator Component to change the Orientation from horizontal to vertical.
Looking at the Klip preview, you’ll note that the Separator only appears in the first row. What we want is for the Separator to span two rows.
What we need to do is use the Layout Panel, which is present for every component that is positioned within a cell of a Layout Grid component.
On the Layout Panel, under Row Span, set the cell to span 2 rows.
The Klip should now look like this:

The cell is clearly too wide. By default, Layout Grid component columns take equal portions of the space available to the Layout Grid. But on the Layout Panel, you can specify that a cell must have a specific width.
Let’s change the cell’s width to 20 pixels. Select Custom for the Cell Width property and enter “20” for the cell width.
Your Klip should now look like this:
Let’s get the other metrics into the Layout Grid.
The Klip Editor includes right-click context menus that make it easy to copy and paste components within a Klip.

Right click on Sessions and pick Copy.
Right click on the top-right cell and select Paste. Do the same thing, copying from the bottom-left cell and pasting to the bottom-right cell.
Let’s change the values for the copied components.
  • Click the top right Sessions in the Klip preview.
  • Click the Data Panel.
  • In the Formula Bar, change the value to “Pageviews / Session” and click Apply.
  • For the second new label, let’s put in a formula that calculates the number of pageviews per session and returns a single value. Select the copied Label component in the Klip Preview.
We want to divide the total number of pageviews by the total number of sessions.
Change the current vector from C2:C7 to D2:D7 by selecting those cells in the visualizer.
Then click “...” in the formula bar to continue the formula.
Click the Divided By button.
Then add another SUM function via the Insert function button and select the cells from C2 to C7.
Your Klip should now look like this:
This number is rounded up but we’d like to see 2 decimal places. While the value is selected, go to its Properties Panel and change its Decimal Places to .## (2).
Your Klip is now one step closer to looking like the example.
Save your work by using the Save command in the Save and Exit Menu.
This will save your current Klip and allow you to keep working on it.

Let's move along to Phase Three.

Klip Tutorials

  1. Introduction
  2. Introduction to the Build-a-Klip Tutorial
  3. Build-a-Klip Tutorial: Phase One
  4. Build-a-Klip Tutorial: Phase Two
  5. Build-a-Klip Tutorial: Phase Three
  6. Build-a-Klip Tutorial: Phase Four
  7. Build-a-Klip Tutorial: Phase Five
  8. Example - Revenue YTD Klip
  9. Example - Financial Performance YTD Klip
  10. Example - World News Klip
  11. Example - Bookings by Country Klip
  12. Example - Bookings QTD Klip
  13. Example - Stock Quotes Klip
  14. Example - Marketing Traffic Sources Klip
  15. Example - 75/20 Service Level - Today Klip
  16. Training Klip - Array, Slice, Reverse, If, and Trim Functions
  17. Training Klip - Sum, Average, and Count Functions
  18. Training Klip - Group and Groupby Functions
  19. Training Klip - Date, Datevalue, and Today Functions
  20. Training Klip - Replace function and image URLs
  21. Training Klip - Concat and Join Functions
  22. Common Bar/Line Chart scenarios: Example of using the LOOKUP function with a condition to align data
  23. Common Bar/Line Chart scenarios: Example of using the LOOKUP function to align data
  24. Common User Input Control scenarios: Displaying total boxes of fruit sold in the last three months
  25. Common User Input Control scenarios: Counting all tickets by quarter, by month, by weekday
  26. Common Table scenarios: Selecting start and end dates to display number of boxes sold by country
  27. Common Table scenarios: Sorting data to display the video with the highest number of views
  28. Common Pie Chart scenarios: Displaying total number of surveys as a percentage by country
  29. Common Pie Chart scenarios: Displaying numbers and percentages in a pie chart legend

Feedback and Knowledge Base