Design Web Blocks with content that is reused in Web Screens (or even other Web Blocks) to improve reusability and maintainability. For example, use Web Blocks to design screen headers, menus, and footers.

To create a Web Block:

  1. In the Interface layer, right-click on Web Flow, and select Add Web Block;
  2. Double-click on the Web Flow to open it, drag a new Web Block from the toolbox and drop it into the canvas;
  3. Double-click on the Web Screen to open it. Drag the Web Block from the toolbar and drop it on the screen, to create a new Web Block instance.

Designing Web Blocks

Web Blocks are designed in the Web Screen Editor, just like a Web Screen. In the case of Web Blocks the editor has an additional widget called the Placeholder.

Regarding the Web Block logic, you can use the following elements:

It is important that the Web Block design is self-contained, since they are evaluated independently from the place where they are being used.

Designing Web Blocks vs Web Screens

There are some design particularities with Web Blocks regarding Web Screens:

Using Web Blocks inside Web Blocks

Web Blocks can be used inside other Web Blocks, which is called nested Web Blocks. However, be extra careful with loops that might occur if one web block is including a preceding web block. This leads to an endless loop because the web block build process will keep turning back.

When a loop is detected at design time, the preview of the offending web block will be stopped and a "Block loop detected in block '<block>'" error message is displayed inside the web block.

Execution of the Web Block Preparation

Like Web Screens, the Web Block Preparation is automatically executed before each Web Block is rendered. Therefore, you don't have to explicitly invoke it.

When the Web Block is refreshed using Ajax, the Web Block Preparation is executed.

How is a Web Block Rendered?

When a web block is rendered, each web blocks inside it are rendered in the following way:

  1. Arguments are evaluated and passed to its web blocks;
  2. The Web Block Preparation of the Web Block is executed;
  3. The Web Block is rendered;
  4. The rest of the Web Block context is maintained.

When an End element is used in a screen action, the web block's current execution context is kept the same way the screen is.

See Also

About Web Blocks | Change a Web Block