Create the CRUD Form

Add the Form Widget

To add the form widget on the board

  1. Switch the Oveview board to Design mode, and draw a frame on the top right area. This is the location where you will add a form that you will use to insert and update the data Financial Model Builder.
  2. On the components toolbar, find and select the Form component.
  3. Configure the form as follows:
    1. Title: keep the default title - Form 1
    2. In the Options section, select Schema.
    3. Copy and paste the following schema definition into the text area:
    {
  "title": "Edit Customer Rating",
  "type": "object",
  "properties": {
 "ID": {
   "type": "string",
   "maxLength": 20
 },
 "Customer": {
   "type": "string",
   "maxLength": 100
 },
 "Rating": {
   "type": "string",
   "enum": [
     "1 - Low Risk",
     "2 - Good Risk",
     "3 - Fair Risk",
     "4 - High Risk"
   ],
   "maxLength": 20
 }
  }
}
    1. In the Actions section, select Create actions, and enter the following three actions:
Display name Action name
Insert insert
Update update
Delete delete
Fig. 37: Configure the form used to send the CRUD requests.

Fig. 37: Configure the form used to send the CRUD requests.

  1. Go to Links and click to add a new link.
  2. Configure the link as follows:
    1. Source: select the Customer Rating table.
    2. Event: ON_DOUBLE_CLICK.
    3. Receiver: select the Form 1 form.
    4. Action: SET_VALUE
Fig. 38: Configure the form to be populated with data from the Customer Rating table, on double click.

Fig. 38: Configure the form to be populated with data from the Customer Rating table, on double click.

  1. Switch off the Design mode to visualize the form in the Overview board.
Fig. 39: The form for submitting the CRUD requests for the Exposure per Customer Rating App.

Fig. 39: The form for submitting the CRUD requests for the Exposure per Customer Rating App.

Orchestrate the Data Flow

FusionCreator App Builder allows you to orchestrate the data flow in your app with the Flow editor module.

With Flow Editor you wire together APIs using a visual editor in your browser. You use the built-in nodes and nodes that are available with Fusion UXP. You create flows by adding nodes to the dashboard and link them together. During a flow, a JSON message is passed to the nodes in succession. The message is modified by adding properties, or using the existing properties to perform queries, and accessing other REST APIs. You start with an empty flow. Read more about the Flow editor in the FusionCreator App Builder documentation.

To create the flow in Flow editor

  1. Open the Tools hub and click Flow editor.
  2. Create a new flow. You can leave the default name: Flow 1.
  3. From the Flow Menu select Import > Clipboard.
  4. Copy the following code, and paste it into the text area of the Import nodes window.
[
    {
        "id": "dc725ee7.0c353",
        "type": "mb-http-out",
        "z": "f7dfd3b3.db973",
        "name": "InsertOUT",
        "x": 670,
        "y": 420,
        "wires": []
    },
    {
        "id": "30502fc5.b2274",
        "type": "cube-insert-update",
        "z": "f7dfd3b3.db973",
        "default": true,
        "insertUpdateRowsInCube_id": "Rating",
        "insertUpdateRowsInCube_idType": "str",
        "insertUpdateRowsInCube_body": "",
        "insertUpdateRowsInCube_bodyType": "pay",
        "name": "",
        "x": 470,
        "y": 360,
        "wires": [
            [
                "dc725ee7.0c353"
            ]
        ]
    },
    {
        "id": "86b19ff1.dc82a",
        "type": "function",
        "z": "f7dfd3b3.db973",
        "name": "Payload",
        "func": "var data = {\n\trows: [msg.payload.value]\n}\ndata.rows[0].ID = ( getMaxID(msg.payload.rows) + 1).toString();\nmsg.payload = data;\n\nreturn msg;\n\nfunction getMaxID(rows){\n\tvar maxID = -1;\n\tfor(var i  = 0 ; i < rows.length ; i++){\n\t\tvar currentID = parseInt(rows[i].ID);\n\t\tif(!isNaN(currentID) && currentID > maxID){\n\t\t\tmaxID = currentID;\n\t\t}\n\t}\n\treturn maxID > -1 ? maxID : 0;\n}\n",
        "outputs": 1,
        "noerr": 0,
        "x": 420,
        "y": 260,
        "wires": [
            [
                "30502fc5.b2274"
            ]
        ]
    },
    {
        "id": "75343774.9f2028",
        "type": "join",
        "z": "f7dfd3b3.db973",
        "name": "",
        "mode": "custom",
        "build": "merged",
        "property": "payload",
        "propertyType": "msg",
        "key": "topic",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 310,
        "y": 200,
        "wires": [
            [
                "86b19ff1.dc82a"
            ]
        ]
    },
    {
        "id": "fc494b9c.fed348",
        "type": "cube-read",
        "z": "f7dfd3b3.db973",
        "default": true,
        "readRowsInCube_id": "Rating",
        "readRowsInCube_idType": "str",
        "readRowsInCube_filter": "",
        "readRowsInCube_filterType": "nof",
        "readRowsInCube_maxrows": 1000,
        "readRowsInCube_maxrowsType": "num",
        "readRowsInCube_columns": "",
        "readRowsInCube_columnsType": "all",
        "name": "",
        "x": 190,
        "y": 280,
        "wires": [
            [
                "75343774.9f2028"
            ]
        ]
    },
    {
        "id": "bf9cc633.0b6528",
        "type": "mb-http-in",
        "z": "f7dfd3b3.db973",
        "name": "InsertIN",
        "method": "post",
        "url": "/b1abcd89-a1db-97ee-abab-2624a87f8b7e/Insert",
        "x": 110,
        "y": 180,
        "wires": [
            [
                "fc494b9c.fed348",
                "75343774.9f2028"
            ]
        ]
    },
    {
        "id": "5fcb45e.60ccebc",
        "type": "mb-http-out",
        "z": "f7dfd3b3.db973",
        "name": "DeleteOUT",
        "x": 670,
        "y": 120,
        "wires": []
    },
    {
        "id": "4acdfd49.3f24d4",
        "type": "cube-delete",
        "z": "f7dfd3b3.db973",
        "default": true,
        "deleteRowsInCube_id": "Rating",
        "deleteRowsInCube_idType": "str",
        "deleteRowsInCube_filter": "payload",
        "deleteRowsInCube_filterType": "msg",
        "name": "",
        "x": 490,
        "y": 120,
        "wires": [
            [
                "5fcb45e.60ccebc"
            ]
        ]
    },
    {
        "id": "586ae27d.312a1c",
        "type": "function",
        "z": "f7dfd3b3.db973",
        "name": "Payload",
        "func": "var data = \"ID='\"+msg.payload.value.ID+\"'\";\nmsg.payload = data;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 300,
        "y": 120,
        "wires": [
            [
                "4acdfd49.3f24d4"
            ]
        ]
    },
    {
        "id": "788f846f.218c0c",
        "type": "mb-http-in",
        "z": "f7dfd3b3.db973",
        "name": "DeleteIN",
        "method": "post",
        "url": "/3ecfb2a3-e745-1fc3-4bd1-d4b9dde425cd/",
        "x": 120,
        "y": 120,
        "wires": [
            [
                "586ae27d.312a1c"
            ]
        ]
    },
    {
        "id": "aaf36e6c.02f96",
        "type": "mb-http-in",
        "z": "f7dfd3b3.db973",
        "name": "UpdateIN",
        "method": "post",
        "url": "/f5ccf5d5-8351-d9fe-bc6f-48eb3b4e00d2/",
        "x": 120,
        "y": 60,
        "wires": [
            [
                "7aa9a992.b1e9b8"
            ]
        ]
    },
    {
        "id": "7aa9a992.b1e9b8",
        "type": "function",
        "z": "f7dfd3b3.db973",
        "name": "Payload",
        "func": "var data = {\n    rows: [msg.payload.value]\n}\nmsg.payload = data;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 300,
        "y": 60,
        "wires": [
            [
                "586472ea.52583c"
            ]
        ]
    },
    {
        "id": "586472ea.52583c",
        "type": "cube-insert-update",
        "z": "f7dfd3b3.db973",
        "default": true,
        "insertUpdateRowsInCube_id": "Rating",
        "insertUpdateRowsInCube_idType": "str",
        "insertUpdateRowsInCube_body": "",
        "insertUpdateRowsInCube_bodyType": "pay",
        "name": "",
        "x": 470,
        "y": 60,
        "wires": [
            [
                "60e80b0e.668f44"
            ]
        ]
    },
    {
        "id": "60e80b0e.668f44",
        "type": "mb-http-out",
        "z": "f7dfd3b3.db973",
        "name": "UpdateOUT",
        "x": 670,
        "y": 60,
        "wires": []
    }
]
  1. Click Import to import the flow.
  2. Click Deploy to deploy the flow to your app. The flow will be available as a component with the same name in the Link editor.
Fig. 40: The backend Nod-RED flow.

Fig. 40: The backend Nod-RED flow.

To link the UI components to the flow actions

  1. Open the Tools hub and click Link editor.
  2. In the Components bar, locate the Form 1 and Flow 1 components and them to the board.
  3. Connect the following endpoints:
Form 1 event Flow 1 1 action
insert insertin
update updatein
delete deletein

The effect of these links is that when you click Insert, Update or Delete on the Form 1, you trigger the corresponding flow in the Flow editor. In turn, the flow inserts or updates the data from the form and store it in the Rating cube, or deletes the associated row from the Rating cube.

Fig. 41: Create the links.

Fig. 41: Create the links.

Remember that the Get Exposure per Customer Rating Data Manipulation pipeline is running in pooling mode. This makes the Rating report to automatically update, and therefore, all associated UI components based on that report.