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
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 :)
nice sample
Tks Shingo :)
I think you should use the js to catch the change of the input to truncate whatever you want
Hope this help
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
Hi Shingo&Benjith,
Thank you for your inputs.
Unfortunately it did not work in my case, as my dropdownsearch widget is inside a popup which gets activated by clicking on a button and that button and the popup is inside a block.
I tried 3 separate scenarios : putting the JS on the Main page Event - On Ready that calls the block, putting the JS on the Block- On Ready and putting the JS on the popup Activate.
It did not work. Would you please let me know any reason that you think on why it should not work.
Thanks,
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.
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,
Hi Raphael,
Appreciate your input.
Unfortunately, I need to trim the special characters in the search input as the user types in the search prompt.
I am able to get the text using the Onchange event in your .oml, but how to trim the characters and put the new text in the search prompt. Apologies if its a silly query, I am not that familiar with Javascript.
Thanks for your help.
Meria!
Thanks for your effort and the detailed explanation. Appreciate it.
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.
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.