In OutSystems, events play a crucial role in enabling interaction between UI elements and their parent components. In this blog post, we'll delve into the mechanics of events in OutSystems, explaining how they function, how they are triggered, and what happens when they're handled.

What is an Event in OutSystems?

At its core, an event in OutSystems is an element that allows a block to communicate with its parent component. By using events, a block can notify its parent that a specific action has occurred, ensuring that different parts of the application stay synchronized.

For instance, consider a block that represents a selection list. If a user interacts with the list and selects an option (e.g., choosing "Wednesday"), the block needs to inform the parent screen of this selection to update any related elements or logic. Events enable this flow of information between the block and its parent.

Why Are Events Important?

Blocks and their parent components operate within distinct scopes. This means that any interaction happening inside a block is not automatically known to the parent component. If an action inside a block, such as selecting a day of the week, needs to trigger a response or update in the parent, an event must be used.

Without events, changes within a block would remain isolated, preventing the parent from reacting appropriately. Events bridge this gap by conveying the necessary information to the parent.

Triggering and Handling Events

Here's how the event flow works:

1. Triggering the Event: When a specific action occurs within a block (e.g., a user selects a day), the block triggers an event. This event acts as a signal to the parent component that something noteworthy has happened.

2. Handling the Event: Once an event is triggered, the parent component must have an associated event handler to manage it. This handler is defined as a screen action at the parent level, where the logic for handling the event is written.

3. Execution Flow: After the event is triggered, the execution flow shifts to the event handler, where the defined logic is executed. The handler can access input parameters passed by the block to make decisions or perform specific actions. Once the event handler finishes its execution, control returns to the flow in the block that triggered the event.

How Events Pass Data

Events can include input parameters that allow data to be passed from the block's scope to the parent component's scope. These input parameters ensure that the parent receives relevant information about the event, such as which day was selected in our example.

Key Takeaways

• Events are vital for enabling communication between a block and its parent in OutSystems.

• Events are defined within blocks and can have input parameters that transmit data to the parent.

• Event handlers in the parent execute the necessary logic when an event is triggered.

• The execution flow returns to the original point in the block after the event handler finishes.

Events provide a powerful mechanism for building interactive and responsive OutSystems applications, allowing developers to create seamless user experiences where components react dynamically to user actions. Understanding how to use and manage events effectively can greatly enhance the flexibility and functionality of your applications.

Using Blocks and Events Together: A Practical Example

To demonstrate how to use blocks and events in OutSystems, let’s create an example where a product card block displays product details and communicates user interactions back to the parent screen.

Step 1: Create the Product Card Block

1. Navigate to the Interface tab and create a new block called "ProductCard".

2. Design the ProductCard block with widgets to display product details, such as:  

• Image widget for the product image.

• Text widgets for the product name and price.

3. Add an input parameter called Product to pass the product data to the block.

4. Use the input parameter to populate the widgets dynamically (e.g., set the image URL, product name, and price).

Step 2: Add an Event to the Product Card Block

1. Add an action in the ProductCard block that triggers the "ProductClicked" event. This action should be connected to the click event of the Add button.

2. When the user clicks on the product card, the action should trigger the ProductClicked event and pass the relevant data (e.g., ProductId) as parameters.

Step 3: Handle the Event in the Parent Screen

1. Go to the screen where the ProductCard block is used.

2. Drag and drop the ProductCard block into the screen and bind its Product input parameter to a data source that provides the product details.

3. Add an event handler to the screen for the "ProductClicked" event from the ProductCard block.

4. Define the logic you want to execute when the event is triggered. For example, you could display a detailed product page, show a modal, or log the event for analytics.

Displaying Product Details on Click

Suppose you have a list of products displayed on a screen, each represented by a ProductCard block. When a user clicks on a card, the block triggers the "ProductClicked" event, passing the ProductId to the parent screen. The parent screen then handles this event by navigating the user to a detailed product page or showing a modal with more information.

the interaction flow:

• User clicks on a product card.

• The ProductCard block triggers the "ProductClicked" event.

• The parent screen listens for the event and responds by showing more product details or navigating to a different screen.

‍

1. Modularity and Reusability: Blocks encapsulate UI components, making them easy to use and reuse across different screens and applications.

2. Improved Maintainability: When you need to change the design or logic of the block, you only need to do it in one place, and all instances are updated automatically.

3. Decoupled Communication: Events allow blocks to communicate with their parent or other components without tight coupling, making the code more flexible and easier to maintain.

4. Dynamic Interaction: Using events, you can create interactive experiences where user actions in a block trigger response in the parent screen or other blocks.

‍