Display data from database view into interface

Hello Everyone,

I would like to display data from database view into interface without using grid. Can anyone please help me how to achieve this, the displayed must be editable as well.

Thank You.

  Discussion posts and replies are publicly visible

  • 0
    Certified Senior Developer

    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

    }

    )

    }

    )

    )

  • 0
    Certified Senior Developer
    in reply to saurabhrajnala

    Hi , try to use for code the "insert code" functionality. You can find it below your comment box at the dropdown "Insert" it makes it waaaaay easier to read for others.

    Hi Shubhamy,
    sarabhrajnala explained one way of a lot of different ways. Can you tell us more about your target? What do you want to archieve? Reporting?
    Editing of specific data entity (line)( Then we are in the record context)
    Do you want to call data in a process the most structured way? 
    Do you want to show data all at once or one by one?
    and so on 
    A lot of factors can be considered here. Can you elaborate your target :)?

  • @saurabhrajnala: Thank you for your reply. How can the user update the fields and save into database if using box layout.

  • 0
    Certified Lead Developer

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

  • 0
    Certified Senior Developer
    in reply to shubhamy0001

    thanks for the tip.

    you can create fields such as textField, dropdownField and so on for all the columns of your view's row and edit the data there and save into the table that is used in the view since views aren't editable. In my above reply you can notice the textField inside the box layout's contents in the code snippet. You can hold values of your DB entity in that field and manipulate the data over there.