Question

For each loop to display the items side by side

Forum|Forum|1 year ago
May 22, 2025
10 replies
0 views

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.

yashwantha0914

Hi [mention:2636807152274a4380d4056f6dc9e842:e9ed411860ed4f2ba0265705b8793d05]

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()
        }
      )
    )
  )

srinivaasant574373Author

[mention:f0523105fd4d4e879f169a28f3dd0ec5:e9ed411860ed4f2ba0265705b8793d05] Can we make it to have 2 grids in each row. This code displays all the grids in single row

yashwantha0914

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

harshm4411

Hey [mention:2636807152274a4380d4056f6dc9e842:e9ed411860ed4f2ba0265705b8793d05] ,

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", ) },
          
        )
      }
    )
  )
)

srinivaasant574373Author

enumerate function is not supported since I have a map type inside a local variable. My use case is to display grid for each user data. Each row should have 2 grids.

a!columnsLayout(
    columns:a!forEach(
      items: local!caseGridDataforallUser,
      expression: {
        
        a!columnLayout(
        contents:{
          a!cardLayout(
            contents: {
              a!richTextDisplayField(
                value: a!richTextItem(
                  text: user(
                    index(local!allUsers, fv!index, {}),
                    "firstName"
                  ) & " " & user(
                    index(local!allUsers, fv!index, {}),
                    "lastName"
                  ),
                  color: "NEGATIVE",
                  style: "STRONG"
                )
              ),
              a!gridField_24r3(
                labelPosition: "ABOVE",
                data: fv!item,
                columns: {
                  a!gridColumn(
                    label: rule!INZ_I18N_displayLabel(
                      i18nData: ri!i18nInterfaceData,
                      bundleKey: cons!UWG_CONS_TXT_INTERFACE_COMPONENT_INTERNATIONALIZATION & ".queue"
                    ),
                    value: rule!INZ_I18N_displayLabel(
                      i18nData: ri!i18nInterfaceData,
                      bundleKey: cons!UWG_CONS_TXT_INTERFACE_COMPONENT_INTERNATIONALIZATION & "." & fv!row.key
                    )
                  ),
                  a!gridColumn(
                    label: rule!INZ_I18N_displayLabel(
                      i18nData: ri!i18nInterfaceData,
                      bundleKey: cons!UWG_CONS_TXT_INTERFACE_COMPONENT_INTERNATIONALIZATION & ".cases"
                    ),
                    value: a!linkField(
                      links: a!dynamicLink(
                        label: fv!row.count,
                        saveInto: {
                          a!save(
                            ri!selectedBucket,
                            index(
                              local!caseBucketsToDisplay,
                              fv!identifier
                            )
                          ),
                          a!save(ri!isPendingWorkUnassignedBucket, true),
                          a!save(ri!isWorkToCompleteBucket, false),
                          a!save(
                            ri!unassignedRoleRefId,
                            if(
                              fv!row.key = cons!UWG_CONS_TXT_WORKBENCH_BUCKET_KEY_UNASSIGNED_NEW_BUSINESS_UW,
                              cons!UWG_CONS_INT_REFERENCE_ID_PARTY_ROLE_ADMIN_UW,
                              cons!UWG_CONS_INT_REFERENCE_ID_PARTY_ROLE_ADMIN_NBC
                            )
                          ),
                          a!save(
                            ri!isPreDecisionUnassignedCases,
                            if(
                              fv!row.key = cons!UWG_CONS_TXT_WORKBENCH_BUCKET_KEY_UNASSIGNED_POST_DECISION_NBC,
                              false,
                              true
                            )
                          )
                        }
                      )
                    ),
                    align: "END"
                  ),
                  a!gridColumn(
                    label: rule!INZ_I18N_displayLabel(
                      i18nData: ri!i18nInterfaceData,
                      bundleKey: cons!UWG_CONS_TXT_INTERFACE_COMPONENT_INTERNATIONALIZATION & ".oldestDate"
                    ),
                    value: fv!row.oldestDate
                  )
                },
                pageSize: cons!CL_CONS_INT_PAGE_SIZE_50,
                borderStyle: "LIGHT"
              )
            },
            height: "AUTO",
            showWhen: or(
              and(
                a!isNullOrEmpty(ri!selectedLeaderIds),
                ri!showAllLeadersSelected <> true
              ),
              ri!showAllLeadersSelected = true()
            ),
            shape: "ROUNDED",
            padding: "NONE",
            marginBelow: "STANDARD"
          )
          
        }
      ),
      a!columnLayout(
        contents:{
          a!cardLayout(
            contents: {
              a!richTextDisplayField(
                value: a!richTextItem(
                  text: user(
                    index(local!allUsers, fv!index, {}),
                    "firstName"
                  ) & " " & user(
                    index(local!allUsers, fv!index, {}),
                    "lastName"
                  ),
                  color: "NEGATIVE",
                  style: "STRONG"
                )
              ),
              a!gridField_24r3(
                labelPosition: "ABOVE",
                data: fv!item,
                columns: {
                  a!gridColumn(
                    label: rule!INZ_I18N_displayLabel(
                      i18nData: ri!i18nInterfaceData,
                      bundleKey: cons!UWG_CONS_TXT_INTERFACE_COMPONENT_INTERNATIONALIZATION & ".queue"
                    ),
                    value: rule!INZ_I18N_displayLabel(
                      i18nData: ri!i18nInterfaceData,
                      bundleKey: cons!UWG_CONS_TXT_INTERFACE_COMPONENT_INTERNATIONALIZATION & "." & fv!row.key
                    )
                  ),
                  a!gridColumn(
                    label: rule!INZ_I18N_displayLabel(
                      i18nData: ri!i18nInterfaceData,
                      bundleKey: cons!UWG_CONS_TXT_INTERFACE_COMPONENT_INTERNATIONALIZATION & ".cases"
                    ),
                    value: a!linkField(
                      links: a!dynamicLink(
                        label: fv!row.count,
                        saveInto: {
                          a!save(
                            ri!selectedBucket,
                            index(
                              local!caseBucketsToDisplay,
                              fv!identifier
                            )
                          ),
                          a!save(ri!isPendingWorkUnassignedBucket, true),
                          a!save(ri!isWorkToCompleteBucket, false),
                          a!save(
                            ri!unassignedRoleRefId,
                            if(
                              fv!row.key = cons!UWG_CONS_TXT_WORKBENCH_BUCKET_KEY_UNASSIGNED_NEW_BUSINESS_UW,
                              cons!UWG_CONS_INT_REFERENCE_ID_PARTY_ROLE_ADMIN_UW,
                              cons!UWG_CONS_INT_REFERENCE_ID_PARTY_ROLE_ADMIN_NBC
                            )
                          ),
                          a!save(
                            ri!isPreDecisionUnassignedCases,
                            if(
                              fv!row.key = cons!UWG_CONS_TXT_WORKBENCH_BUCKET_KEY_UNASSIGNED_POST_DECISION_NBC,
                              false,
                              true
                            )
                          )
                        }
                      )
                    ),
                    align: "END"
                  ),
                  a!gridColumn(
                    label: rule!INZ_I18N_displayLabel(
                      i18nData: ri!i18nInterfaceData,
                      bundleKey: cons!UWG_CONS_TXT_INTERFACE_COMPONENT_INTERNATIONALIZATION & ".oldestDate"
                    ),
                    value: fv!row.oldestDate
                  )
                },
                pageSize: cons!CL_CONS_INT_PAGE_SIZE_50,
                borderStyle: "LIGHT"
              )
            },
            height: "AUTO",
            showWhen: or(
              and(
                a!isNullOrEmpty(ri!selectedLeaderIds),
                ri!showAllLeadersSelected <> true
              ),
              ri!showAllLeadersSelected = true()
            ),
            shape: "ROUNDED",
            padding: "NONE",
            marginBelow: "STANDARD"
          )

        }
      )
      
     
      }
      
    )
  ),

harshas2775

Each row should have 2 grids.

As per my understanding, you want to show 2 grids for each user. Since I don't know which variable contains which data I have created a recipe basis my understanding as below. You can tweak as per your data set.

a!localVariables(
  local!allUsers: {
    a!map(firstName: "John", lastName: "A", id: 1),
    a!map(firstName: "Johnny", lastName: "Doe", id: 2),
    a!map(firstName: "Alice", lastName: "DT", id: 3)
  },
  local!caseGridDataforallUser: {
    a!map(
      key: "A",
      count: 3,
      oldestDate: today() - 233,
      userId: 1
    ),
    a!map(
      key: "B",
      count: 13,
      oldestDate: today() - 322,
      userId: 2
    ),
    a!map(
      key: "C",
      count: 23,
      oldestDate: today() - 122,
      userId: 3
    ),
    a!map(
      key: "D",
      count: 4,
      oldestDate: today() - 200,
      userId: 1
    ),
    
  },
  a!forEach(
    items: local!allUsers,
    expression: {
      a!cardLayout(
        marginbelow: "MORE",
        contents: a!columnsLayout(
          columns: {
            a!columnLayout(
              width: "NARROW",
              contents: {
                a!richTextDisplayField(
                  value: a!richTextItem(
                    text: index(fv!item, "firstName", {}) & " " & index(fv!item, "lastName", {}),
                    style: "STRONG"
                  )
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!gridField(
                  label: "GRID 1",
                  labelPosition: "ABOVE",
                  data: index(
                    local!caseGridDataforallUser,
                    wherecontains(
                      fv!item.id,
                      local!caseGridDataforallUser.userId
                    ),
                    ""
                  ),
                  columns: {
                    a!gridColumn(
                      label: "Key",
                      value: "Column 1 key: " & fv!row.key
                    ),
                    a!gridColumn(
                      label: "Count",
                      value: a!linkField(
                        links: a!dynamicLink(
                          label: "Column 2 Count: " & fv!row.count,
                          saveInto: {}
                        )
                      ),
                      align: "END"
                    ),
                    a!gridColumn(
                      label: "Oldest Date",
                      value: fv!row.oldestDate
                    )
                  },
                  pageSize: 20,
                  borderStyle: "STANDARD"
                ),
                a!gridField(
                  label: "GRID 2",
                  labelPosition: "ABOVE",
                  data: index(
                    local!caseGridDataforallUser,
                    wherecontains(
                      fv!item.id,
                      local!caseGridDataforallUser.userId
                    ),
                    ""
                  ),
                  columns: {
                    a!gridColumn(
                      label: "Key",
                      value: "Column 1 key: " & fv!row.key
                    ),
                    a!gridColumn(
                      label: "Count",
                      value: a!linkField(
                        links: a!dynamicLink(
                          label: "Column 2 Count: " & fv!row.count,
                          saveInto: {}
                        )
                      ),
                      align: "END"
                    ),
                    a!gridColumn(
                      label: "Oldest Date",
                      value: fv!row.oldestDate
                    )
                  },
                  pageSize: 20,
                  borderStyle: "STANDARD"
                )
              }
            )
          }
        )
      )
    }
  )
)

sarathkumr268295

Hi [mention:2636807152274a4380d4056f6dc9e842:e9ed411860ed4f2ba0265705b8793d05] ,

See the below code and check if thats what you are looking for. Odd elements will be displayed in 1st column and even elements in 2nd column

{
  a!localVariables(
    local!num: { "a", "b", "c", "d", "e", "f", "g", "h" },
    a!sectionLayout(
      label: "",
      contents: {
        a!localVariables(
          local!even: reject(
            fn!isnull,
            a!forEach(
              local!num,
              if(mod(fv!index, 2) = 0, fv!item, "")
            )
          ),
          local!odd: reject(
            fn!isnull,
            a!forEach(
              local!num,
              if(mod(fv!index, 2) <> 0, fv!item, "")
            )
          ),
          a!forEach(
            items: enumerate(length(local!num) / 2),
            expression: a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!textField(
                      label: "Text",
                      labelPosition: "ADJACENT",
                      value: index(local!odd, fv!index, ""),
                      refreshAfter: "UNFOCUS",
                      validations: {},
                      readOnly: true
                    )
                  }
                ),
                a!columnLayout(
                  contents: {
                    a!textField(
                      label: "Text",
                      labelPosition: "ADJACENT",
                      value: index(local!even, fv!index, ""),
                      refreshAfter: "UNFOCUS",
                      validations: {},
                      readOnly: true
                    )
                  }
                )
              }
            )
          )
        )
      }
    )
  )
}

This is how the output looks

harshas2775

As all the replies here are understanding different outputs, It would be good if you explain/ask the issue in more detail to save everyone's time. IF the issue is all about the layout configurations in an interface as a senior certified developer you are qualified already. So better would be to explain about your problem clearly, with some layout design frame instead of pasting the code which is not working anyway for you!

amaans4178

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

Sign up

Login with SSO

Login to the community

Login with SSO