How to Build Value Components


Component Value
Overview Use a simple visualization to display a primary value and a secondary value. Ideal for single KPIs, such as a stock price or a ratio.
Key Features Apply indicators to one or both of the values displayed in the component
Add context to values using the prefix and suffix fields


The Value component allows you to display data using two values: the primary and secondary value. This component is similar to the Table component, and supports many of the same formats such as mini-charts, images, hyperlinks, and indicators. Here is an example of this component:

Component Structure

Here is the structure of the Value component.

Key Features

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


Applying indicators to one or both the values in the Value component can help provide context for the value being displayed. You can change the color of the value, or assign an icon to the value using the Indicators panel.

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.

Use the prefix and suffix fields to add context

The prefix and suffix fields allow you to add context to the “raw” value without interfering with indicator conditions or formula elements. For instance, if you want to show a ratio, then use the data panel to show the value (eg: 2.5), and the suffix field to demonstrate the value is part of a ratio by adding : 1 to the suffix field.

To use the prefix / suffix fields

  1. Select the component to which you want to assign a prefix / suffix.
  2. Open the Properties panel.
  3. Type text in the appropriate field.

Value Component Source Code

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

         "type": "simple_value",
         "displayName": "Value",
         "fmtArgs": {},
         "vis": true,
         "components": [
               "type": "label",
               "displayName": "Primary Value",
               "size": 2,
               "fmt": "txt",
               "fmtArgs": {},
               "role": "primary",
               "vis": true,
               "formulas": [],
               "data": [
               "font_style": "bold",
               "font_colour": "cx-color_444"
               "type": "label",
               "displayName": "Secondary Value",
               "size": 1,
               "fmtArgs": {},
               "role": "secondary",
               "vis": true,
               "formulas": [],
               "data": [],
               "font_style": "bold",
               "font_colour": "cx-color_444"

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.


Our community forum is coming soon.

Advanced Training Guides

Advanced training for the PowerDialer for Salesforce.

Have questions?

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

(866) 593-2807

Mon-Fri 6-7 MST

Back To Top

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