Structured Multi column ComboBoxlike

Structured Multi column ComboBoxlike

  

Hello

I would like to have on my page a combo box, with more than one attribute as an option. I tried to use a computed attribute with the concatenation of the attributes that I want but with that way,  I am not able to have the structure and layout that I want (Image below).

Is there another way to have the attributes like this? I don't need a combobox a just want to look like this.

I heard something with web blocks, and when you type something in the input area the webblock would display and you select the option, do you know something?

This is not possible in a select/combobox, since it's values will be displayed as text (you can however choose to put alot of spaces between each value).

You can use a component called Select2 (this is creating a look and feel of a select/combobox, but is in fact a structure of divs and spans). This one can contain html so you can style it however you want.

Hello 


Since I want the text to be aligned like columns , the space " " between attributes is not possible.

I have tried the select 2, but I don't seem to understand how it works.


Hi Rita,

I have one alternative for this. Introduce an ad hoc attribute in the aggregate and bind the new added ad hoc attribute to the Source Attribute of the Combo Box Widget. I think this is one way by which you can make the end user understand the uniqueness of each drop down values.

Check this Out: Demo Link

Hope it helps.


Kind Regards,

Benjith Sam

Rita, you can try this jQuery plugin:


https://www.jqueryscript.net/form/Multi-column-Dropdown-Plugin-jQuery-Inputpicker.html


I think that it does exacly what you want


Cheers

Solution

Hello all 

I find that the best way to solve this is with the AutoComplet Widget (link below)

https://www.outsystems.com/forge/component/494/search-and-autocomplete/?Unfollow=False

I built the structure required in a web block and place it in the autocomplete Widget placeholder, and an input field in the other placeholder. 

Solution