Forge Component
(91)
Published on 25 Aug (4 weeks ago) by OutSystems R&D
91 votes
Published on 25 Aug (4 weeks ago) by OutSystems R&D
Processing Upload...

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,

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!

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:

Processing Upload...

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.