how get a editable grid to accept a a!query entity

Certified Associate Developer

how get a editable grid to accept a a!query entity


hi all so I am trying to attach an editable column to CDT with all of the info taken from the DB.

I have successfully got the CDT without the data in an editable grid

and got the data in a read-only grid

any help combining the two would be most appreciated,

I have tried to do community.appian.com/.../query-regarding-pagination-in-interface
but I failed, possibly because I do not know what the code was for his query


community.appian.com/.../48086
this seems kind of what I was looking for but not quite

thanks,

Kevin,

  Discussion posts and replies are publicly visible

Parents
  • The existing examples for editable grids are close (like this one), you just have to replace the sample data with the results of your query. For example, I can refactor the example above to use my data like this:

    a!localVariables(
      local!employees: a!queryEntity(
        entity: cons!PDL_CASE_DSE,
        query: a!query(
          pagingInfo: a!pagingInfo(
            startIndex: 1,
            batchSize: 10
          )
        )
      ),
      a!formLayout(
        label: "Example: Add,Update, or Remove Employee Data",
        contents: {
          a!gridLayout(
            totalCount: count(local!employees),
            headerCells: {
              a!gridLayoutHeaderCell(label: "Title" ),
              a!gridLayoutHeaderCell(label: "Description" ),
              a!gridLayoutHeaderCell(label: "Date" ),
              a!gridLayoutHeaderCell(label: "Priority" ),
              a!gridLayoutHeaderCell(label: "Status" ),
              /* For the "Remove" column */
              a!gridLayoutHeaderCell(label: "" )
            },
            /* Only needed when some columns need to be narrow */
            columnConfigs: {
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "ICON")
            },
            /*
            * a!forEach() will take local!employee data and used that data to loop through an
            * expression that creates each row.
            *
            * When modifying the recipe to work with your data, you only need to change:
            * 1.) the number of fields in each row
            * 2.) the types of fields for each column (i.e. a!textField() for text data elements)
            * 3.) the fv!item elements. For example fv!item.firstName would change to fv!item.yourdata
            */
            rows: a!forEach(
              items: local!employees,
              expression: a!gridRowLayout(
                contents: {
                  /* For the Title Column*/
                  a!textField(
                    value: fv!item.title,
                    saveInto: fv!item.title,
                    required: true
                  ),
                  /* For the Description Column*/
                  a!textField(
                    value: fv!item.description,
                    saveInto: fv!item.description,
                    required:true
                  ),
                  /* For the Department Column*/
                  a!dateField(
                    value: fv!item.date,
                    saveInto: fv!item.date,
                    required:true
                  ),
                  /* For the Priority Column*/
                  a!textField(
                    value: fv!item.priority,
                    saveInto: fv!item.priority,
                    required:true
                  ),
                  /* For the Status Column*/
                  a!tagField(
                    tags: a!tagItem(
                      text: fv!item.status
                    )
                  ),
                  /* For the Removal Column*/
                  a!richTextDisplayField(
                    value: a!richTextIcon(
                      icon: "close",
                      altText: "delete " & fv!index,
                      caption: "Remove " & fv!item.firstName & " " & fv!item.lastName,
                      link: a!dynamicLink(
                        value: fv!index,
                        saveInto: {
                          a!save(local!employees, remove(local!employees, save!value))
                        }
                      ),
                      linkStyle: "STANDALONE",
                      color: "NEGATIVE"
                    )
                  )
                },
                id: fv!index
              )
            ),
            rowHeader: 1
          )
        },
        buttons: a!buttonLayout(
          primaryButtons: a!buttonWidget(
            label: "Submit",
            submit: true
          )
        )
      )
    )

    I also added a sample tag for your reference!

Reply
  • The existing examples for editable grids are close (like this one), you just have to replace the sample data with the results of your query. For example, I can refactor the example above to use my data like this:

    a!localVariables(
      local!employees: a!queryEntity(
        entity: cons!PDL_CASE_DSE,
        query: a!query(
          pagingInfo: a!pagingInfo(
            startIndex: 1,
            batchSize: 10
          )
        )
      ),
      a!formLayout(
        label: "Example: Add,Update, or Remove Employee Data",
        contents: {
          a!gridLayout(
            totalCount: count(local!employees),
            headerCells: {
              a!gridLayoutHeaderCell(label: "Title" ),
              a!gridLayoutHeaderCell(label: "Description" ),
              a!gridLayoutHeaderCell(label: "Date" ),
              a!gridLayoutHeaderCell(label: "Priority" ),
              a!gridLayoutHeaderCell(label: "Status" ),
              /* For the "Remove" column */
              a!gridLayoutHeaderCell(label: "" )
            },
            /* Only needed when some columns need to be narrow */
            columnConfigs: {
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),
              a!gridLayoutColumnConfig(width: "ICON")
            },
            /*
            * a!forEach() will take local!employee data and used that data to loop through an
            * expression that creates each row.
            *
            * When modifying the recipe to work with your data, you only need to change:
            * 1.) the number of fields in each row
            * 2.) the types of fields for each column (i.e. a!textField() for text data elements)
            * 3.) the fv!item elements. For example fv!item.firstName would change to fv!item.yourdata
            */
            rows: a!forEach(
              items: local!employees,
              expression: a!gridRowLayout(
                contents: {
                  /* For the Title Column*/
                  a!textField(
                    value: fv!item.title,
                    saveInto: fv!item.title,
                    required: true
                  ),
                  /* For the Description Column*/
                  a!textField(
                    value: fv!item.description,
                    saveInto: fv!item.description,
                    required:true
                  ),
                  /* For the Department Column*/
                  a!dateField(
                    value: fv!item.date,
                    saveInto: fv!item.date,
                    required:true
                  ),
                  /* For the Priority Column*/
                  a!textField(
                    value: fv!item.priority,
                    saveInto: fv!item.priority,
                    required:true
                  ),
                  /* For the Status Column*/
                  a!tagField(
                    tags: a!tagItem(
                      text: fv!item.status
                    )
                  ),
                  /* For the Removal Column*/
                  a!richTextDisplayField(
                    value: a!richTextIcon(
                      icon: "close",
                      altText: "delete " & fv!index,
                      caption: "Remove " & fv!item.firstName & " " & fv!item.lastName,
                      link: a!dynamicLink(
                        value: fv!index,
                        saveInto: {
                          a!save(local!employees, remove(local!employees, save!value))
                        }
                      ),
                      linkStyle: "STANDALONE",
                      color: "NEGATIVE"
                    )
                  )
                },
                id: fv!index
              )
            ),
            rowHeader: 1
          )
        },
        buttons: a!buttonLayout(
          primaryButtons: a!buttonWidget(
            label: "Submit",
            submit: true
          )
        )
      )
    )

    I also added a sample tag for your reference!

Children
No Data