[Refresh Block - Rerender Block in Client Side] How to mimic communication between OutSystemsUI client actions and widgets

Mustafa Emad Shaker

Question

Forge

OutSystems UI

refresh-block-rerender-block-in-client-side

I was working on a Forge component, and in it I wanted to mimic the behavior of the client actions in OutSystemUI, and how the communicate with widgets in it.

Accordion (OutSystemsUI)

For example, the client actions that opens and closes Accordions.

Here we have a client action that communicate with a widget in the runtime.

Refresh Block (Forge)

This component removes any part of the html tree and rerenders it after sometime.

To trigger the refresh process using a client action, I created an observer that detects a change in the an attribute. When a change happens in this attribute, the widget trigger the refresh mechanism.

I used the value of the "refresh" attribute, to send some values to the component.

I was wondering if there are other solution to communicate between a client action and a widget (webblock)?

16 Jan

OutSystems Neo

Staff

AI Generated

In OutSystems, communication between Client Actions and widgets, particularly custom components, can be effectively established using several methods provided by the platform. Below are the common options you can utilize:

Events and Event Handlers:
- Events are a powerful way to enable communication between client actions and custom widgets. You can define Custom Events for your widgets, which are triggered by specific interactions or actions taken within the widget. These events can be assigned to specific actions in the parent screen or block.
- For example, your custom component can expose events such as OnClick, OnChange, or any custom event that fits its functionality, and this can call a specific Client Action in the parent.
For a better understanding, you can check the official documentation on triggering and defining custom events with widgets Application Logic.
Aggregates and Local Variables:
- If the widget needs to display data or respond to state changes controlled by the parent, you can bind its properties to local variables within the parent UI. The parent can use Client Actions to update these variables, resulting in automatic updates to the widget through data-binding.
Event-Driven JavaScript Communication (Custom JavaScript):
- Widgets can include JavaScript customization to trigger specific events or actions through JavaScript logic. By utilizing methods like MutationObserver (as seen in in your question), you can detect changes in elements and execute specific Client Actions accordingly. Executing OutSystems actions from JavaScript often involves use of $public.Actions or $actions.<ActionName>().
- Refer to Systems Actions for more insights and examples.
Global Variables and Entities:
- Define global server or client entities that are accessible across the application. Both custom widgets and client actions can interact with these entities to share and manipulate information. However, this approach is best suited for state information that isn’t specific to a single widget.
JavaScript-based APIs and Dependencies:
- When building custom components with JavaScript, you can define APIs that allow the parent component to interface directly with the widget. For instance, in the structure shown in , actions like AccordionExpandAll or AccordionCollapseAll are likely methods on a system or custom widget that allow interactions.

Lastly, always make sure to structure your client-server communication effectively — server-side logic should only be called if necessary, as it introduces latency due to the need to make calls to the server from the client in Reactive Web Apps Application Logic.

You can also explore the Reactive Utilities Forge component for more inspiration and examples Systems Actions.

19 Jan

This answer was AI-generated. Please read it carefully and use the forums for clarifications

Saugat Biswas

Hi @Mustafa Emad Shaker,

In OutSystems Reactive Web applications, communication between Client Actions and widgets (including custom components) is primarily achieved through built-in platform mechanisms such as events and data binding. These approaches ensure a clean, reactive, and maintainable architecture.

1. Custom Widget to Parent Screen

Events are the most effective way for widgets or custom components to notify the parent screen or block that something has happened. Custom components can expose Events (for example: OnClick, OnChange, or any domain-specific event). When an event is triggered inside the widget, it is handled by the parent screen or block, where you can connect it to a Client Action. This allows the widget to remain reusable and decoupled from business logic, while the parent controls behavior.

2. Parent Screen to Custom Widget

When a widget needs to display data or react to state changes, data binding is the recommended approach. The widget has input parameters and OnParametersChanged method allows to update the data, UI etc. based on the data passed from Parent screen.

In case custom widgets are created as library, you can always expose global public client actions to interact with the widgets. Just remember that the public action can only be used by Parent Screen to pass data to custom widgets. Any backward communication has to be handled via Events.

Hope this helps.

Cheers,

Saugat

4 days ago

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines