Input Mask Reactive with Limitations (Limited input)
Application Type
Reactive
Service Studio Version
11.11.4 (Build 43812)

Good Day Community,

I am currently studying using the forge component of Input Mask React.

Right now I am trying to create a time input field with certain limitation

Hour Time - 01-12

Minute Time - 00-59

Alphabetical - AM or PM only.

-----------------------------------------------------------------SIDE NOTE-----------------------------------------------------------------------------------

I have seen a post creating the javascript but I am not quite sure on how to implement this on outsystems.

Here is what I have done currently using the javascript above.

OnInitialize called the script source

Created the input field to call the input parameter.

Still studying what I did wrong. Nothing is happening apparently.

Regards,

Pens

mvp_badge
MVP
Solution

Hi Pens,

For the mentioned use case, 

1) Load the imaskJS in the OnReady action using the RequireScript client action (referenced from the System module)

2) Register the mask to the input in the OnReady flow.

See the demo: TimeInputMaskDemo

Refer to the attached oml file


I hope this helps you!


Kind regards,

Benjith Sam

LearningApp.oml

Solution

@Pens When you are trying to access an element of the page, you should NOT run Javascript logic in the OnInitialize and run it on the OnReady event instead.

The reason for this is that the OnReady action is triggered when the DOM (Document Object Model) is loaded. This means that only at this point you have access to the elements of the screen, while if you run JS logic in OnInitialize (which happens before this) you might be trying to access elements that still do not exist.

So, Just import the script using the "RequireScript" client action and then place a JS node right after with the JS code that you placed in the side note.

This code is only to be run once, and there is no need of running it on the OnChange event of the input. The reason for this is, what the code actually does is providing the mask to the input element (from which you pass the ID), and that only needs to be done ONCE. So you can and should do it in the OnReady event, where the DOM is already loaded and you have access to your input widget element Id.

Hope these steps helped you :)

Cheers,
Paulo

Hello @Penscan you please provide the .oml file of your issue not working?

Hi @Paulo Ritto,

Sorry I have currently separated the javascript I am trying to join with the Input Mask Forge Component because I am encountering some errors I have yet to identify. 

Attached here is the OML file by the way. 


Regards,

Pens


LearningApp.oap

mvp_badge
MVP
Solution

Hi Pens,

For the mentioned use case, 

1) Load the imaskJS in the OnReady action using the RequireScript client action (referenced from the System module)

2) Register the mask to the input in the OnReady flow.

See the demo: TimeInputMaskDemo

Refer to the attached oml file


I hope this helps you!


Kind regards,

Benjith Sam

LearningApp.oml

Thank you for the OML file. I am so happy to know that there was a client action for inputting the script source. I should have studied that first. 


Regards,

Pens

Solution

@Pens When you are trying to access an element of the page, you should NOT run Javascript logic in the OnInitialize and run it on the OnReady event instead.

The reason for this is that the OnReady action is triggered when the DOM (Document Object Model) is loaded. This means that only at this point you have access to the elements of the screen, while if you run JS logic in OnInitialize (which happens before this) you might be trying to access elements that still do not exist.

So, Just import the script using the "RequireScript" client action and then place a JS node right after with the JS code that you placed in the side note.

This code is only to be run once, and there is no need of running it on the OnChange event of the input. The reason for this is, what the code actually does is providing the mask to the input element (from which you pass the ID), and that only needs to be done ONCE. So you can and should do it in the OnReady event, where the DOM is already loaded and you have access to your input widget element Id.

Hope these steps helped you :)

Cheers,
Paulo

Thank you @Paulo Ritto 

I was taught about the Onready and OnInitialize but I did not quite get it until you gave this explanation. It is a big help for me :) 

Regards,

Pens

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