Skip to Content (Press Enter)
2020-02-21 13-39-55
João Franco
202Views
3Comments
[OutSystems UI] How to implement OutSystems UI Dropdown
Question
Forge
How-to
OutSystems UI
OutSystems UI Patterns
outsystems-ui
Reactive icon
OutSystems UI (O11)
Forge asset by OutSystems

Hi,

I was having some trouble implementing the dropdown pattern from OutSystems UI and couldn't find the answer anywhere, so I decided to do a simple a How-To in case someone else faces this.


Component Structure

  1. Dropdown Widget Id
  2. Option Link Id

The normal use case for a dropdown is to select an option from a box so:

  1. The link should be associated with an action (with Ajax Submit)
  2. That action should to the necessary logic, in this case only refresh the selected option area
  3. Before leaving the action, add  the OutSystems UI ToggleElement that can be found in OutSystemsUIWeb/OutSystemsUI -> Interaction -> ToggleElement, so the dropdown closes.
    1. WidgetId: The Dropdown WidgetId (Dropdown.Id)
    2. TriggerButtonId: the option link Id (person_link.Id)


This last step was what was blocking me and couldn't find that it is supposed to use these actions to interact with this widget specifically.


How To URL

https://joao-franco.outsystemscloud.com/HowTos/HowToDropdown.aspx

Documentation
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Controls/Dropdown

and forum posts :)


Cheers,

HowTos.oml
0
0
03 Apr 2020
Copy Link
2020-12-07 13-36-58
Alexandre Santos
Champion

Hi João!


Am I wrong, or this is related with OutSystems UI Web?

(traditional web and not reactive)


Just asking because in the Reactive version I think you don't need to do all of that and can be misleading some people that have issues with the Dropdown from this version.


Cheers!

0
0
03 Apr 2020
Copy Link
2020-02-21 13-39-55
João Franco

Hi Alexandre,

you are right, this was related to OutSystems UI Web, version 1.8 and not OutSystems UI (reactive and mobile). The point for this post was to try to help out people with the same issue and not confounding them even more, so my apologies for this. 

I don't know why the OML failed to upload, tho. 

HowTos.oml
1
0
14 Apr 2020
Copy Link
2020-09-21 08-42-47
Vincent Koning

That's kinda strange cause I don't need that ToggleElement widget to remove the dropdown list.

I have added my demo to this post and you can see it in action here:https://vkoning.outsystemscloud.com/DropdownDemo/Demo.aspx

My OnAction/Link flow looks like this:

DropdownDemo.oap
0
0
04 Apr 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.