Created on 01 May 2018
icon_unfollowing
Login to follow
multipleselection

MultipleSelection

icon_trusted
Stable version 2.0.3 (Compatible with OutSystems 11)
Other versions available for 10
Uploaded on 01 June 2021 by 
multipleselection

MultipleSelection

Documentation
2.0.3

Note: Implementation examples are available in the demo application. It’s recommended to consult it for a better comprehension.

 

Below is an example of how to implement the MultipleSelection in a page.

 

 

Main Structure

When creating a new page, insert the WebBlock Selection received through the dependencies and drag it to the screen or web block.

 

 

1. Create the Table

 

We start by creating a table with the data we intend to use to fill the dropdown.


 

 

2. Create the variables

 

Create 2 variables. One with the type Option List and the other one with the type Option.

 
Create a text variable that will be used to keep the selected values. In this example, the variable is called HiddenInputVariable.


 

 

3. Add preparation

 

In the preparation we will get the data from our table and populate the option list.

  

 

4. Make the screen

 

Drag the Selected Web Block to the screen and place a ComboBox on top.

 

Configure the ComboBox as follows: 


 

 

In the same way we will configure the Selection Web Block: 


 

 

5. Create the invisible Input

 

The Web Block Selection has a placeholder to place an Input that will keep the Ids of the options that were chosen in the dropdowns. That  input will be invisible in the browser.

 

Create the input and associate the variable HiddenInputVariable that was created earlier.


 

Features List

 

──────────────────────────────────────────────────────────────────────────────

Default

──────────────────────────────────────────────────────────────────────────────

 

This example allows you to select and unselect the options you want.

 

How to implement

To make the DropDown work in default mode, just follow the steps indicated below and leave the extras empty by filling only the mandatory fields of the Selection Web Block.


──────────────────────────────────────────────────────────────────────────────

Limit the number of options that can be selected

──────────────────────────────────────────────────────────────────────────────

 

This example allows you to select and unselect the options you want with a limit on the number of options you can select. In this example, you can only select 4 options.

How to implement

To make the DropDown work with a limit on the number of options you can select, just follow the steps indicated below. Set the limit of the number of options the user can choose and fill the mandatory fields of the Selection Web Block.


──────────────────────────────────────────────────────────────────────────────

Not closed on select

──────────────────────────────────────────────────────────────────────────────

This example allows you to select and unselect the options you want, keeping the ComboBox open until you click on another area.

 

How to implement

To make the DropDown not close when choosing an option, just follow the steps below. Set the CloseOnSelect to False and fill in the mandatory fields of the Selection Web Block.



──────────────────────────────────────────────────────────────────────────────

Preselect options

──────────────────────────────────────────────────────────────────────────────

 

This example allows you to preselect the options and then unselect and select again.

 

How to implement

In this example, we already have options selected when we open the page. To achieve this, in the Preparation we assigned the attribute Selected, of the options that we wanted to be selected, to True.



──────────────────────────────────────────────────────────────────────────────

Pre select and disable options

──────────────────────────────────────────────────────────────────────────────

 

This example allows you to preselect and deactivate the desired options. You cannot select disabled options, but if they are already selected, you can still unselect them.

 

How to implement

In this example, we already have options selected when we open the page. To achieve this, in the Preparation we assigned the attribute Selected, of the options that we wanted to be selected, to True.

 

To disable an option, the attribute Disabled of that option must be set to True.

 

You will still be able to remove the already selected options, but it will not be possible to select them again.



Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
MultipleSelection has no dependencies.