[OutSystems UI] Dropdown Server Search
outsystems-ui
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive

Hi,

I was trying to implement the dropdown widget with server search and found out the component the OutSystems widget implements already has this option.

Is it possible to implement this on the widget current state?

Regards,

Solution

Hi @João Franco,

Probably you was not using the snippet well,

In order to agile it, I did an .oml to also test it and I was able to go a little bit forward and create a block that encapsulate the DropdownSearch to be used in several places with this behaviour avoiding this way the need on add this logic to all screens where pattern will be in use! 
If you have a *_CW module that will be the place to add it!

That said, I hope it helps!

Cheers,
JR

jRioReactive_OverridePatConf.oml

Some updates on this:

I manage to initialize the widget with onServerSearch option, by adding this code to the widget OnInitialize event.


let dropdownWidget = document.getElementById($parameters.WidgetId).firstChild;

VirtualSelect.init({

  ele: '#' + dropdownWidget.id,

  onServerSearch: $actions.Search,

  search: true

});

The main problem with this is that I'm depending on the structure that the widget is built upon, and if it changes, this will break. And the 2nd issue, which is also the most urgent is that I'm losing the previous configurations because this implementations overrides the widget init, which defeats the purpose of implementing this with OutSystemsUI widget.

Hi João,


Did you try updating that without the init? Not sure if this provider supports updating this option on runtime:



Otherwise, I believe it is as you mentioned, you will loose the OutSystems UI configs. This is in fact something that we are aware of and working on a better solution in the future, to better extend provider based patterns.


Best regards,

Bernardo Cardoso

I did not. As right now I was exploring the DropdownAPI, what is implemented how could I extend this without cloning the source code.

In the worst case, I thing the best solution would be to clone it as it is and try to extend it on my own.


Best Regards

Hey Bernardo,

I did what you recomended but it didn't work, most likely because the component documentation says that property is not allowed to be used as an attribute, therefore I shouldn't assign anything to it. When I do, the widget just ignore it, because there maybe a validation inside the component to fireup that event when it has been initialized on the init function (just a wild guess).

I will keep reading the framework implementation, clone the widget and try to figure out a way to better implement this.

Thanks for the help. 

Best Regards

Hi,

Yes, I was afraid that would be the result, unfortunately. The provider doesn't have great support for runtime changes, like this.

We are working on a way to get around this, something like the old AdvancedFormat parameter, for these use-cases.

But yes, in the meantime, I believe you will need to follow one of those directions to support this use-case!


Best regards,

Bernardo

Hello @João Franco 

Any update on this topic?
Any finding you can share or anything that we could try to help with?

Best Regards,
GM

Hi @Gonçalo Martins,

still don't have anything new regarding this. I've been reading the code on my spare time each is very limited this days and so it's moving slowly.

I will let you know as soon as I can.

Best Regards

Hi @João Franco,

Can I ask you why do you need this behaviour? 

I'am asking it because this pattern could handle ~100k results with no performance issues... That's why we didn't implement this feature by default.

That said, in order to add the behaviour you need, you can use the snippet:

var myDD = OutSystems.OSUI.Patterns.DropdownAPI.GetDropdownById("WidgetID");

// Override Prepare configs method...

myDD.prepareConfigs = () => {

    // Add new attribute!

    myDD._virtualselectOpts.onServerSearch = $actions.Search;

    // Set the options with the new attribute!

    this._virtualselectOpts = myDD._virtualselectOpts;

    // Create the new provider instance!

    myDD.createProviderInstance();

}

// Redraw Pattern

myDD.redraw();

This snippet should be added into a JS Node at the Initialized event triggered by pattern, there you can also use the returned WidgetID, or since you're using info that based on database, you can set it at the OnAfterFecth in order to affect the pattern at the right moment you need...

Keep in note that since we didn't implement this behaviour we can't ensure this snippet will solve your use case 100% of the cases...


Cheers,
JR

Hi José,

The main reason I am trying to implement this is that there is always a necessity for this use case, even if the widget can deal with 100k. I might have an entity with way more records than 100k, or have multiple dropdowns with a lot of records. It will eventually pile up on my page OR the queries to bring so many records might be too slow and I might not even need to get so many records in the first place because the user needs to add some specific records, and that's why it's relevant.

Thanks for the snippet, I will test this in the weekend, and reply to you again.

Cheers

Hi @João Franco,

Thanks for your clarification... Appreciated and understood :)

Let me know if the snippet helped or if you need anything else from our side! ;)

Cheers,

JR

I'm still working on this in my spare time. The snippet as it is doesn't help much because it's overriding the options and configurations previously loaded but I still need to experiment a bit with it.

I will post here as soon I have news.


Solution

Hi @João Franco,

Probably you was not using the snippet well,

In order to agile it, I did an .oml to also test it and I was able to go a little bit forward and create a block that encapsulate the DropdownSearch to be used in several places with this behaviour avoiding this way the need on add this logic to all screens where pattern will be in use! 
If you have a *_CW module that will be the place to add it!

That said, I hope it helps!

Cheers,
JR

jRioReactive_OverridePatConf.oml

Hi @José Rio,

I wasn't really using it wrong, but because you had some locks in mind to be implemented in the OutSystems flow when you wrote that snippet, and I didn't had time to properly play with this, it was working as expect because the Initialize Event was always being triggered, which wasn't ideal. 

After checking your module, I took some time to play with this and implemented this component and uploaded it to forge > https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=13348&ProjectName=reactive-dropdownselect-w-search

Using this component still takes a bit of work, that's why I still want to improve this, but for now it works. If anyone needs to implement this, just follow the Demo as an How-To implement the pattern.

Major kudos to @José Rio and @Bernardo Cardoso for helping out with this project.

Cheers!

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