Use of inputfield inside Block

Use of inputfield inside Block

  

I like to extend an inputfield with custom functionality, but still be able to reuse this easily.
Now, I try to use an input field within a (web)Block. And use this Block in a page.

How can this be done in OutSystems?


Examples of functionality: clear-input button, automatically jump to next field, custom mask, character counter, floating labels, micro text, standardised validation messages.

At this moment I bump into these problems (which work seamlessly in an inputfield without the Block):

- automatic updating of the value variable in the parent (the page)
- form validation (how to detect in the page that the inputfield is not valid)

A workaround might be with events, but this seems rather complex and wrong.

Solution

Hi Bram,

From your use of "(web)Block" and mention of events, I assume you're talking OutSystems 10 Mobile, although the approaches I suggest would work in both Web or Mobile applications.

I'd suggest using one of two options:

  1. add a placeholder to your Block, where the user of the block will add the Input. This way the Input is still available on the Screen. Your Block would need to attach its behaviour to the Input, based on some selector (for instance, if placeholder is inside a container with class ExtendedInput, you could use
    .ExtendedInput input["type=text"]
  2. your Block only provides javascript functionality and receives as an input parameter the Id of the Input where you need the functionality. In your javascript code you always reference the input you want to affect by its Id.

You can check the new Silk UI Input Masks Mobile Component for both some of the functionality you need, as well as to see how it is implemented (from the usage instructions, it follows option 1. above).

Solution

Hi Bram.

For some of those use cases, and only for web applications, you could also use the Event System component: https://www.outsystems.com/forge/component/597/event-system/

For instance, validations could be easily implemented using it, even if the input is placed inside the web block. Check this example: http://leonardofernandes.outsystemscloud.com/eventshelp/Lesson04.aspx

Thanks for your replies and interesting links!

First, I work in OutSystems 10, for mobile indeed.

The approaches:

  1. The placeholder could work, I will try it.
    I see the Silk UI Mask component also works with this approach.

  2. Use a Block with JavaScript-enrichment functionality
    This would be possible. The downside is that a lot of complexity (when it is a lot) and html changes are hidden inside a script. So, I try to avoid this approach.

  3. Using the Event System component
    Looks interesting, but maybe only applicable for Web applications, and it seems it consists of all server side actions. Which I cannot use in the app, unfortunately.

  4. Using OutSystem events
    This would mimic the behaviour of the component outside of the webblock, but would take a lot of events and variables, very risky and unmaintainable. So I try to avoid this approach.

Hi Bram,

As far as I can tell, both options 1. and 2. require a bit of JavaScript (which in Mobile is now quite easier than before). The main difference is how you determine what is the HTML element you want to affect with your logic:

  1. uses CSS selectors like the one I've shown (e.g. it's used for instance in the Toggle button or Search widgets of Silk UI).
  2. uses the widget's runtime Id property (you have to set the widget's Name) that needs to be passed as an input parameter to the web block (e.g. it's used for instance in the List_Navigation or Popup_Editor Web Blocks of RichWidgets - for Web Applications).

Whether it's complex JavaScript or not really depends on functionality you need and if it's already readily available from other sources you can leverage. With Client Actions your OutSystems code will be transformed into JavaScript automatically, so you may be able to do most of your logic in OutSystems without "getting your hands dirty" with JavaScript.