38
Views
1
Comments
Creating a custom form widget
Question
Application Type
Reactive
Service Studio Version
11.9.1 (Build 33435)
Platform Version
11.8.2 (Build 15398)

Hi,

We have been creating our own custom form "widgets" by using web blocks, and I'm looking for any examples of how this should be implemented.

For example, we have had issues using the existing OutSystemsUI.Datepicker (where IsBound = True) while changing the input state (Enabled/Mandatory/Value change "resets" the Date value, the model state not always persisting), but came up with a specific pattern of layout, actions, and events that work. To avoid errors when implementing this (delicate!) pattern in other places, we wrapped it (including the Input widget) into a web block called DatePickerInput that:

  1. Has a Date input parameter (of type Date)
  2. Sets a local DateText text attribute for the formatted date and binds this to a text Input form widget
  3. Places an OutSystemsUI.Datepicker to open on input click (Trigger), but does not use IsBound (the issues mentioned above were solved by removing this)
  4. Parses and outputs the value when changed as a Date with a Change Event (the parent updates it's own model value with this event)
  5. Updates the DateText value when the input Date changes (as a result of the the Change Event)

This approach works fine, although we end up with a lot of event handler actions if we have a lot of these block instances, unlike native OutSystems form widgets where it seems to be 2 way binding?

Unlike the form Input widgets provided by OutSystems, we are missing the ability to set and get the Input.Valid and Input.ValidationMessage properties, as the input is a child of the web block. Since we really want it to behave like a form control, we can't use Events if we need to access this in the normal flow of an action. For example, on Submit, run custom validations and check or set the validation properties.

I think I can solve setting these properties by using this guide, but I'm not sure about how to expose an action to "get" the Input's valid state, as it seems I can't create a web block action with any output parameters.

Does anyone have a recommended way of implementing custom form widgets?

Hi Emma,

Interesting problem. 

Could you share an example module which would help illustrate the problem more clearly? 

Thanks.