Give us feedback
Web icon


Stable version 1.0.2 (Compatible with OutSystems 11)
Uploaded on 07 January 2021 by 
 (0 ratings)


You are developing a screen that enscapsulates many things/fields, you are developing a feature which appears in many places. If you don’t use web blocks, the huge screen becomes so messy with actions and variables. If you don’t use web blocks, the common feature must be repeated in all places. However, if you create a reusable web block, how the parent web block or the main page retrieve its values? By capturing onchange and fire the event? This solution is fine but takes time for backward and forward between client and server on every onchange. What about packing everything before ajax call? The brief idea is that before ajax call, we gather all information in json format and put the json in a hidden field of the parent web block or the main page. In the server action, we deserialize the json string into the appropriate model.
Read more

This component provides 2 web blocks: JsonFormBinder and FormJsonBinder. They both support nested binders; e.g. FormJsonBinder can contain another FormJsonBinder and ArrayJsonBinder; same for ArrayJsonBinder.

Mandatory Input Parameters:

  • Scope: used to find elements inside for gathering value. It is also used to find the parent in case of nested binders.
  • StorageWidgetId: the outbound widget id which stores the JSON string of the binder
  • ParentScope: in case of nested binder, the child binder will look for the parent to inform that parent can gather its JSON value. This can be empty if not nested binder.

Widgets inside the FormJsonBinder must add some Extended Properties as so:

  1. Key: [Scope] and Value:[Property of Json object]. It means that if the scope of binder is “profile-test” then all widgets inside the binder must be configured as

    The roles is as a part of profile; hence, the storage of roles must be configured as an property of profile.
  2. Specific Extended Properties:
    • Radio Widget: must add “default-val”:[value]. For instance, there are choices for coffee: hot, cold, latte, hot sugar free, cold sugar free. If this property is not provided, deserializing JSON will throw exception because of mismatch data type.
    • Date/DateTime: must add 3 properties:
      • bindme-date: true/false. It tell the binder that it is a date, not a date time. True is date and False is datetime. Deserializing JSON will throw exception if the target data type is date but Json value is in date time format.
      • bindme-dateformat. The date/datetime format is used to display the date/datetime in the widget.
      • bindme-dateparser. The function is used to parse the value of widget to Date object. The function requires 2 input parameters: text and format.
Release notes (1.0.2)

Correct nested event flow

Reviews (0)