When designing interfaces it's frequent to have parts that are common to some of those interfaces. In OutSystems, it is possible to refactor and implement those common parts using widgets like Blocks (in Reactive Web and Mobile apps) and Web Blocks (in Traditional Web apps) and then reuse them on screens and other blocks.
An immediate advantage of using blocks is improving the reusability of screen elements and, therefore, the maintainability of applications. For example, the header and footer of an application can be implemented using blocks that are reused in all screens of the application. If there are any changes to the header or footer, you only need to update the blocks and those changes are automatically propagated to all the screens of the application.
Implementing blocks in OutSystems involves the following two stages:
- You create a new block and implement the interface and logic elements of the block.
- You instantiate the block on screens or other blocks of your application.
Communication between Blocks
When something happens in a block it is possible to communicate that event to the parent screen or block so that it executes an action. In the same way, parent screens or blocks can also communicate with child blocks so that they execute an action. Using these two mechanisms together it is possible for a block to communicate with a sibling block.
(A) Communication between a Block and the Parent Screen or Block
A block triggers an event that can be handled by its parent screen or block to execute an action. The block can send data together with the event.
(B) Communication between the Parent Screen or Block and a child Block
A parent screen or block updates the input parameters of a child block, which can trigger an action from the child block.
(A + B) Communication between Blocks
In this case, a parent screen or block contains two blocks and one of them needs to communicate with the other. This is done using the two previous techniques in sequence:
- A block communicates with the parent.
- The parent communicates with the other block.
Articles in this Section
- Create and Reuse Screen Blocks
- Display the same content on several screens by developing reusable Blocks.
- Use Events to Propagate Changes From a Block to the Parent
- Learn how to use Events to trigger an Action and pass a value from a Block to Blocks or Screens.
- Maintain UI in dedicated modules
- Reuse Screens and Blocks between Apps to increase team efficiency and follow good development practices.
- Pass Data Between Blocks
- Blocks use events to communicate changes to the parent screen/block or to another block.
- Create a Custom Application Template
- Learn how to develop a template that you can you use as the starting point of your applications.