Display data from database view into interface

You could display the data in box layout where each box could hold the data of one row of the view. Inside the box you could have these view columns as editable text field, dropdown field or any field of your choice.

Consider the below example code:

a!localVariables(

local!data: *Query the view*,

a!forEach(

items: local!data,

expression: {

a!boxLayout(

label: fv!item.labelField,

contents: {

a!textField(

label: *field name*,

value: fv!item.field

),

//All the fields you want for that row

}

)

}

)

)

Hey,

If your use case is to try different components to display the DB items in a more presentable way, you can use the card layout as grid. Please find the below code snippet from Appian documentation to achieve having card layout as background. Similarly, you can run the card layout in foreach() with alternative colors.

docs.appian.com/.../card_layout.html

a!localvariables(
  local!salesLeaders: {
    a!map(rank: "1st", name: "Cindy Pratt", revenue: "$3.72M"),
    a!map(rank: "2nd", name: "Kyong-Ok Yi", revenue: "$2.94M"),
    a!map(rank: "3rd", name: "Linda Smith", revenue: "$2.51M")
  },
  a!headerContentLayout(
    header: {},
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!sectionLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: upper("Sales Revenue Leaderboard"),
                            color: "STANDARD",
                            size: "MEDIUM",
                            style: "STRONG"
                          )
                        }
                      ),
                      /* Displays a row for each sales leader */
                      a!forEach(
                        items: local!salesLeaders,
                        expression: a!sideBySideLayout(
                          items: {
                            a!sideBySideItem(
                              item: a!richTextDisplayField(
                                labelPosition: "COLLAPSED",
                                value: {
                                  a!richTextItem(
                                    text: fv!item.rank,
                                    color: "STANDARD",
                                    size: "MEDIUM",
                                    style: "STRONG"
                                  )
                                }
                              ),
                              width: "2X"
                            ),
                            a!sideBySideItem(
                              item: a!imageField(
                                labelPosition: "COLLAPSED",
                                images: a!userImage(),
                                size: "SMALL",
                                isThumbnail: false,
                                style: "AVATAR"
                              ),
                              width: "MINIMIZE"
                            ),
                            a!sideBySideItem(
                              item: a!richTextDisplayField(
                                labelPosition: "COLLAPSED",
                                value: {
                                  a!richTextItem(
                                    text: fv!item.name,
                                    size: "MEDIUM",
                                    style: "STRONG"
                                  )
                                }
                              ),
                              width: "8X"
                            ),
                            a!sideBySideItem(
                              item: a!richTextDisplayField(
                                labelPosition: "COLLAPSED",
                                value: {
                                  a!richTextItem(
                                    text: fv!item.revenue,
                                    color: "STANDARD",
                                    size: "MEDIUM_PLUS"
                                  )
                                },
                                align: "RIGHT"
                              ),
                              width: "MINIMIZE"
                            )
                          },
                          alignvertical: "MIDDLE"
                        )
                      )
                    },
                    marginBelow: "NONE"
                  )
                },
                height: "AUTO",
                style: "CHARCOAL_SCHEME",
                padding: "STANDARD",
                showBorder: false
              )
            },
            width: "MEDIUM_PLUS"
          )
        }
      )
    },
    backgroundColor: "CHARCOAL_SCHEME"
  )
)