Hi everyone,
We are happy to announce a new OutSystems UI pattern: DropdownServerSide.
This pattern is a variation of the Dropdown component, recommended to achieve more advanced use cases:
- Display long lists of options. Fetch data when needed instead of having all data in memory, with this component you will have total control over when data is loaded.
- Customize the look and feel of dropdown options. The structure of the component can be changed in the canvas of Service Studio. For each of the dropdown items, you can drag and drop additional elements such as images, checkboxes, or text. Additionally, you can apply all the logic you need to customize the behavior of the dropdown.
Check these examples and more in the OutSystems UI Live StyleGuide
This pattern was released in OutSystems UI latest version (2.14.0), and includes a set of client actions that can be used in this component:
Try it now
Check more details about the new release in the Release Notes and download the latest OutSystems UI version.
Very useful ... Thank you !
Great news, no more workaround needed
Noice!
Good improvement!
Great!
Awesome, keep it up 💯!
Finally :)
We look forward to it!
Great! Useful.
Regard
Sunil Rajput
Awesome!! very useful
Great update 👌👌👌
Very useful !!
Very useful thank you !
Awesome very useful !!
So, I was looking for this for a long time and either we have to go with Forge available or do customizations, now this pattern is available, will be very helpfull where the data sets have lots of records and due to performance we fecth only few. Looking forward to use it.Thanks for this update.
That´s very nice!
Must Have feature.
Thanks for sharing new ideas...!!!
Great! Very useful for long lists.
Great
Great Component.
For DropdownServerSide_WithOnScrollEnding
The record cannot be searched if the list has yet to contain the record that we wanted (Have to scroll until we saw it only then we can search for it)
Not sure if this is the intended behavior*
Very useful!
It's gonna make UX better
Has anyone got this working within a popup block?, it seems that parts of the component gets the wrong z-index. I copied the dropdownserverside from the Styleguide, put it into a block.
The prompt is in the foreground, but the rest appears in the background. (The list, and search input).
Hi Kim Morgan Ellis Fiva,
There is an issue on that context related with z-index yes. Just to give you more info, the same issue is also present when inside a SideBar and BottomSheet as well.
They are issues we already fixed, and they will be available on the next release (under the code ROU-4102). In order to over come them, the z-index must be redefined through a CSS selector.
Sorry for that!
Cheers,JR
Hello José,
I was wondering if you could give more explanation or maybe an example on how to redefine the z-index and make the Dropdown Serverside work in a popup.
Thank you,
Charlie
Hi @Charlie Highum,
Redefining the z-index is basically overriding the CSS selector that is applying the current z-index value with one that solves your issue. However, as mentioned, this was already solved in version v2.15.0 under the code ROU-4102.
Cheers,GM
Great!!
Noice!!!
Thanks for this update, it will make things more exciting and improve performance.
Awesome!
Much needed. Thanks for the update
Nice feature to have, Thanks.
Nice, it will be really usefull and no workaround needed anymore!
Great job!
Very neat
Awesome !!
Great news! thanks
Great improvement, must needed one.
Excellent! That's a great new UI component.
Thanks alot for the update !!!
Great. Thanks for the update
Very useful. Thanks for sharing!!!
The one I've been waiting for...
Great news, this is something that I was looking for !!
Thank you for sharing this!
yeah I used it and its really very useful.
Very useful ...grt job
tried it! very usefull indeed, congrats!
Has anyone hit problems using DropDownServerSide and ensuring keyboard accessibility?
The first issue I hit was that Outsystems UI CSS does not have an entry for the focus state of an item, only a hover. So it is hard to work out which option currently has focus. I can fix that easily with
.osui-dropdown-serverside-item:focus { background-color:var(--color-neutral-2);}
The problem I'm now having is that using a list of options with an infinite scroll action, when you get to the bottom of the list of currently displayed items, and onscrollending fires, instead of scrolling down to the next one, the focus moves inexplicably to the top of the body, with the DropDownServerSide still open. I haven't worked out a solution to this yet.
Hi @Darren Meldrum
I would suggest opening a new post under OS UI since this thread is about the announcement and will be hard to track.
Fantastic!! Thankyou
Great . Thank you.
This advanced module is too advanced for me.
I need a wizard for me to control this module.
Great! Thanks!!
Thanks for sharing!
Very useful