Add Interaction Between the Form and the Historical Data
In this section you will learn how to enhance the user experience by adding interactivity to your application. For that, you build a flow to query the data from the back-end storage - the report.
Update a Form Value Based on Another Value
To update the spot price of the EQ Option Pricer form based on the as-of-date
- Switch the UI to the Flow Editor mode.
- Create a new flow and name it Spot from Cube.
- Copy and import the following code into your newly created flow. The flow displayed in fig. 74 is created.
[
{
"id": "3e4d7991.f7b2c6",
"type": "tab",
"label": "Spot from Cube",
"disabled": false,
"info": ""
},
{
"id": "d1e6fb9e.52d568",
"type": "template",
"z": "3e4d7991.f7b2c6",
"name": "Cube query template",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "[\n {\n \"key\": \"Date\",\n \"value\": \"{{payload.value.as_of_date}}\"\n }\n]",
"output": "json",
"x": 453.5,
"y": 213,
"wires": [
[
"4e67ecf0.a1b4a4",
"421ac87e.bc1c78"
]
]
},
{
"id": "421ac87e.bc1c78",
"type": "csm-report",
"z": "3e4d7991.f7b2c6",
"name": "Quandl",
"action": "find",
"server": "c474eecf.58f2a",
"report": "Quandl-FB",
"noerr": 0,
"primaryKey": "",
"idColumn": "",
"columnDataTypes": "",
"columnNames": "",
"columnSeperator": "",
"decimalSeperator": ".",
"vectorSeperator": "|",
"x": 640,
"y": 280,
"wires": [
[
"b774d19b.08a77",
"f7c9cda3.073dc"
]
]
},
{
"id": "729939b3.f05138",
"type": "template",
"z": "3e4d7991.f7b2c6",
"name": "Form 1 template",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "{\n \"strike\": {{value.strike}},\n \"spot\": {{value.spot}},\n \"as_of_date\": \"{{value.as_of_date}}\",\n \"maturity_date\": \"{{value.maturity_date}}\",\n \"type\": \"{{value.type}}\",\n \"equity\": \"{{value.equity}}\",\n \"comment\": \"{{value.comment}}\"\n}",
"output": "json",
"x": 760,
"y": 460,
"wires": [
[
"fb1c7254.b1ddb",
"5de8e07e.a7124"
]
]
},
{
"id": "5de8e07e.a7124",
"type": "mb-notifier",
"z": "3e4d7991.f7b2c6",
"name": "spot_from_cube",
"x": 980,
"y": 540,
"wires": []
},
{
"id": "fb1c7254.b1ddb",
"type": "debug",
"z": "3e4d7991.f7b2c6",
"name": "",
"active": true,
"console": "false",
"complete": "payload",
"x": 990,
"y": 400,
"wires": []
},
{
"id": "b774d19b.08a77",
"type": "debug",
"z": "3e4d7991.f7b2c6",
"name": "",
"active": true,
"console": "false",
"complete": "true",
"x": 810,
"y": 220,
"wires": []
},
{
"id": "4e67ecf0.a1b4a4",
"type": "debug",
"z": "3e4d7991.f7b2c6",
"name": "",
"active": false,
"console": "false",
"complete": "true",
"x": 643.5,
"y": 153,
"wires": []
},
{
"id": "5481cc72.88f924",
"type": "mb-http-in",
"z": "3e4d7991.f7b2c6",
"name": "get_spot_from_cube",
"url": "/get_spot_from_cube",
"method": "post",
"swaggerDoc": "",
"x": 150,
"y": 180,
"wires": [
[
"13bdde66.c816a2"
]
]
},
{
"id": "13bdde66.c816a2",
"type": "function",
"z": "3e4d7991.f7b2c6",
"name": "",
"func": "msg.value = msg.payload.value\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 350,
"y": 300,
"wires": [
[
"d1e6fb9e.52d568"
]
]
},
{
"id": "6b5f2665.9d7348",
"type": "inject",
"z": "3e4d7991.f7b2c6",
"name": "",
"topic": "",
"payload": "",
"payloadType": "date",
"repeat": "",
"crontab": "",
"once": false,
"x": 100,
"y": 500,
"wires": [
[
"fd21cdd5.57056"
]
]
},
{
"id": "fd21cdd5.57056",
"type": "template",
"z": "3e4d7991.f7b2c6",
"name": "MB form payload",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "{\n \"value\": {\n \"strike\": 112,\n \"spot\": 180,\n \"maturity_date\": \"2019-04-25\",\n \"as_of_date\": \"2017-09-22\",\n \"type\": \"call\",\n \"equity\": \"FB\",\n \"comment\": \"this is my RFQ\"\n }\n}",
"output": "json",
"x": 190,
"y": 420,
"wires": [
[
"13bdde66.c816a2"
]
]
},
{
"id": "f7c9cda3.073dc",
"type": "function",
"z": "3e4d7991.f7b2c6",
"name": "",
"func": "msg.value.spot = msg.payload[0].Close;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 730,
"y": 360,
"wires": [
[
"729939b3.f05138"
]
]
},
{
"id": "c474eecf.58f2a",
"type": "csm-server-config",
"z": "",
"name": "",
"serviceId": "",
"url": "http://<raas-backend-hostname>/",
"loginname": "finastra",
"password": "198a1a7412a3",
"accessToken": ""
}
]
Fig. 74: The flow that queries the data from the back-end report.
- Edit the Quandl node. This is the node that sends the query to the back-end . Therefore, you must replace the
<raas-backend-hostname>token in the Server field, according to your deployment. - Deploy your updated flow. Feel free to explore its nodes and to test it by triggering the timestamp inject node. The result is displayed in the DEBUG panel as a JSON object, with an
msg.payloadattribute that stores the data in the same schema as the form. You will use the output spot_from_cube node to update the form. - Switch the UI to Link Editor mode.
- From the component toolbar, on the New tab, find and select the Spot from Cube component. This exposes the endpoints of the Spot from Cube flow that you previously created, allowing you to plug it into your application.
Fig. 75: Add the flow component that queries the report.
- Link Spot from Cube to EQ Option Pricer.
Fig. 76: Link the component that queries the data to the form component.
- Switch the UI to the Option Pricer dashboard. Change the As_of_date to test the interaction. The form’s Spot price updates with the Close value from the report. If it doesn’t update accordingly, see the solution from the Known issues section. You can check the value in the table too.
Fig. 77: Test the interactivity added to the form.
- Click the Price button of the form to retrieve the updated option price based on your updated form data.