Using Icons On Reports
  • Updated on 13 Mar 2019
  • 4 minutes to read
  • Print
  • Dark
    Light

Using Icons On Reports

  • Print
  • Dark
    Light

This tutorial demonstrates how to use icons in Reports . In Decisions 4.0 it is possible not only apply Color Rules to Report columns and rows but also use icons for such purposes.

Example:

In this example we are going to style Accounts Report rows and columns with icons.
For this example we created a simple Report and Page .
2018-02-08_133208-1024x519.png

Our Accounts Report looks as following…
To learn how to build Reports , please click here .
2018-02-08_133349-1024x519.png

Our Page just has Accounts Report .
Learn how to build your first Page and Add Page to Specific Folder .
In the Designer Folder we click Create Flow on Folder Actions Panel.
In the resulting window we name the Flow . For this Flow we are going to use a specific Flow Behavior
2018-02-08_133520-1024x519.png

From the Behavior drop-down we select Icon Flow option.

2018-02-08_133612-1024x519.png

In the Flow Designer if we click on End Step we should be able to see that this Flow has to output Icon (ImageInfo) data.
2018-02-08_133647-1024x519.png

For this example we are going to build this Flow to output different icon forCurrent User .
To do so, we are going to need Email Address input. We are going to define this Flow input on theStart Step . Select Start Step and under Flow Input Data click Show Editor. In the Data Definition window we create ‘emailAddress ’ string input. Then, we Close Data Definition dialog.
2018-02-08_133728-1024x519.png

Next, we add Create Data Step from Favorite Steps category.
2018-02-08_133744-1024x519.png

On the Create Data Step we locate Data Definitions and click Show Editor .
2018-02-08_133756-1024x519.png

In the Data Definitions we are going to create Icon data. We provide the definition with Name and use All/Search helper for Type .  In the resulting window we search and pick ImageInfo type. When Icon data is defined we can close Data Definitions window.
2018-02-08_133833-1024x519.png

Next, we add String Equals – Case Insensitive step from All Steps [Catalog] > Data > Text category.
2018-02-08_133936-1024x519.png

For value1 input to String Equals step we Select Value of the**‘email Address’** Flow input.
2018-02-08_133956-1024x519.png

For value2 we Select Value of Flow Data > Current Account > Email Address.
2018-02-08_134135-1024x519.png

Then, on True outcome from String Equals we add Mapping Step from All Steps [Catalog] > Data category.
2018-02-08_134253-1024x519.png

On the Mapping Step settings we locate Icon data and define Constant image. This image will indicateCurrent User on Accounts Report.
2018-02-08_134338-1024x519.png

On the False outcome from String Equals we add Mapping Step as well and define different Constant Image . This image will be set for all other accounts on the Accounts Report.
Finally we connect outcome paths from both Mapping Steps to the End Step in our Flow .
Then, on the End Step we locate Icon inputs and using Select Value Mapping Type we Pick our Icon data that we defined in Create Data step.
2018-02-08_134644-1024x519.png

This completes our Icon Flow . We can save the Flow and close Flow Designer.
2018-02-08_134720-1024x519.png

Back in the Designer Folder we locate our Report and edit it.
2018-02-08_134742-1024x519.png

In the Report Designer we expand Colors and Icon section and click Add New under Colors and Icon Rules setting.
2018-02-08_134811-1024x519.png

In the resulting window we locate Rule Source drop-down and select Icon Flow.
2018-02-08_134844-1024x519.png

Then, using Entity Picker we pick our Flow that we created previously in this tutorial.
2018-02-08_134859-1024x519.png

Our Icon Flow has an ‘emailAddress’ input. We are going to bind our Report column to the Flow input. Click edit emailAddress in Rule/Flow Inputs box.
2018-02-08_134912-1024x519.png

In the resulting window we pick email_address column and click Ok .
2018-02-08_134944-1024x519.png

This completes our Icon Flow setup.
2018-02-08_134958-1024x519.png

Next, we need to adjust Report Grid View for our Icons to show up. We expand Grid View section on Report settings. From Grid View drop-down we select Expanded
Expanded Grid Type gives us additional options. From the Icon Type drop-down we select Image .
2018-02-08_135026-1024x519.png

And our Report displays Icons for rows…
Note: administrator icon is different because we are currently logged in as administrator.
2018-02-08_135146-1024x519.png

Also, we can set icons for an individual columns… In this example we are going to use the same Icon Flow to set icons for Account Id column.
We Edit Account Id column on the Report
2018-02-08_135221-1024x519.png

In the resulting pop-up window we locate Color Rules settings and click Add New.
2018-02-08_135239-1024x519.png

The process of definingColor Rules for the column is exactly the same as for the Rows
2018-02-08_135329-1024x519.png

And our Account Id column shows Icons
This completes our Report . We can save it and close Report Designer.
2018-02-08_135351-1024x519.png

Our Page with Accounts Report looks as following…
2018-02-08_135512-1024x519.png

If we log in as different account and navigate to Accounts Page , we can see that different Icon indicates the Account that is currently logged in.
2018-02-08_135943-1024x519.png

Was this article helpful?