Component Design

It would be possible to put elements on the empty space of the canvas simply, but it's better to try to make everything neat and orderly immediately. Therefore, to begin with, we will design the workspace. Let's add a component (Container) to the canvas where we will place all the other elements. After adding, you should click on the gear icon and proceed to the configuration of this container.

Container settings

Let's go through the available settings.

• Name - the name under which we can refer to this container in the application's business processes. For example, if we want to create business process to change some settings of this container.
• Direction - the direction in which the elements inside the given container will be laid out. Horizontally, if you want to arrange them in a row, one after the other, or vice versa, vertically, when the elements go under each other.
• Wrap - setting the output of elements. Should they be on the same line (nowrap), or can they be wrapped (wrap).
• Alignment - how the elements in the container should be aligned (separate setting for horizontal and vertical alignment).
• Size - container size. It can be set as a percentage of the available space or have a strictly fixed size in pixels.
• Max Width -the maximum allowable width (in case it is not strictly set and varies depending on the content).
• Margin/Padding - indent from container borders. External or internal, respectively.
• Image, Gradient or Overlay (Background color) - the ability to set the desired background. You can choose a specific color (or a combination of different colors with a gradient) or select a background image.
• Border - selection of the frame and its appearance (color, thickness, rounding radius).
• Visible - visibility of the element (as well as all nested elements).

The selected settings can be seen in the screenshot. Of course, you can experiment and change them, choosing your unique design.

Let's add another one to the created container. We will add the necessary input fields to it. Set it to vertical, center-aligned, 40% width, and left padding-left (padding-left 20px).

Application components

Next, add the components themselves to the container. Our business process accepts two numbers of type float. To enter them, you need to add two Input components (float), a Button, which will start the calculation process, and make a small visual adjustment to sign their Label.

Let's add one more block where we will sign what we plan to calculate in general (summation, subtraction, etc.). Let's set the width to 30% with the elements arranged vertically, centered, and right-aligned (end/center). Let's add 5 Label components to the container itself and immediately change their text to the desired one.

The last step in the visual design is adding another container to display the calculation result. We added it by analogy with the previous container, but we set the alignment to the right with a small padding on the left. This container's feature is that it will initially be invisible (the Visible switch is off). Let's turn it on at the moment when we have the result of the calculations. Let's add 5 Label components to it, and we don't need even to change their text because the block is still invisible (the main thing is to set their Name so that you can identify the necessary element when creating business processes).

If everything was done correctly, we will see the following result in the web designer:

And this in the published app: