Blueprint blocks

Learn how to read colors, create and connect blocks and use pin and block menus.

Use the Rual demo

Build your application in Rual using blocks that are connected to each other in a flow. Open one of the demo blueprints to try the connections yourself.

If you don't have access to Rual yet, sign up for a free trail or contact us to get a login for our demo cluster with loads of examples.

Blocks, pins and lines

Every block represents a small piece of code. A block is also called action in Rual. The main actions are connected by the flow, a white line. Other blocks provide information, setting or perform subsequent actions.
Each block has one or more in-pins on the left side, and one or more out-pins on the right side. You can add custom pins yourself, if you see a label with + pin.

Colors

The colors indicate what type of data or activity you are dealing with. For example, a bright pink block, line and pin indicate a query element. Red blocks, pins and lines represent foreach functions and click events.

Pins: help text

If you click on the name of a pin, you will see a help text, for example to show a default setting of the pin. Not all pins need to be filled. Only the bold pins are required. The others are optional.

Blocks: multiple action

A lot of block groups support a multiple block. This is because an in-pin only takes one line (out-pins can be connected to more than one other block). Using a multiple block gives you the possibility to add more than one style, filter or ui component.

Blocks: add or remove

Hold your right mouse button and drag a line from a pin, and you will immediately get the block that is most used. Left click on the block and press backspace to delete it.
Hold your left mouse button and drag a line from a pin, and a context driven search menu will open.

Blocks: menu

Every action has three dots in the right hand corner. This will open the menu for this block.
Some blocks have an icon as a quick access to the menu. For example the outlet in UI blocks and the play simulation in function blocks.

Blocks: documentation

The documentation label in the block menu leads to the description in our help center. For connections there is a link to external documentation. The block create Mollie payments links to their API reference to show what values to use for the in-pins.

Lines: click and double click

Click on a connected pin and all the lines coming from that pin will become brighter so you can easily follow them.
Double click on a pin to connect distant blocks. Move to your destination and click on the pin there to connect. A pin can only be connected to blocks in the same flow.

Lines: references

You don't want your blueprint to look like a bowl of spaghetti. Tidy up by connecting data to a block define reference and name the reference. At the place where you need the data you can drag out a use reference.
A reference can be used anywhere within a blueprint, even in separate flows.

Organize: select blocks

Select by dragging while holding your right mouse button. This gives you some extra options:
  - drag to move the blocks to a new position
  - press v to vertically align blocks
  - press h to horizontally align blocks
  - press del to remove all selected blocks
  - press g to form a group of blocks

Organize: groups

After making a group for selected blocks, you can give the group a name and a color. It will show as a transparant layer, easily recognizable in the blueprint.

If you move a group you move everything in it. If you delete the group, it only deletes the group layer, not the blocks underneath.

next course: Data Storage

You finished the introduction! Continue with the Basic Rual Developer courses.