54
Views
15
Comments
Solved
Dropdown Search Reactive search in multi columns
Question
Application Type
Reactive

Hi, 

I'm am creating a screen with a dropdown search and an input. I need to select the value in the dropdown search and show data in the input widget. Now I connected 2 columns in the 'Lable' of dropdown search as the screen shot below

My action

 For that I can get the 'Name' after selected value of dropdown

But I got 2 problem with this

1. After select both dropdown search and input show 2 value

I only show Id in 'EmpId' and Name in 'Name'. Is there any way to disconnect these 2 value when show them in the screen?

2. I change the value of dropdown search 2 times to test it, but in the 3rd time it show 2 value and the value of the input is not changed

I can't find where is the error, could you please help me for that?

I attached my oml (EmpName screen), you can run it for test.

Thank you so much.

MultiSearch_Ex.oml
2020-07-08 17-58-02
Suprio Roy
Solution

Sure.

I just used your .oml file and added my code.

MultiSearch_Ex.oml
2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello

I have created a scenario where you can Search Via name or a phone number and based upon your selection you will get the result and your form will be filled with the data.

I am attaching an Example and Oml to help you with this.

Sample - https://personal-ejuytnht.outsystemscloud.com/SamplePocOS/SampleEmployees?_ts=638184389680254419

I hope this will help you now

Sample_Search_Drop_down.oml
2023-10-21 19-42-11
Tousif Khan
Champion

Hello

I have Updated your Oml also I have created a same Scenario in my below comment have a look

I hope this will help you now

MultiSearch_Updated.oml
UserImage.jpg
Bella Nguyen

Thank you so much for that. It's really helpfull

But I just want to show only 1 value each line as below

I've tried to many ways to fix it but still not have any soloution.

Here is my oml


MultiSearch_Ex.oml
UserImage.jpg
Bella Nguyen

I checked your example and oml which you help me fixed it. It worked now but just small question is it possible to show only 1 data (only phone number) in the dropdown search after selected value in the list instead of both name and phone?

2020-07-08 17-58-02
Suprio Roy

Hi Bella,

If I am following your case properly , then in the on change action of the dropdown , you just need to trim down the selected value to show the phone number only. If your phone number is of fixed length , then you can use the substring method for trimming. 

UserImage.jpg
Bella Nguyen

Yes, I also think about trim it but If the phone number is not fixed lenght it will trim the name also.

For now, my data is not fixed lenght

2020-07-08 17-58-02
Suprio Roy

So, do you want the dropdown list should contain both phone number and name , but once user select some value , it only shows the phone number as the selected value. Could you please confirm this. 

UserImage.jpg
Bella Nguyen
2020-07-08 17-58-02
Suprio Roy
Solution

Hi , Even if your phone number is of not fixed length that thing can be handled. Store the selected record id from the dropdown and in the on change event get the phone number for that particular record. After that, using Javascript you can set the dropdown selected value.

var input =document.querySelector(".vscompvalue");

input.textContent=$parameters.TrimmedData;


Take an input parameter and set the phone number value to this input parameter. That will work. But the only issue will be with the user experience. The selected will first appear as the combination of Phone number and Name and then will get trimmed to Phone number only.

You can visualize this : 

https://suprio-roy2108.outsystemscloud.com/MultiSearch_Ex/EmpInfo?_ts=638187864664896310


May be others can give a better solution or I will try to look for something else.

UserImage.jpg
Bella Nguyen

thank you for your solution, It's good now, can you share your oml?

2020-07-08 17-58-02
Suprio Roy
Solution

Sure.

I just used your .oml file and added my code.

MultiSearch_Ex.oml
UserImage.jpg
Bella Nguyen

Thank you for all your help. My app is working now

2023-10-21 19-42-11
Tousif Khan
Champion

I’m glad it worked !

If you need any help you can also ping me.

Best Regards

Tousif Khan

2020-07-08 17-58-02
Suprio Roy
Solution

Hi , Even if your phone number is of not fixed length that thing can be handled. Store the selected record id from the dropdown and in the on change event get the phone number for that particular record. After that, using Javascript you can set the dropdown selected value.

var input =document.querySelector(".vscompvalue");

input.textContent=$parameters.TrimmedData;


Take an input parameter and set the phone number value to this input parameter. That will work. But the only issue will be with the user experience. The selected will first appear as the combination of Phone number and Name and then will get trimmed to Phone number only.

You can visualize this : 

https://suprio-roy2108.outsystemscloud.com/MultiSearch_Ex/EmpInfo?_ts=638187864664896310


May be others can give a better solution or I will try to look for something else.

2023-10-21 19-42-11
Tousif Khan
Champion
Solution

Hello

I have created a scenario where you can Search Via name or a phone number and based upon your selection you will get the result and your form will be filled with the data.

I am attaching an Example and Oml to help you with this.

Sample - https://personal-ejuytnht.outsystemscloud.com/SamplePocOS/SampleEmployees?_ts=638184389680254419

I hope this will help you now

Sample_Search_Drop_down.oml
2023-10-21 19-42-11
Tousif Khan
Champion

Hello

I have Updated your Oml also I have created a same Scenario in my below comment have a look

I hope this will help you now

MultiSearch_Updated.oml
UserImage.jpg
Bella Nguyen

Thank you so much for that. It's really helpfull

But I just want to show only 1 value each line as below

I've tried to many ways to fix it but still not have any soloution.

Here is my oml


MultiSearch_Ex.oml
UserImage.jpg
Bella Nguyen

I checked your example and oml which you help me fixed it. It worked now but just small question is it possible to show only 1 data (only phone number) in the dropdown search after selected value in the list instead of both name and phone?

2020-07-08 17-58-02
Suprio Roy

Hi Bella,

If I am following your case properly , then in the on change action of the dropdown , you just need to trim down the selected value to show the phone number only. If your phone number is of fixed length , then you can use the substring method for trimming. 

UserImage.jpg
Bella Nguyen

Yes, I also think about trim it but If the phone number is not fixed lenght it will trim the name also.

For now, my data is not fixed lenght

2020-07-08 17-58-02
Suprio Roy

So, do you want the dropdown list should contain both phone number and name , but once user select some value , it only shows the phone number as the selected value. Could you please confirm this. 

UserImage.jpg
Bella Nguyen
2020-07-08 17-58-02
Suprio Roy
Solution

Hi , Even if your phone number is of not fixed length that thing can be handled. Store the selected record id from the dropdown and in the on change event get the phone number for that particular record. After that, using Javascript you can set the dropdown selected value.

var input =document.querySelector(".vscompvalue");

input.textContent=$parameters.TrimmedData;


Take an input parameter and set the phone number value to this input parameter. That will work. But the only issue will be with the user experience. The selected will first appear as the combination of Phone number and Name and then will get trimmed to Phone number only.

You can visualize this : 

https://suprio-roy2108.outsystemscloud.com/MultiSearch_Ex/EmpInfo?_ts=638187864664896310


May be others can give a better solution or I will try to look for something else.

UserImage.jpg
Bella Nguyen

thank you for your solution, It's good now, can you share your oml?

2020-07-08 17-58-02
Suprio Roy
Solution

Sure.

I just used your .oml file and added my code.

MultiSearch_Ex.oml
UserImage.jpg
Bella Nguyen

Thank you for all your help. My app is working now

2023-10-21 19-42-11
Tousif Khan
Champion

I’m glad it worked !

If you need any help you can also ping me.

Best Regards

Tousif Khan

2025-10-18 11-13-53
Ramesh subramanian

Hi Bella Nguyen,

Please Check below links- 

1. https://personal-ww5hcsw8.outsystemscloud.com/DataGridSampleReactive/

   component- https://www.outsystems.com/forge/component-overview/9764/data-grid-reactive

2. https://www.outsystems.com/help/servicestudio/9.0/Using_Data/aggregates/Filtering_Results.htm

3. https://www.youtube.com/watch?v=rFv2lu_sbmY

You can put filter expression like below. 

Employee.Name like "%" + Searchkeyword + "%" or Employee.Email like "%" + Searchkeyword + "%" or Employee.Phone like "%" + Searchkeyword + "%"

for exact match use = operator


Thanks,

Ramesh

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