How is your experience with the OutSystems Community?
22
Views
33
Comments
Solved
Accordion show data from Rest API

Hi, all

i need help, situation is, i have data from REST API, have Group and department. My question is how i want to show all and populate the department based on Group. Sample below i just drag into accodion, but only show 1 data, how to show all. for example 

1st accordion Group Market Development have sustainbility department, Shariah Department and etc...

2nd accordion Group Procurement have AV department, Chargeman department etc...

2023-09-06 07-26-35
Sudip Pal
Solution



This will definitely work. Let me know if you face any issues.

Thanks,

Sudip

2023-09-06 07-26-35
Sudip Pal

Hi, please follow the below Widget structure to implement the scenario. Let me know if you need OML for this solution.


This might be helpful for you.

Thanks,

Sudip

UserImage.jpg
wan mohd shariffuddin

sure, if you can share the OML.

Thank you so much

2023-09-06 07-26-35
Sudip Pal

Hey, try the below OML and let me know if you face any difficulty.

This solution can be implemented in different ways.

Thanks, 

Sudip

Accordion.oml
UserImage.jpg
wan mohd shariffuddin

Thank you for your OML, my current data get from REST API, all attribute in same API, StaffName, Department,Group, etc.

i see your OML not using rest api, get me confuse...im so sorry, im new in outsystem. if you can use get data from rest api so i can learn the process.


Thank you

2023-09-06 07-26-35
Sudip Pal

Hey , can you share the response structure image of your REST API? I will implement based on that.

Thanks 

Sudip

2023-09-06 07-26-35
Sudip Pal

Hey, I have created a small simulation of the API. I am using Product API. So, consider Category as Group and ProductTitle as Department. 

Thanks,

Sudip

Accordion_v2.oml
UserImage.jpg
wan mohd shariffuddin

my situation is, i have listing all staff with group and department in same API, how i want to make accordion based on Group. when click Group it show department. I have try based on your OML, maybe im new in this area, need to understand 1st. I try again based on your OML. 

Thank you

NO

STAFF NAME

GROUP

DEPARTMENT

1

XXX

S

A

2

XXX

D

B

3

XX

S

C

4

XX

S

D

UserImage.jpg
wan mohd shariffuddin

yes current im try your V2, based on your OML, how you get or create DepartmentList after Name attribute

mine

2023-09-06 07-26-35
Sudip Pal

I have created the below structure. You can check that in v2

UserImage.jpg
wan mohd shariffuddin

Hai, im able to make data appear, but the each group show same department, it should filter by group.

2023-09-06 07-26-35
Sudip Pal

Can you please share the SourceList and Condition that you have used to filter?

2023-09-06 07-26-35
Sudip Pal

As you are seeing all the departments under a group then recheck the below filter condition

If you share any sample OML, I will modify that

UserImage.jpg
wan mohd shariffuddin

i just follow your oml, same name but only different API. 

2023-09-06 07-26-35
Sudip Pal

What about the filter condition? Have you changed anything on FilterDepartmentByGroupName ?

UserImage.jpg
wan mohd shariffuddin

now im able to show list department based on group. Thank you very much for your help. But Im facing one problem, the department show based on staff in department. for example have 4 staff in department, it show 4 department same name. how to make group to the department so it not show based on number of staff

2023-09-06 07-26-35
Sudip Pal

Use ListDistinct on DepartmentList and use the output to in ListAppendAllDepartmentByGroup.

UserImage.jpg
wan mohd shariffuddin


if like this, the result still same with previous


2023-09-06 07-26-35
Sudip Pal

Let me understand the problem again.

Your case is like

GroupA

  • DepartmentA
  • DepartmentB
  • DepartmentC
  • DepartmentB

GroupB

  • DepartmentX
  • DepartmentY
  • DepartmentX
  • DepartmentY

and You want to make the result like the below example

GroupA

  • DepartmentA
  • DepartmentB
  • DepartmentC

GroupB

  • DepartmentX
  • DepartmentY


Is this correct?


UserImage.jpg
wan mohd shariffuddin


NO

STAFF NAME

GROUP

DEPARTMENT

1

XXX

S

A

2

XXX

D

B

3

XX

S

C

4

XX

S

D

my case is, i have data that show staff name, group and department. This data i get using rest api. my case is, accordion have list of group, when user click accordion, the listing should show department based on what group that user click. As table show, when user click group S, the listing show department A,C and D. 

My situation now,  the listing repeating based on staff that have in department. for example, when user click group S, the listing show department A,C and D and when have exmpple 5 staff with same department it listing 5 same department instead of just 1 department.

for example that below current listing, for example Trusts & Investment Management have 5 it should show only 1. this happen because in this department have 5 person.

i hope you can understand my situation.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

"Use ListDistinct on DepartmentList and use the output to in  ListAppendAllDepartmentByGroup. "

@Sudip Pal , listdistinct on his original list won't do a thing, since there is different staff in same department.  For listdistinct he needs to first create a helper list without staff information.

2023-09-06 07-26-35
Sudip Pal

Thanks Dorine. I will follow your advice and guide him.

2023-09-06 07-26-35
Sudip Pal



Have you followed these steps?

Thanks,

Sudip

UserImage.jpg
wan mohd shariffuddin

hi @Sudip Pal this is my implementation. The result still same

2023-09-06 07-26-35
Sudip Pal
Solution



This will definitely work. Let me know if you face any issues.

Thanks,

Sudip

UserImage.jpg
wan mohd shariffuddin

Hi @Sudip Pal 

it's work!!!!!! Thank you for your help. can you explain about your new implementation, so i can understand more about this implementation.

Thank you so much

2023-09-06 07-26-35
Sudip Pal

Let's take an example of one case

Group     Department

     S             D

     T             B

     S             C

     S             D


First, I appended all the groups inside Groups variable. So now, Groups = [S, T, S, S]

As Groups contains duplicates so I have used ListDistinct to get Distinct values 

ListDistinct(Groups) = [S, T]

I have assigned Groups = ListDistinct(Groups). So, Groups = [S, T]

Then I am looping Groups and filtering the original API data by the current group name.

Let me explain first iteration -------

FilterDepartmentByGroupName(SourceList: API_Data, Condition: API_Data.GroupName = 'S') = [D, C, D]

We are assigning DepartmentList = [D, C, D] 

As DepartmentList contains duplicates then we need to use ListDistinct.

ListDistinct(DepartmentList) = [D, C]


At last, we are appending all the data in GroupWithDepartmentList

ListAppend(List: GroupWithDepartmentList,Element: {Group:'S',Department: [D, C]})


Thanks,

Sudip



UserImage.jpg
wan mohd shariffuddin

Thank so much for your explaination, 

Thank you again for your help. Another thing, with this implementation, if i want to show total number staff in each department and show inside accordion is it possible?

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