Workflows

And here we got to the key moment of creating web applications. After all, everything we have done so far has been just creating a picture. Pretty cute, probably, but pretty much useless. Now we need to do the main thing. Revive it, and add a reaction to our actions.

Each component has a Workflow tab for this task. In it, you can create business processes and define conditions (triggers) for their launch. Let's create such a business process for the Calculate button.

Triggers

Creating a business process is very similar to what we already saw in module 4 when we created a business process for the backend. There is a common canvas, blocks that are added there, and connections between them determine the sequence of actions. An important difference is that the front-end workflow has many different blocks for starting a business process. These are the triggers that start the business process. The triggers themselves can be different for each component (a button has a click, a table has a data update in it, and a list has a choice of some option), but the general logic of work is the same in any case. An event occurs, and this event starts the corresponding business process.

Let's decide on a general plan. What do we need to do when the button is clicked:

• Find out the X and Y values. Get them from the corresponding input fields.
• Launch an endpoint for calculations and pass X and Y parameters to it.
• Make the result container visible.
• Put the calculation result in the required Label fields.
  

Business process blocks

The first step requires an InputFloat Get Properties block. It reads the current values ​​of the component, not only what the user has entered but also other settings (for example, appearance settings or the allowed range of values). We need to get Value, exactly this contains the data entered by the user. Each value from its input field and we need two blocks for this (for X and for Y). In them, you need to select the Component ID value at the input. If you did not forget to specify their name when creating, it would not be difficult to find and select the required component.

The next step is to launch the endpoint. This is where the connection between the front-end and the backend takes place, and the command for calculations is transmitted from the browser to the server. Each endpoint of our application is represented as a separate block. You just need to select the one you need and connect it. This endpoint was assigned a GET method and a module4-basic URL during the fifth module. It will be under this name in the list of blocks - Server request GET /module4-basic/

Unlike components, endpoints do not need to set their Endpoint ID (it is set correctly by default). It is only necessary to apply to the input X and Y obtained in the previous step.

The next task is to make the result container visible. To do this, use the Container Update Properties block. In the block itself, select the ID of the desired container and set Visible = true.

The last thing left to do is to distribute the 5 result elements from the array to the corresponding components of the web application. We know that the result should always come in a strictly defined order, so we just need to sequentially pick up the element with the desired index and assign its value to the Label component. To do this, we use the Array Element blocks (with an index from 0 to 4), toString (to convert Float data to String), and Label Update Properties to change the Label text and display the result.

You may have noticed that there are two block options for updating the properties of any component - Update Properties and Set Properties. The difference between them is the same as between the Patch and Put methods in the Rest API. The first changes only the explicitly specified properties, while the second overwrites them all.

Final result

This completes the creation of the business process. You can save, publish and check the final result.

If everything was done correctly, then the final result should look like this: