• 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

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

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

Children
  • 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
     in reply to srinivaasant574373

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

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