Achievement Card

This is a Beta Release feature.  Configuration and functionality may be modified before formal release.

The Achievement Card section shows a value and the achievement progress towards a goal. The display of the Achievement Card is configurable when the section is added to a template, dashboard, or presentation.

To include an Achievement Card section in your solution:

1. On a template tab, dashboard or presentation, from Design mode, click Add Section.
2. Select the Category of the Achievement Card section (this is configurable but is typically: Visualizations).
3. Click on the Achievement Card option to add it to the layout.
4. In Configure mode, click on the settings gear in the top right corner of the section to open the Settings dialog.
5. Modify the settings to define the behavior of the Achievement Card.
   • Section:
     • Title: A section title is optional. If there is no title, the achievement card contents will fill the full section real estate. Toggle between a text value or an expression resulting in the title by clicking on the text/expression icon at the right of the field.
   • Display:
     • Caption: Description of the value being displayed. Toggle between a text value or an expression resulting in the description by clicking on the text/expression icon at the right of the field.
     • Value Expression: The value displayed on the achievement card. This value can be text or numeric. The gray expression icon at the right of this settings field indicates that the entry must be an expression.
     • Progress Expression: A value between 0 and 100 representing the percentage progress achieved against a target. The gray expression icon at the right of this settings field indicates that the entry must be an expression. Note: A decimal value less than zero is not accepted in this field. If your expression divides two numbers to determine a percentage, you must multiply it by 100 to provide a value between 0 and 100 for this setting (e.g., .75 is not good, 75 is good).
     • Font Awesome Icon: The icon displayed on the achievement card. The icons that are accepted into this setting are the free icons from the Font Awesome library. Toggle between a text value or an expression resulting in the icon name by clicking on the text/expression icon at the right of the field.
     • Left Sub-caption: A left sub-caption is optional. It can be used to provide additional detail about the achievement value. Toggle between a text value or an expression resulting in the left sub-caption by clicking on the text/expression icon at the right of the field.
     • Right Sub-caption: A right sub-caption is optional. It can be used to provide additional detail about the achievement value. Toggle between a text value or an expression resulting in the right sub-caption by clicking on the text/expression icon at the right of the field.
     • Highlight Color: Color selection panel that determines the color of the achievement card components selected in the Apply Highlight Color field. At the bottom of the panel, toggle between a text value or an expression resulting in the hexadecimal code by clicking on the text/expression icon at the right of the field.
     • Apply Highlight Color: A multi-select pick list with options for Caption, Icon, Progress Bar, Left Sub-caption, Right Sub-caption. The options selected in this setting will use the color definition from the Highlight Color setting.
     • Accent Color: Color selection panel that determines the color of the achievement card components selected in the Apply Accent Color field. At the bottom of the panel, toggle between a text value or an expression resulting in the hexadecimal code by clicking on the text/expression icon at the right of the field.
     • Apply Accent Color: A multi-select pick list with options for Caption, Icon, Progress Bar, Left Sub-caption, Right Sub-caption. The options selected in this setting will use the color definition from the Accent Color setting.
6. Save the settings.

Note: There is no validation within the fields that accept expressions. If the expression is not entered correctly, the section will display an error on the instance, dashboard or presentation.

If the section is being configured on a template, publish and create an instance to view the customized achievement card. If it’s being configured on a dashboard or presentation, click Stop Editing to view the rendered section.

Prerequisite

The Achievement Card section must be registered in the App. Please contact your Shibumi Account team to complete the registration.