665
Views
13
Comments
Solved
How can i create a customize dropdown like this in Reactive Web?


Hi guys, the native dropdown don't have the possibility to customize into the CloneOfOutsustemsUI in the reactive web.

In this case, i'd like to know how can I create a component like this from zero and put two icons as the image looks bellow?


2021-06-09 13-39-18
Agno Silveira
 
MVP
Solution

Look this examples:

Is something like this what you need?


You can custom your dropdown in reactive, steps:

Regards.

2021-06-09 13-39-18
Agno Silveira
 
MVP

Hello Wallace, 

See this component or this,

You can customize it as per your need.

Hope it helps.

Kind regards.

2024-03-15 16-39-59
Wallace Pimenta

This component not passed to be safely in my environment. But i'd like to know how i can edit or create from zero a componente like this print i posted here.

2021-06-09 13-39-18
Agno Silveira
 
MVP
Solution

Look this examples:

Is something like this what you need?


You can custom your dropdown in reactive, steps:

Regards.

2024-03-15 16-39-59
Wallace Pimenta

This is a native dropdown? I will check this 

2024-03-15 16-39-59
Wallace Pimenta

Thanks Agno, i did some tests here, but i couldn't find how i remove the pictures into the dropdown when it is expanded. Howhever i think your ansuwer was the most appropriated for my case. 

UserImage.jpg
Saransh

but then with this 'custom' property native functionality of dropdown will not work like keyboards key will not work. 
Then what's the solution for that?

2025-09-24 12-14-56
Abhishek Sen

hiii

you can use forge component for this or you use some cSS

2024-03-15 16-39-59
Wallace Pimenta

You could show me how can I change the icon from dropdown e even insert another second icon into the native dropdown only changing the css? Show me the code please because I didn’t get do this

2022-06-30 16-10-08
Volodymyr Tkachenko

I would recommend customizing the Outsystems Dropdown Search web block. 
You can try doing this by adding an extended class and writing some CSS or by cloning this component to your Patterns module and customizing it there. 

2024-03-15 16-39-59
Wallace Pimenta

I already try it but the content of result when is listing I could not change. If you have some exemple how change the content of dropdown search to look like as my exemple I will be happy!

2023-01-21 03-57-41
Sagar Karambelkar

You can Customize your dropdown by writing extended class or your own CSS as per the requirement you have,

Otherwise you can also search on forge about the Dropdown. Hope this helps

2024-03-15 16-39-59
Wallace Pimenta

Can u show me how do I change the icon and put a second icon into this native dropdown? I tried but doesn’t worked 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.