• State Suggested Answer
  • Replies 10 replies
  • Answers 4 answers
  • Subscribers 12 subscribers
  • Views 88 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

For each loop to display the items side by side

srinivaasant574373
Certified Senior Developer

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.

  Discussion posts and replies are publicly visible

  • 0
    Certified Senior Developer

    Hi  

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

  • 0
    Certified Senior Developer
     in reply to Yashwanth Akula

     Can we make it to have 2 grids in each row. This code displays all the grids in single row

  • 0
    Certified Senior Developer

    Hey  ,

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

  • 0
    Certified Senior Developer
     in reply to srinivaasant574373 


    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

  • 0
    Certified Senior Developer
     in reply to Harshmodi

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

        }
      )
      
     
      }
      
    )
  ),

  • 0
    Certified Lead Developer
     in reply to srinivaasant574373
    srinivaasant574373 said:
    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"
                )
              }
            )
          }
        )
      )
    }
  )
)

  • 0
    Certified Senior Developer

    Hi  ,

    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

  • 0
    Certified Lead Developer

    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! 

  • 0
    Certified Senior Developer
     in reply to srinivaasant574373

    no worries just replace the enumerate with list of map then it will iterate loop on list of map

  • 0

    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

© 2025 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.