17
Views
12
Comments
Solved
Reactive Web - DropdownSearch widget trim search before filtering
Question
Application Type
Reactive

Hi,

I am trying to use the Dropdown search widget for reactive web and I would like to know if there is way we could filter the search keyword before initiating the search. The context is we are trying to read a number from a card reader and the card reader automatically adds a semi-colon at the start of the text and question mark at the end. I would to remove these special characters before the search is initiated. Would you please let me know if there is a way around this.


Thanks in advance for your help.

Meria

Rank: #171
Solution

Hi Meria,

There is no such thing as a silly question!!

All questions helps in some way!


I took some time to make a better sample for you the idea was to replace, for example, the user input.


What I did in this sample, was using Regex not as a Pattern in the input, because it would not prevent the user from typing, but using it to replace the text every time the user types a value.

I did not used the OnChange event, I made it independent so you can use both.

See:


I added an Input Parameter to the custom DropDown widget where you can inform a regex Pattern.

In this case it will not allow anything that is not numbers, letters from a-Z and white spaces.

How I did that?

I just added in the Init Function where the Javascript is initialized the follow code:


I check if the pattern exists, and add a Listener, so every time the user type something I can replace if there are something that I don't want:)

This was taken from here, it will explain a little bit better if you want 

See if this is what you are looking for,

Cheers and Regards,

RR :)



DropDownTests.oml

Rank: #491

Hi,

I think you should use the js to catch the change of the input to truncate whatever you want

Hope this help

mvp_badge
MVP
Rank: #78

Hi Meria,

As mentioned by Shingo, you will have to implement the mentioned use case by defining some JS to customize the widget behavior i.e. restrict the input widget from accepting the unwanted symbols

I have created a sample app - DropdownSearchDemo which almost fulfill the mentioned use-case i.e. remove/avoid ? and ; symbol from the user input value.

See the attached .oml file

Note: You can also define the Regex restriction on the input widget.

Hope this solution will at least give you a direction to achieve the actual solution :)


Kind regards,

Benjith Sam

RWALabDropdownSearch.oml

Rank: #6496

Hi Benjith,

I also tried to replicate what you did in the sample .oml. But it is not working as expected for me. Still able to enter ; and ? in the search input.

Thanks,

Meria

Rank: #171

Hi Meria!

Some time ago I answered a question that may also help you know.

Take a look at this post.

There is a sample on how to create an event that is triggered every time you change the search in the input using a customized dropdown Search.
This way you could also try to trim the values.



Let me know if this helped or if you need help! :)

Cheers and Regards,

RR :)

Rank: #171
Solution

Hi Meria,

There is no such thing as a silly question!!

All questions helps in some way!


I took some time to make a better sample for you the idea was to replace, for example, the user input.


What I did in this sample, was using Regex not as a Pattern in the input, because it would not prevent the user from typing, but using it to replace the text every time the user types a value.

I did not used the OnChange event, I made it independent so you can use both.

See:


I added an Input Parameter to the custom DropDown widget where you can inform a regex Pattern.

In this case it will not allow anything that is not numbers, letters from a-Z and white spaces.

How I did that?

I just added in the Init Function where the Javascript is initialized the follow code:


I check if the pattern exists, and add a Listener, so every time the user type something I can replace if there are something that I don't want:)

This was taken from here, it will explain a little bit better if you want 

See if this is what you are looking for,

Cheers and Regards,

RR :)



DropDownTests.oml

Rank: #6496

Hi Raphael, 

Thanks for your effort and the detailed explanation. Appreciate it.

Thanks,

Meria

Rank: #6496

Hi Benjith,

You were able to accomplish this using just one JS on the OnREady action of the page. Would you please explain how you were able to do it? I tried replicating what you have done in the shared .oml. But it did not work for me.

Thanks,

Meria

mvp_badge
MVP
Rank: #78

Hi Meria,

Sincere apology for the late reply. Please refer the attached updated .oml file

sample app - DropdownSearchDemo

- In the latest module, the implementation is for both screen level Dropdown search and the defined Popup Dropdown search.

- OnReady action flow JS node is responsible to define event handler to the Screen Level Dropdown search widget

- ShowPopupOnClick action flow does have an JS node which is responsible to define the event handler for the Popup Dropdown search widget and the respective widget does also have an Extended class property value defined in order to distinguish between screen level widget and popup DD search widget..

If you are not able to replicate the same implementation, please share the sample .oml file with us.


Kind regards,

Benjith Sam

RWALabDropdownSearch.oml