Using Icons On Reports

Last Updated: 04/06/2018 Introduced in Version: 4.0

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.

Our Accounts Report looks as following…

To learn how to build Reports, please click here.

Our Page just has Accounts Report.

Learn how to build your first Portal 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

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

 

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.

For this example we are going to build this Flow to output different icon for Current User.

To do so, we are going to need Email Address input. We are going to define this Flow input on the Start 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.

 

Next, we add Create Data Step from Favorite Steps category.

On the Create Data Step we locate Data Definitions and click Show Editor.

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.

 

 

Next, we add String Equals – Case Insensitive step from All Steps [Catalog] > Data > Text category.

For value1 input to String Equals step we Select Value of the ‘email Address’ Flow input.

For value2 we Select Value of Flow Data > Current Account > Email Address.

Then, on True outcome from String Equals we add Mapping Step from All Steps [Catalog] > Data category.

On the Mapping Step settings we locate Icon data and define Constant image. This image will indicate Current User on Accounts Report.

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.

This completes our Icon Flow. We can save the Flow and close Flow Designer.

Back in the Designer Folder we locate our Report and edit it.

In the Report Designer we expand Colors and Icon section and click Add New under Colors and Icon Rules setting.

In the resulting window we locate Rule Source drop-down and select Icon Flow.

Then, using Entity Picker we pick our Flow that we created previously in this tutorial.

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.

In the resulting window we pick email_address column and click Ok.

This completes our Icon Flow setup.

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.

 

And our Report displays Icons for rows…

Note: administrator icon is different because we are currently logged in as administrator.

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

In the resulting pop-up window we locate Color Rules settings and click Add New.

The process of defining Color Rules for the column is exactly the same as for the Rows

And our Account Id column shows Icons

This completes our Report. We can save it and close Report Designer.

Our Page with Accounts Report looks as following…

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.

 

Additional Resources