How to: Add a Chart to a Dashboard

Preconfiguration

Configure the Panel Component

This Panel component acts as a container for the components that follow.

1. In the Module Builder, drag and drop a Panel component onto your canvas.

2. In the Property ID  field, enter panelDashboard.

3. Click Save Component.

Configure the Initializer Component

This Initializer component triggers the Plug-In components that you'll set up later.

1. Drag and drop an Initializer component inside your Panel component.

2. In the Property ID and Canvas Label Text fields, enter initStart.

3. From the Trigger Type drop-down, select New Submission.

4. In the Outputs table, enter the following:

   Property ID	Type	Value
   pluginGetSubmissions	trigger	GO

   

5. Click Save Component.

Configure the Hidden Component

This is the first of four Hidden components in this configuration. It stores the module ID of your source module. You can retrieve the module ID from the source module’s hyperlink as follows: https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit.

1. Drag and drop a Hidden component onto your canvas, placing it below your Initializer component.

2. In the Property ID and Label Text fields, enter moduleId.

3. Set Store Data in Database to (ON).

4. In the Default Value field, enter 5eb482f3c8368d0210c74cbf. This is the source module's module ID.

5. Click Save Component.

Configure the Plug-In Component

This Plug-In component uses an API to retrieve submissions and display them in your dashboard.

1. Drag and drop a Plug-In component onto your canvas, placing it below the moduleId Hidden component.

2. In the Property ID and Canvas Label Text fields, enter pluginGetSubmissions.

3. From the Internal Services drop-down, select List Submissions for Dashboard.

4. In the Inputs table, enter the following:

   #	Property ID	Mapping
   1	moduleId	moduleId
   2	'firstName,middleName,lastName,email,dateOfBirth'	fields
   3	'investmentAmount,transferringBank'	fields

   The first row references the module ID stored in the moduleId Hidden component. The second and third rows determine which fields you're displaying in the dashboard. Here, you’ll retrieve the firstName, middleName, lastName, email, dateOfBirth, investmentAmount, and transferringBank fields. The values entered in the Mapping column (moduleId and fields) are native values to Unqork.

   

5. In the Post Trigger field, enter dwfProcessSubmissions. Doing so tells the dwfProcessSubmissions Data Workflow component you’ll add later to fire as soon as the Plug-In component retrieves submissions.

6. Click Save Component.

Configure the Hidden Component

The second Hidden component stores the submission ID.

1. Drag and drop a Hidden component onto your canvas, placing it below your Plug-In component.

2. In the Property ID and Label Text fields, enter submissionId.

3. Set Store Data in Database to (ON).

4. Click Save Component.

Configure the ViewGrid Component

Next, let's add a ViewGrid component to display your dashboard.

1. Drag and drop a ViewGrid component onto the canvas, placing it below the submissionId Hidden component.

2. In the Property ID field, enter gridView.

3. In the Canvas Label Text field, enter View Grid.

4. In the Inputs table, enter the following:

   #	Source	Required
   1	pluginGetSubmissions	(checked)

5. In the Outputs table, enter the following:

   #	Source	Mapping
   1	submissionId	id

6. In the Display table, enter the following:

   #	ID	Formula	Heading
   1	firstName		First Name
   2	lastName		Last Name
   3	email		Email
   4	investmentAmount		Investment Amount
   5	transferringBank		Transferring Bank

   

7. In the Action field, enter View.

8. In the Event field, enter View.

9. Click Save Component.

Configure the Decisions Component

This Decisions component provides the trigger for your dashboard's View button.

1. Drag and drop a Decisions component onto the canvas, placing it below your ViewGrid component.

2. In the Property ID and Canvas Label Text fields, enter ruleButtons.

3. In the Inputs table, enter the following:

   #	Property ID	Type	Required	Silent
   1	buttonClick	exact	(unchecked)	(unchecked)
   2	moduleId	exact	(unchecked)	(checked)
   3	submissionId	exact	(unchecked)	(checked)

   Every row in the Inputs table gets an associated column in the Conditionals table. If an input does not have a value in its Conditionals column, Unqork sets it to silent. In the next steps, you won't add values to the moduleId and submissionId columns. You'll only be using these inputs in the panelDashboard_pageOpen conditional. So, you can mark these values as silent, or let Unqork do it for you.

4. In the Outputs table, enter the following:

   #	Property ID	Type
   1	panelDashboard	pageOpen

5. In the Conditionals table, enter the following:

   #	buttonClick	moduleId	submissionId	panelDashboard_pageOpen
   1	View			=concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId)

   

6. Click Save Component.

Configure the Hidden Component

This Hidden component stores the value submissions, acting as a replica of the pluginGetSubmissions Plug-In component. You'll reference the submissions Hidden component in the Data Workflow components that you'll create next.

1. Drag and drop a Hidden component onto your canvas, placing it below the panelDashboard Panel component.

2. In the Property ID and Label Text fields, enter submissions.

3. Set Store Data in Database to (ON).

4. Click Save Component.

Configure the Data Workflow Component

This Data Workflow creates a replica of the pluginGetSubmissions Plug-In component, stored in the submissions Hidden component.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your submissions Hidden component.

2. In the Property ID and Canvas Label Text fields, enter dwfProcessSubmissions.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	pluginGetSubmissions
   Required	Yes
   Source	Default

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Output
   Component	submissions
   Action	value

3. Connect the output port (right) of the Input operator to the input port (left) of the Output operator.

   

4. Click Save Component.

Configure the Hidden Component

This Hidden component stores the KPI count that you'll create in your dwfKPI Data Workflow. You'll use this value in your KPI widget.

1. Drag and drop a Hidden component onto your canvas, placing it below the dwfProcessSubmissions Data Workflow component.

2. In the Property ID and Label Text fields, enter hiddenKpi.

3. Set Store Data in Database to (ON).

4. Click Save Component.

Configure the Data Workflow Component

Next, you’ll add your second Data Workflow component. This component counts your submissions using a Size operator. The result of your calculation displays in your KPI dashboard widget.

1. Drag and drop a Data Workflow component onto your canvas, placing it below the hiddenKpi Hidden component.

2. In the Property ID and Canvas Label Text fields, enter dwfKpi.

3. Set the Trigger Type as Watch.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	submissions
   Required	Yes
   Source	Default

Configure the Size Operator

The Size operator counts the structure where it’s attached. In this example, it'll count the number of arrays (values) in the Input submissions.

1. Drag and drop a Size operator onto your Data Workflow canvas. You don't need any configuration for this operator.

2. Connect the output port (right) of the Input operator to the input port (left) of the Size operator.

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Output
   Component	hiddenKpi
   Action	value

3. Connect the output port (right) of the Size operator to the input port (left) of the Output operator.

   

4. Click Save Component.

Configure the KPI Component

Next, you’ll add a KPI component to display the number of accounts on your dashboard.

1. Drag and drop a KPI component onto your canvas, placing it above the panelDashboard Panel component.

2. In the Property ID and Label Text fields, enter kpiAccounts.

3. In the KPI Title field, enter Number of Accounts. This title displays above the KPI value on the dashboard.

4. In the Inputs table, enter hiddenKpi.

   

5. Click Save Component.

Configuration

Configure the Hidden Component

This Hidden component stores the pie chart data that your dwfCreatePieChart Data Workflow outputs. You'll use this data in your Chart component.

1. Drag and drop a Hidden component onto your canvas, placing it below the dwfKPI Data Workflow component.

2. In the Property ID and Label Text fields, enter pieChartData.

3. Set Store Data in Database to (ON).

4. Click Save Component.

Configure the Data Workflow Component

This Data Workflow component will clean, filter, and combine your transferringBank data, then output it to pieChartData Hidden component.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your pieChartData Hidden component.

2. In the Property ID and Canvas Label Text fields, enter dwfCreatePieChart.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	submissions
   Required	Yes
   Source	Default

Configure the Clean Keys Operator

The Clean Keys operator lets you fill in data that's missing, empty, or both. The values from the transferringBank data are what you'll display in your Chart component. So, you’ll use a Clean Keys operator to ensure any missing or empty values do not affect the data visualization. Here, you're filling in missing or empty values with '__NULL__'.

1. Drag and drop a Clean Keys operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Clean Keys
   Label
   Fill If	Missing or Empty
   Keys	transferringBank
   Fill With	'__NULL__'

3. Connect the output port (right) of the Input operator to the input port (left) of the Clean Keys operator.

Configure the Filter Operator

1. Drag and drop a Filter operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Filter
   Label
   Do Not Sanitize Formula	(checked)
   Expression	transferringBank='__NULL__'

   Here, you're filtering out any '__NULL__' values that the Clean Keys operator assigned. That way, no missing or empty transferringBank values display in your Chart component.

3. Connect the output port (right) of the Clean Keys operator to the input port (left) of the Filter operator.

Configure the Aggregate Operator

The Aggregate operator summarizes all the transferringBank values after the Filter operator clears the '__NULL__' values.

1. Drag and drop an Aggregate operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Aggregate By
   Label
   Aggregation Type	Count By
   Join Group Keys?	No
   Group Key	transferringBank
   Value Key	count

   Here, you're using the Count By Aggregation Type and transferringBank Group Key. These settings tell the operator to look at your transferringBank values and count unique values. In this example, how many Bank X and Bank Y values.

3. Connect the lower output port (right) of the Filter operator to the input port (left) of the Aggregate operator.

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Output
   Component	pieChartData
   Action	value

3. Connect the output port (right) of the Aggregate operator to the input port (left) of the Output operator.

   

4. Click Save Component.

Update the Data Workflow Component

Next, update your dwfProcessSubmissions Data Workflow component, so it can trigger your dwfCreatePieChart Data Workflow component.

1. Open the dwfProcessSubmissions Data Workflow component settings drawer.

Configure the Create Value Operator

1. Drag and drop a Create Value operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Selection
   Category	Create Value
   Label
   Expression/Value	'GO'

3. Connect the output port (right) of the Input operator to the argument port (top) of the Create Value operator.

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Selection
   Category	Output
   Component	dwfCreatePieChart
   Action	trigger

3. Connect the output port (right) of the Create Value operator to the input port (left) of the Output operator.

   

4. Click Save Component.

Configure the Chart Component

Lastly, you'll add a Chart component to display the pieChartData Hidden component’s data as a pie chart on your dashboard.

1. Drag and drop a Chart component onto your canvas, placing it above panelDashboard Panel component.

2. In the Property ID and Label Text fields, enter chartBank.

3. In the Inputs table, enter the following:

   ID	Label	Chart Type	Categories	Values	Colors	Size	Inner Size
   pieChartData	Amounts	pie	transferringBank	count		100%

   You can also create donut charts using the pie chart type. Use the Inner Size column to adjust the size of the donut cutout, for example, 50%.

   

4. Navigate to the component’s Advanced settings.

5. Set Show Legend to (ON). Doing so adds a legend to your Chart.

6. Click Save Component.

7. Save your module.

Here's how your completed dashboard looks in the Module Builder:

Here's how your completed dashboard with a functioning KPI and pie chart looks in Express View: