Dashboard Designer (DD) and Visual Flow Creator (VFC) Integration

1. Introduction

In DD, you can use VFC as a data source to obtain data passed from VFC. For reference: How to configure flows in VFC as DD data sources.

2. Case Study

2.1 Passing Request Parameters from DD to VFC

After selecting VFC as the data source in DD, you can pass parameters when invoking the VFC flow. Follow these steps:

1. Choose VFC as the data source in DD;
2. Fill in key/value pairs in the query parameters (the following image shows 2 parameters: from and to, whose values are obtained from the built-in environment variables in DD):
    

2.2 Receiving Request Parameters in VFC

In the VFC workspace, add a function node to obtain the values of the request parameters using the following JavaScript code:

const reqParam = msg.req.query
let from = parseInt(reqParam.from[0])
let to = parseInt(reqParam.to[0])

2.3 Continuing to Call IoT Nodes to Retrieve IoT Time Series (TS) Data using "from" and "to"

After obtaining the from and to parameters passed from DD in VFC, you can use these parameters to call IoT nodes to retrieve TS data. Continue to add the following code in the function node from section 2.2:

from = new Date(from).toISOString()
to = new Date(to).toISOString()

msg.from = from
msg.to = to

return msg

With the above code, the obtained from and to values are passed as attributes to the msg object; thus, when using IoT-related nodes subsequently, VFC can directly recognize the corresponding attributes in the msg object to send requests.

The complete code screenshot for the function node is shown below:

2.4 Adding a "Read Timeseries" Node

Add a "read timeseries" node. The "Mode" of this node needs to be set to Interval; From and To should be left empty, as we have already assigned the from and to values as properties of msg in step 2.3, with VFC automatically reading those properties from msg: