First, I am not sure if this one is early access because I just updated to the new OutSystems UI and tested out things on the new Reactive Web Pages.
I have this issue on the behavior of the Dropdown Select (see below image):
On the right is all the data that I have. Unfortunately when I tried some values, it somehow didn't get the values I thought that would come out. Any guidance of how the logic runs?
Ah! Thanks Wei,
I was so focused on fuse options that I forgot about the Choices.
Yes, the number of choices shown is controlled by Choices (and is 4), and the fields to search is also defined in choices (but I don't know what are those... lol
I am still waiting for the answer from OutSystems though.
Juan, this example will start to search less chaotic, as when using a threshold of zero, the matchings must be exact:
"{ searchResultLimit: 5, fuseOptions: { tokenize: true, matchAllTokens: true, findAllMatches: true, threshold: 0.0, location: 0, distance: 100 } }"
Hope this helps.
P.S. Thanks, Wei, for pointing out about Choices.
Eduardo Jauch wrote:
Will try this one out today. Tagging this as solved since it is a good start for me to check how I can modify how it works.
Hello Juan,
Did you mean Dropdown Search? I'm asking because there is no Dropdown Select in REACTIVE applications...
Anyway, it seems the component is prepared to search not only by the Text, but also by the Value... So, if you are passing to the Value the ID of the entity record, when you hit 2, it is returning the records that mach this (2, 20, 21, etc).
Don't know if there is any configuration you can use to change this behaviour...
I'll ask around.
Cheers.
Hi Eduardo,
Sorry but yes it is the Dropdown Search. Thanks for pointing out.
Yes I was able to figure out that it also searches for the ID of the record. However, with my example, when I type CA, the two records won't show. Then I added another record Lexington, Columbia, SC. But when I type SC, only the Richmond, Columbia, SC shows. Typing Hills doesn't show that Beverly Hills record as well.
Just wondering the behavior so that I can set the proper expectation to the end users. And by the way, the location shown is concatenation of 4 fields: County, City, State and Zip Code.
EDIT: Adding the config. Location is the concatenated field. I renamed the ZipCodes entity to Territory in case you'd ask why the entity and the aggregate have different names.
Thanks!
The search seems to be a bit chaotic. You can take a look into the fusejs.io page to see how to configure, but the search uses fuzzy logic and there are a lot of configurations that impact the result (distance, location, threshold, etc).
You can play a little with those configurations, but the page has examples and a live demo.
In other words, it is not a simple "scan" of the list to find exact matches.Also, it seems there is a limit of 4 results after search, and they are ordered by default. This also may be impacting your result.
Not a JS person myself but I can ask people to help me on this. However, it is hard to explain to end user something that is chaotic. If the built-in Dropdown Search is like this, I may have to resort to a different approach.
Tested some values like 'David' and 'Maine' separately on the test page but I got a lot of results that doesn't even make sense to me. (searching 'David' not just shows David Maine's books but Dan Brown's books as well lol)
Try to add this to the AdvancedFormat property:
SyntaxEditor Code Snippet
"{ tokenize: true, matchAllTokens: true, findAllMatches: true, threshold: 0.1, location: 0, distance: 100 }"
And try to play a little with threshold and distance.
In any case, I asked someone in OutSystems that knows more about this than me.Let's see if they are able to answer fast.
Dropdown use following javascript librarys
#1. Choices (for dropdown function)
https://github.com/jshjohnson/Choices
#2. fuse.js (called from Choices for fuzzy search)
https://fusejs.io/
The advanced format is for Choices, so you need use fuseOptions to control fuse.js
fuseOptions: { include: 'score' },
Regards
Wei
Juan Carlos Elorde wrote:
Hi Juan,
I'm sorry that you found these issues, but thanks for the feedback!
Most of these problems found I would say are inherent when using a fuzzy search, like the Fuse.js library. What this kind of search gives on speed and performance, can fall short on accuracy. For more general information, about fuzzy search and the methods used, like the 'Levenshtein Distance', check the following links:
https://stackoverflow.com/questions/23305000/javascript-fuzzy-search-that-makes-sense
https://www.htmlgoodies.com/beyond/javascript/js-ref/a-guide-to-javascript-fuzzy-search-libraries.html
That being said, there's definitely margin to improve, and some of the suggestions above should already help you.
You can test the results with simulated data similar to your use case in this page, for further tweaking (you can probably experiment with the keys and weight options): https://fusejs.io/
We will analyze from our side how we can improve the default behavior, and made it available on the next OS UI release.
Best regards,
Bernardo Cardoso
Bernardo Cardoso wrote:
Thanks Bernardo. As developers we can always know our way around our codes although to explain this to end users that's the hard one lol. As soon as I arrived here in the office, I already got a ticket about it. Hahaha.