For each loop to display the items side by side

Question

Hi, 
 I have a gridfield inside a foreach loop. I need to display the items side by side. Currently it is displayed one below the other. I need to display 2 grids in each row. 
 How to achieve this.

Harshmodi · Answer

Hey srinivaasant574373 , 
 From your query, it seems like you want to display 2 gridFields side by side in each row. However, currently, all the gridField are being displayed vertically (one below the other). If my understanding is correct, here's a sample code that should help. If not, could you please provide a bit more detail about your use case? 
 
 a!localVariables(
 local!myList: 5,
 a!forEach(
 items: enumerate(local!myList),
 expression: a!columnsLayout(
 columns: {
 /* First grid in the row */
 a!columnLayout(
 contents: { a!gridField(label: "Grid 1", ) }
 ),
 /* Second grid in the row */
 a!columnLayout(
 contents: { a!gridField(label: "Grid 2", ) },
 
 )
 }
 )
 )
)

Yashwanth Akula · Answer

a!localVariables(
 local!caseGridDatraForAllUsers: enumerate(5),
 local!numberOfColumns: 2,
 {
 a!columnsLayout(
 columns: a!forEach(
 items: enumerate(2) + 1,
 expression: a!localVariables(
 local!colIndex: fv!index,
 a!columnLayout(
 contents: {
 a!forEach(
 items: local!caseGridDatraForAllUsers,
 expression: if(
 or(
 mod(fv!index, local!numberOfColumns) = local!colIndex,
 and(
 mod(fv!index, local!numberOfColumns) = 0,
 local!colIndex = local!numberOfColumns
 )
 ),
 {
 a!cardLayout(contents: { a!richTextDisplayField() }),
 a!gridField()
 },
 {}
 )
 )
 }
 )
 )
 )
 )
 }
) 
 Refer "CARDS AS A LIST ITEMS" in patterns of the Interface for better understanding

EREN_YEAGER · Answer

This is what I have understood - OP needs two grids in a row and multiple rows as per items.

Please go through this blog post by Harshit Bumb on Appian Space https://allaboutappian.wordpress.com/2022/08/05/dynamic-action-tiles/.
You will find the exact logic and code there

Yashwanth Akula · Answer

Hi srinivaasant574373 You can use the columnsLayout, something like this, to display the gridField side by side: a!columnsLayout(
 columns: a!forEach(
 items: local!caseGridDatraForAllUsers,
 expression: a!columnLayout(
 contents: {
 a!cardLayout(contents: { a!richTextDisplayField() }),
 a!gridField()
 }
 )
 )
 )

For each loop to display the items side by side

Top Replies