InsideSales.com
InsideSales.com
InsideSales.com Menu

How to Build Table Components

Highlights

Component Table (Columns)
Overview The Table component is the most flexible visualization in Active Insights Dashboard and can be used to display raw values, mini-charts (like sparklines), indicator images, and more. Each column in the table can be customized to display data exactly how you want.
Key Features Apply indicators to any column Add a results row sub-component to summarize a column of data Use mini-charts to add visual elements to your table

Overview

The Table component is the most flexible visualization in Active Insights Dashboard, as it can be used to display values using a wide range of formats. You can use the Table component to display raw values, percentages, currencies, mini-charts like spark lines and bullet charts, images, hyperlinks, and indicators. Here is an example of table that uses a few of these features:

Component Structure

This is an example of the structure of the Table component with a custom results row.

Tip! Add extra columns to the Table using the buttons beside the Widget preview.

Key Features

This section provides examples of different ways to use the Table component.

Indicators

Applying indicators to any column in your Table component can help provide additional context for the value being displayed. You can use the Indicators panel to change the color of values, assign an icon to the value, or color the background of cells to create a heatmap.

To apply indicators

  1. Select the component to which you want to apply the indicators.
  2. Open the Indicators panel.
  3. Set up a predicate (eg: If x is greater than 1).
  4. Set up a reaction (eg: then change colour to green).
  5. Add multiple conditions to apply indicators for values in a variety of states.

Results Rows

Results rows can be used at the bottom of any column to provide additional insight. Results rows can use one of six mathematical functions (sum, average, count, min, max, median) or use a custom equation. The image below shows 3 results rows that use the Average function.

To add a results row (using the math options)

  1. Select the Column component to which you want to add a results row.
  2. Open the Properties panel.
  3. Select one of the math options from the Results Row menu.
A results row will be added to your column.

To add a result row (using the custom option)

  1. Select the Column component to which you want to add a results row.
  2. Open the Properties panel.
  3. Select the Custom option from the Results Row menu. A new sub-component is added to your column in the tree.
  4. Select the Results Row sub-component.
  5. Assign data to it as you would a column component.
  6. Optional: Apply indicators and adjust properties as needed.

Using the mini-chart format

The mini-chart format lets you show spark lines, spark bars, win/loss charts, and bullet charts in your table’s columns. It’s important to note that in order to use a series of value for use in the mini-chart format, they need to be formatted as a comma separated list. This can be accomplished using either the Array and Join functions or the Concat function. Learn more: Using the mini-chart format

Table component Source Code

You can use this Source Code to create multi-component Widgets.

  {
         "type": "table",
         "displayName": "Table",
         "fmtArgs": {},
         "vis": true,
         "components": [
            {
               "type": "table_col",
               "displayName": "Unnamed 1",
               "size": 1,
               "fmtArgs": {},
               "role": "tcol",
               "vis": true,
               "components": [
                  {
                     "type": "proxy",
                     "displayName": "Unnamed 1 Result",
                     "size": 1,
                     "fmtArgs": {},
                     "role": "result",
                     "vis": true,
                     "formulas": [],
                     "data": [],
                     "mixin": "label",
                     "font_style": "bold"
                  }
               ],
               "formulas": [],
               "data": [
                  []
               ],
               "resultFmt": "empty",
               "index": 0,
               "align": "left",
               "name": "Unnamed 1",
               "font_colour": "cx-color_444",
               "font_style": "bold"
            },
            {
               "type": "table_col",
               "displayName": "Unnamed 2",
               "size": 1,
               "fmtArgs": {},
               "role": "tcol",
               "vis": true,
               "components": [
                  {
                     "type": "proxy",
                     "displayName": "Unnamed 2 Result",
                     "size": 1,
                     "fmtArgs": {},
                     "role": "result",
                     "vis": true,
                     "formulas": [],
                     "data": [],
                     "mixin": "label",
                     "font_style": "bold"
                  }
               ],
               "formulas": [],
               "data": [],
               "resultFmt": "empty",
               "index": 1,
               "align": "left",
               "name": "Unnamed 2",
               "font_colour": "cx-color_444",
               "font_style": "bold"
            },
            {
               "type": "table_col",
               "displayName": "Unnamed 3",
               "size": 1,
               "fmtArgs": {},
               "role": "tcol",
               "vis": true,
               "components": [
                  {
                     "type": "proxy",
                     "displayName": "Unnamed 3 Result",
                     "size": 1,
                     "fmtArgs": {},
                     "role": "result",
                     "vis": true,
                     "formulas": [],
                     "data": [],
                     "mixin": "label",
                     "font_style": "bold"
                  }
               ],
               "formulas": [],
               "data": [],
               "resultFmt": "empty",
               "index": 2,
               "align": "left",
               "name": "Unnamed 3",
               "font_colour": "cx-color_444",
               "font_style": "bold"
            },
            {
               "type": "table_col",
               "displayName": "Unnamed 4",
               "size": 1,
               "fmtArgs": {},
               "role": "tcol",
               "vis": true,
               "components": [
                  {
                     "type": "proxy",
                     "displayName": "Unnamed 4 Result",
                     "size": 1,
                     "fmtArgs": {},
                     "role": "result",
                     "vis": true,
                     "formulas": [],
                     "data": [],
                     "mixin": "label",
                     "font_style": "bold"
                  }
               ],
               "formulas": [],
               "data": [],
               "resultFmt": "empty",
               "index": 3,
               "align": "left",
               "name": "Unnamed 4",
               "font_colour": "cx-color_444",
               "font_style": "bold"
            }
         ],
         "showHeader": true
      }

Learn more

Now that you know a bit about the Table component, check out these tutorials:


Important concepts

These articles provide essential information about Widget building that you can apply to your Inline Frame components:

Release Notes

Find our most recent release notes.

Forum

Our InsideSales.com community forum is coming soon.

Advanced Training Guides

Advanced training for the PowerDialer for Salesforce.

Have questions?

We're happy to help. An InsideSales.com expert is just a phone call away.

(866) 593-2807

Mon-Fri 6-7 MST

Back To Top

© 2004–2014 InsideSales.com, Inc. all rights reserved. Use of the InsideSales.com service and this Web site constitutes acceptance of our Terms of Use and Privacy Policy. InsideSales.com technology is protected by the following United States Patents: 8078605, 8325738, 8352389, 8510382, 8566419.