Use Case: Adding a Chart to a Dashboard

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

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

2. Enter panelDashboard in the Property ID.

3. Click Save.

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

1. Drag and drop an Initializer component onto your canvas. Place your Initializer inside the Panel.

2. Enter initStart in the Property ID and Label Text.

3. Select New Submission from the Trigger Type.

4. In the Outputs table, enter the following:

   1. Property ID: enter pluginGetSubmissions.

   2. Type: enter trigger.

   3. Value: enter GO.

      

5. Click Save.

This is the first of 4 Hidden components in this configuration. It houses the module ID of your source module. You can pull 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. Place your Hidden component below the Initializer.

2. Enter moduleId in the Property ID and Label Text.

3. Enter 5eb482f3c8368d0210c74cbf in the Default Value field. This is the source module's module ID.

4. Click Save.

This Plug-In connects your module to the outside world. This connection uses an application programming interface (API). You'll use this Plug-In to get submissions to display in your dashboard.

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

2. Enter pluginGetSubmissions in the Property ID and Label Text.

3. Select Manual from the Trigger Type.

4. Enter dwfProcessSubmissions in the Post Trigger field. This tells dwfProcessSubmissions to fire as soon as the Plug-In gets submissions.

5. Complete the Inputs table as follows:

   Property ID	Mapping
   moduleId	moduleId
   'firstName,middleName,lastName,email,dateOfBirth'	fields
   'investmentAmount,transferringBank'	fields

   The first row references the module ID stored in the moduleId Hidden component. The second and third rows show which fields you're pulling into the dashboard. Here, we'll pull the firstName, middleName, lastName, email, dateOfBirth, investmentAmount, and transferringBank fields. The values entered in the Mapping column (moduleId and fields) are native values recognized by the Unqork Designer Platform. Add these as shown.

   

6. Select List Submissions for Dashboard from the Internal Services drop-down. /fbu/uapi/system/GetSubmissions appears in the Data Source URL field.

   

7. Click Save.

This is the second Hidden component in this configuration. It houses the submission ID.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Plug-In.

2. Enter submissionId in the Property ID and Label Text.

3. Click the Save button.

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

1. Drag and drop a ViewGrid component onto the canvas. Place your ViewGrid below the submissionId Hidden component.

2. Enter View Grid in the Label.

3. Enter gridView in the Property Name.

4. Enter View in the Action field.

5. Enter View in the Event field.

6. In the Inputs table, enter the following:

   1. ID: enter pluginGetSubmissions.

   2. Required: select Yes.

7. In the Outputs table, enter the following:

   1. ID: enter submissionId.

   2. Mapping: enter id.

8. In the Display table, enter the following:

   ID	Formula	Heading
   firstName		First Name
   lastName		Last Name
   email		Email
   investmentAmount		Investment Amount
   transferringBank		Transferring Bank

   

9. Click the Save button.

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

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

2. Enter ruleButtons in the Property ID and Label Text.

3. In the Inputs table, enter the following:

   Property ID	Type	Required	Silent
   buttonClick	exact	No (not checked)	No (not checked)
   moduleId	exact	No (not checked)	Yes (checked)
   submissionId	exact	No (not checked)	Yes (checked)

   Every row in the Inputs table gets an associated column in the Micro Decisions table. If an input doesn't have a value in its Micro Decisions 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 micro decision. 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
   panelDashboard	pageOpen

5. In the Micro Decisions table, enter the following:

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

                                                                                                                

• 6.Click Save.

This Hidden component houses the value submissions. This Hidden component acts as a replica of pluginGetSubmissions. You'll reference the submissions Hidden component in the Data Workflows that you'll create next.

1. Drag and drop a Hidden component onto your canvas. Place it below panelDashboard.

2. Enter submissions in the Property ID and Label Text.

3. Click Save.

This is your first Data Workflow. Here, you'll create a replica of pluginGetSubmissions, housed in the submissions Hidden component. You'll reference the submissions Hidden component in your Data Workflows.

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

2. Enter dwfProcessSubmissions in the Label and Property Name fields.

3. Scroll down and select Manual from the Trigger Type drop-down. 

   

Configure the Input Data Operator

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

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

   Setting	Selection
   Category	Input
   Component	pluginGetSubmissions
   Required	Yes
   Source	Default

Configure the Output Data Operator

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

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

   Setting	Selection
   Category	Output
   Component	submissions
   Action	value

3. Drag a connector from the output (right-hand side) port of the Input operator, to the input (left-hand side) port of the Output operator.

4. Click the Save button.

This Hidden component houses 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. Place your Hidden component below the dwfProcessSubmissions Data Workflow.

2. Enter hiddenKpi in the Property ID and Label Text.

3. Click Save.

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. Place this Data Workflow below the hiddenKpi Hidden component.

2. Enter dwfKpi in the Label and Property Name.

3. Scroll down and select Watch from the Trigger Type drop-down.

   

Configure the Input Data Operator

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

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

   Setting	Selection
   Category	Input
   Component	submissions
   Required	Yes
   Source	Default

Configure the Size Data Operator

The Size operator counts the structure that it’s attached to. 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. Drag a connector from the output (right-hand side) port of the Input operator, to the input (left-hand side) port of the Size operator.

Configure the Output Data Operator

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

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

   Setting	Selection
   Category	Output
   Component	hiddenKpi
   Action	value

3. Drag a connector from the output (right-hand side) port of the Size operator, to the input (left-hand side) port of the Output operator.

4. Click Save.

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. Place it at the top of the canvas, above panelDashboard.

2. Enter kpiAccounts in the Label and Property Name fields.

3. Enter Number of Accounts in the KPI Title field. This title appears above the KPI value on the dashboard.

4. Enter hiddenKpi in the Inputs table.

   

5. Click the Save button.