56
Views
12
Comments
Solved
Populating second combo box with data according to first one
Question

Hello! I'm newish to outsystems and I'm trying to populate a combo box dropdown with data according to the first one. I'm getting my data as json from rest api. How should I approach this problem? I have completed the course "Traditional web development" and I have quite a lot previous experience with data handling in front end from react/javascript languages, but I'm really having trouble with solving this.

I have defined an input variable in the rest api request and I want it to be defined by the first combo box selected value.

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Roni,

I have checked the shared oml file and for the metioned use case I would suggest you the following approach.

Implementation Steps:

1) Define a local variable (RoverCameraList) of Camera List type

2) In the Camera Dropdown map the newly defined local variable as SourceRecordList

3) For both the dropdown map the Source Identifier Attribute field with the Id attribute

4) In the Preperation action flow Filter out the Camera list by the RoverId using ListFilter System action as shown below

5) In the Rover Dropdown OnChange action flow introduce the same filter logic with an additional Ajax node to refresh the Camera Dropdown with the Filtered out list

See this sample : MarsRoverSelection


Refer to the attached .oml file

I hope this helps you!


Kind regards,

Benjith Sam

testProject.oml
UserImage.jpg
Ronivil

Hello and thanks for your suggestions! I tried your solution, but Im not getting any data from 3 first objects, only object that returns camera data is perseverance. Did you have the same problem?

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Roni,

Yeah that's correct. Sorry! I made a slight mistake in the Filter logic. To make it work, make a code change in the (Preparation & CameraSelectByRover action flow) ListFilter node SourceList and Condition as mentioned below (and also update the assignment node accordingly)

SourceList: GetRovers.Response.Rovers
Condition: Id = RoverSelectId

Note: You need to filter the Rovers list to get the List of Camera associated with it.

See this sample : MarsRoverSelection


Refer to the attached .oml file

I hope this helps you!


Kind regards,

Benjith Sam

testProject.oml
UserImage.jpg
Ronivil

Thanks alot for the help, it works now! I figured it had something to do with the filters.

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Roni. Glad to help you :)


Kind regards,

Benjith Sam

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Roni,

Yeah that's correct. Sorry! I made a slight mistake in the Filter logic. To make it work, make a code change in the (Preparation & CameraSelectByRover action flow) ListFilter node SourceList and Condition as mentioned below (and also update the assignment node accordingly)

SourceList: GetRovers.Response.Rovers
Condition: Id = RoverSelectId

Note: You need to filter the Rovers list to get the List of Camera associated with it.

See this sample : MarsRoverSelection


Refer to the attached .oml file

I hope this helps you!


Kind regards,

Benjith Sam

testProject.oml
2021-09-21 09-26-31
Aadhavan Shanmugam

Hi @Ronivil ,

You can use onchange action for that first combo box, in onchange action, filter and refresh the list result for second combobox and use ajax refresh.

Thanks, Aadhavan S

UserImage.jpg
Ronivil

Hello and thanks for your answer!

I didn't thought quite understand how I should refresh data. I am consuming a REST API where I must get 2 different lists. And the second rest api call should have attribute according the first combo box. Is there an example where this is done? 

2025-04-17 05-42-16
Ajit Kurane
2018-12-26 07-13-49
Tarun Verma
2025-04-17 05-42-16
Ajit Kurane
UserImage.jpg
Ronivil

Thanks for the links. I have viewed them before but it seems that they are using database inside outsystems, right? I dont really know how to modify that to work with rest apis and json.

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Roni,

I have checked the shared oml file and for the metioned use case I would suggest you the following approach.

Implementation Steps:

1) Define a local variable (RoverCameraList) of Camera List type

2) In the Camera Dropdown map the newly defined local variable as SourceRecordList

3) For both the dropdown map the Source Identifier Attribute field with the Id attribute

4) In the Preperation action flow Filter out the Camera list by the RoverId using ListFilter System action as shown below

5) In the Rover Dropdown OnChange action flow introduce the same filter logic with an additional Ajax node to refresh the Camera Dropdown with the Filtered out list

See this sample : MarsRoverSelection


Refer to the attached .oml file

I hope this helps you!


Kind regards,

Benjith Sam

testProject.oml
UserImage.jpg
Ronivil

Hello and thanks for your suggestions! I tried your solution, but Im not getting any data from 3 first objects, only object that returns camera data is perseverance. Did you have the same problem?

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Roni,

Yeah that's correct. Sorry! I made a slight mistake in the Filter logic. To make it work, make a code change in the (Preparation & CameraSelectByRover action flow) ListFilter node SourceList and Condition as mentioned below (and also update the assignment node accordingly)

SourceList: GetRovers.Response.Rovers
Condition: Id = RoverSelectId

Note: You need to filter the Rovers list to get the List of Camera associated with it.

See this sample : MarsRoverSelection


Refer to the attached .oml file

I hope this helps you!


Kind regards,

Benjith Sam

testProject.oml
UserImage.jpg
Ronivil

Thanks alot for the help, it works now! I figured it had something to do with the filters.

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Roni. Glad to help you :)


Kind regards,

Benjith Sam

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