• State Verified Answer
  • Replies 15 replies
  • Answers 1 answer
  • Subscribers 10 subscribers
  • Views 8008 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Setting up a Paging Grid Selection Component to display selected text in a text field on an interface

susana197
A Score Level 1

Hi All,

I am trying to configure a Paging Grid Selection Component (see definition code below).  The grid will show a number of CDTs - comments coming from different approvers in a long running process.  However, when a user clicks on a row in the grid, I would like the text in the "comment" field of the selected row to be displayed in an a!paragraphField interface control that is placed outside the grid control on the interface.  Does anyone have guidance as to how I may go about this?

Thanks in advance.

---

local!commentsQuery: a!queryEntity(
      entity: cons!CSHV_COMMENT_CDT,
      query: a!query(
      selection: a!querySelection(columns: {
          a!queryColumn(field: "author"),
          a!queryColumn(field: "timeStamp"),
          a!queryColumn(field: "status"),
          a!queryColumn(field: "comment"),
        }), 
      filter: a!queryFilter(
     field: "cashAdvanceId.id",
     operator: "=",
     value: ri!CashAdvanceData.id
      ),
      PagingInfo: local!commentsPagingInfo
      )
),

...

...

...

  Discussion posts and replies are publicly visible

Parents
  • +1

    Hi Susan,

    Please find the below code snippet,

    load(
  local!input: {
    {
      id: 1,
      author: "Jack",
      status: "In Progress",
      comment: "Level 1 Approved"
    },
    {
      id: 2,
      author: "James",
      status: "Completed",
      comment: "All documents are verified"
    },
    {
      id: 3,
      author: "Lily",
      status: "Rejected",
      comment: "Level 1 Approved"
    }
  },
  /* Use query entity to get data to local!input*/
  local!pagingInfo: a!gridSelection(
    pagingInfo: a!pagingInfo(
      1,
      - 1
    )
  ),
  a!formLayout(
    contents: {
      a!gridField(
        totalCount: count(
          local!input
        ),
        columns: {
          a!gridTextColumn(
            label: "Author",
            field: "author",
            data: index(
              local!input,
              "author",
              null
            )
          ),
          a!gridTextColumn(
            label: "Status",
            field: "status",
            data: index(
              local!input,
              "status",
              null
            )
          ),
          a!gridTextColumn(
            label: "Comment",
            field: "comment",
            data: index(
              local!input,
              "comment",
              null
            )
          )
        },
        value: local!pagingInfo,
        saveInto: local!pagingInfo,
        identifiers: local!input.id,
        selection: true,
        validations: if(
          count(
            local!pagingInfo.selected
          ) > 1,
          "Only one row can be selected",
          {}
        )
      ),
      a!paragraphField(
        label: "Comment",
        readOnly: true,
        value: index(
          local!input.comment,
          wherecontains(
            local!pagingInfo.selected,
            local!input.id
          ),
          null
        ),
        showWhen: and(
          not(
            rule!APN_isBlank(
              local!pagingInfo.selected
            )
          ),
          count(
            local!pagingInfo.selected
          ) = 1
        )
      )
    }
  )
)

    Few Suggestions,

    • In the query entity selection, include the primary key of the table. This will act as an identifier. In the above code, id is used as an identifier.
    • As selection should be enabled for the grid, for paging info a!pagingInfo() shouldn't be used. Instead, a!gridSelection() works. Please find this for reference.
    • The attribute 'validations' of a!gridField() can be used to restrict the number of selections. In the above code, I have restricted the number of selections to 1.
    • The attribute 'showWhen' of a!paragraphField() can be used to show or hide the paragraph field based on certain criteria. In the above code, I have hidden the Paragraph Field when no row is selected and when more than one row is selected.

    Also, please find below the links to sail recipes for more info about paging grid.

    https://docs.appian.com/suite/help/18.2/recipe_select_rows_in_a_grid.html

    https://docs.appian.com/suite/help/18.2/recipe_limit_the_number_of_rows_in_a_grid_that_can_be_selected.html

    https://docs.appian.com/suite/help/18.2/recipe_delete_rows_in_a_grid.html

     

    Hope this helps!!!

     

    Thanks,

    Hema

Reply
  • +1

    Hi Susan,

    Please find the below code snippet,

    load(
  local!input: {
    {
      id: 1,
      author: "Jack",
      status: "In Progress",
      comment: "Level 1 Approved"
    },
    {
      id: 2,
      author: "James",
      status: "Completed",
      comment: "All documents are verified"
    },
    {
      id: 3,
      author: "Lily",
      status: "Rejected",
      comment: "Level 1 Approved"
    }
  },
  /* Use query entity to get data to local!input*/
  local!pagingInfo: a!gridSelection(
    pagingInfo: a!pagingInfo(
      1,
      - 1
    )
  ),
  a!formLayout(
    contents: {
      a!gridField(
        totalCount: count(
          local!input
        ),
        columns: {
          a!gridTextColumn(
            label: "Author",
            field: "author",
            data: index(
              local!input,
              "author",
              null
            )
          ),
          a!gridTextColumn(
            label: "Status",
            field: "status",
            data: index(
              local!input,
              "status",
              null
            )
          ),
          a!gridTextColumn(
            label: "Comment",
            field: "comment",
            data: index(
              local!input,
              "comment",
              null
            )
          )
        },
        value: local!pagingInfo,
        saveInto: local!pagingInfo,
        identifiers: local!input.id,
        selection: true,
        validations: if(
          count(
            local!pagingInfo.selected
          ) > 1,
          "Only one row can be selected",
          {}
        )
      ),
      a!paragraphField(
        label: "Comment",
        readOnly: true,
        value: index(
          local!input.comment,
          wherecontains(
            local!pagingInfo.selected,
            local!input.id
          ),
          null
        ),
        showWhen: and(
          not(
            rule!APN_isBlank(
              local!pagingInfo.selected
            )
          ),
          count(
            local!pagingInfo.selected
          ) = 1
        )
      )
    }
  )
)

    Few Suggestions,

    • In the query entity selection, include the primary key of the table. This will act as an identifier. In the above code, id is used as an identifier.
    • As selection should be enabled for the grid, for paging info a!pagingInfo() shouldn't be used. Instead, a!gridSelection() works. Please find this for reference.
    • The attribute 'validations' of a!gridField() can be used to restrict the number of selections. In the above code, I have restricted the number of selections to 1.
    • The attribute 'showWhen' of a!paragraphField() can be used to show or hide the paragraph field based on certain criteria. In the above code, I have hidden the Paragraph Field when no row is selected and when more than one row is selected.

    Also, please find below the links to sail recipes for more info about paging grid.

    https://docs.appian.com/suite/help/18.2/recipe_select_rows_in_a_grid.html

    https://docs.appian.com/suite/help/18.2/recipe_limit_the_number_of_rows_in_a_grid_that_can_be_selected.html

    https://docs.appian.com/suite/help/18.2/recipe_delete_rows_in_a_grid.html

     

    Hope this helps!!!

     

    Thanks,

    Hema

Children
  • 0
    A Score Level 1
     in reply to Hema
    Hi all,

    Thanks for the advices, links and code. I have tried a number of approaches but kept on hitting a road block. Here is the closest I have come - I adopted the code below and it works ok except for the fact that I am trying to get the firstname to display in the a!textField (see the last part of the code). Can you modify the code for the a!textField so that it displays the firstname rather than the id? I think that will finally get me through.

    Thanks.


    =load(
    /* Set the default paging and sorting config */
    local!gridSelection: a!gridSelection(
    selected: {},
    pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 10,
    sort: a!sortInfo(
    field: "lastName",
    ascending: true
    )
    )
    ),
    with(
    local!datasubset: a!queryEntity(
    entity:cons!EMPLOYEE_ENTITY,
    query:a!query(
    selection: a!querySelection(columns: {
    a!queryColumn(field: "firstName"),
    a!queryColumn(field: "lastName"),
    a!queryColumn(field: "title")
    }),
    pagingInfo: local!gridSelection.pagingInfo
    )
    ),
    a!sectionLayout(
    contents: {
    a!gridField(
    label: "Example: Employee Grid Selection",
    totalCount: local!datasubset.totalCount,
    columns: {
    a!gridTextColumn(label: "First", field: "firstName", data: index(local!datasubset.data, "firstName" , {})),
    a!gridTextColumn(label: "Last", field: "lastName", data: index(local!datasubset.data, "lastName" , {})),
    a!gridTextColumn(label: "Title", field: "title", data: index(local!datasubset.data, "title" , {}))
    },
    identifiers: local!datasubset.identifiers,
    value: local!gridSelection,
    saveInto: {
    local!gridSelection
    },
    selection: true
    ),
    a!textField(
    label: "Selected Employee IDs",
    readOnly: true,
    value: if(
    length(local!gridSelection.selected) = 0,
    "No employees selected",
    joinarray(
    local!gridSelection.selected,
    ", "
    )
    )
    )
    }
    )
    )
    )
  • 0 in reply to susana197

    Hi Susan,

    Please try the below code for a!textField()

    a!textField(
          label: "Selected Employee IDs",
          readOnly: true,
          value: if(
            length(
              local!gridSelection.selected
            ) = 0,
            "No employees selected",
            index(
              local!datasubset.data.firstName,
              wherecontains(
                local!gridSelection.selected,
                local!datasubset.identifiers
              ),
              null
            )
          )
        )

    Hope this helps!!!

     

    Thanks,

    Hema

  • 0
    A Score Level 1
     in reply to Hema
    I get the following error:
    Could not display interface. Please check definition and inputs.
    Interface Definition: Expression evaluation error at function 'index' parameter 3 [line 59]: Invalid index: Cannot index property 'comment' of type Text into type DataSubset

    Here is my code below. Everything works well except for the a!textField at the bottom of the interface. I isolated the problem code using white spaces so you can jump straight to it.


    =load(
    /* Set the default paging and sorting config */
    local!gridSelection: a!gridSelection(
    selected: {},
    pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 10,
    sort: a!sortInfo(
    field: "timeStamp",
    ascending: true
    )
    )
    ),
    with(
    local!datasubset: a!queryEntity(
    entity:cons!CSHV_COMMENT_CDT,
    query:a!query(
    selection: a!querySelection(columns: {
    a!queryColumn(field: "author"),
    a!queryColumn(field: "status"),
    a!queryColumn(field: "timeStamp"),
    a!queryColumn(field: "comment")
    }),
    filter: a!queryFilter(
    field: "cashAdvanceId.id",
    operator: "=",
    value: ri!cashAdvanceData.id
    ),
    pagingInfo: local!gridSelection.pagingInfo
    )
    ),
    a!sectionLayout(
    contents: {
    a!gridField(
    label: "Example: Employee Grid Selection",
    totalCount: local!datasubset.totalCount,
    columns: {
    a!gridTextColumn(label: "Commenter", field: "author", data: index(local!datasubset.data, "author" , {})),
    a!gridTextColumn(label: "Status", field: "status", data: index(local!datasubset.data, "status" , {})),
    a!gridTextColumn(label: "Date & Time", field: "timeStamp", data: index(local!datasubset.data, "timeStamp" , {})),
    a!gridTextColumn(label: "Comment", field: "comment", data: left(index(local!datasubset.data, "comment" , {}), 40))
    },
    identifiers: local!datasubset.identifiers,
    value: local!gridSelection,
    saveInto: {
    local!gridSelection
    },
    selection: true
    ),




    a!textField(
    label: "Selected Comment Row",
    readOnly: true,
    value: if(
    length(
    local!gridSelection.selected
    ) = 0,
    "No comment row selected",
    index(
    local!datasubset.comment,
    wherecontains(
    local!gridSelection.selected,
    local!datasubset.identifiers
    ),
    null
    )
    )
    )






    }
    )
    )
    )
  • +1 in reply to susana197

    Hi Susan,

    Please try the below code snippet,

    a!textField(
    label: "Selected Comment Row",
    readOnly: true,
    value: if(
    length(
    local!gridSelection.selected
    ) = 0,
    "No comment row selected",
    index(
    local!datasubset.data.comment,
    wherecontains(
    local!gridSelection.selected,
    local!datasubset.identifiers
    )
    )
    )
    )


    Thanks,
    Hema

  • 0
    A Score Level 1
     in reply to Hema
    THANKS.

    This has worked now.

    Have a nice day.
  • 0
    A Score Level 1
     in reply to susana197
    Please is there a way to check that there is at least one row in the dataset? Right now, when the dataset returns 0 rows, the interface breaks with an error.
    Here before is the full interface code:

    =load(
    /* Set the default paging and sorting config */
    local!gridSelection: a!gridSelection(
    selected: {},
    pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 10,
    sort: a!sortInfo(
    field: "timeStamp",
    ascending: true
    )
    )
    ),
    with(
    local!datasubset: a!queryEntity(
    entity:cons!CSHV_COMMENT_CDT,
    query:a!query(
    selection: a!querySelection(columns: {
    a!queryColumn(field: "author"),
    a!queryColumn(field: "status"),
    a!queryColumn(field: "timeStamp"),
    a!queryColumn(field: "comment")
    }),
    filter: a!queryFilter(
    field: "cashAdvanceId.id",
    operator: "=",
    value: ri!cashAdvanceData.id
    ),
    pagingInfo: local!gridSelection.pagingInfo
    )
    ),
    a!sectionLayout(
    contents: {
    a!gridField(
    label: "Example: Employee Grid Selection",
    totalCount: local!datasubset.totalCount,
    columns: {
    a!gridTextColumn(label: "Commenter", field: "author", data: index(local!datasubset.data, "author" , {})),
    a!gridTextColumn(label: "Status", field: "status", data: index(local!datasubset.data, "status" , {})),
    a!gridTextColumn(label: "Date & Time", field: "timeStamp", data: index(local!datasubset.data, "timeStamp" , {})),
    a!gridTextColumn(label: "Comment", field: "comment", data: left(index(local!datasubset.data, "comment" , {}), 40))
    },
    identifiers: local!datasubset.identifiers,
    value: local!gridSelection,
    saveInto: {
    local!gridSelection
    },
    selection: true
    ),

    a!textField(
    label: "",
    readOnly: true,
    value: if(
    length(
    local!gridSelection.selected
    ) <> 1,
    "No comment row selected",
    index(
    local!datasubset.data.comment,
    wherecontains(
    local!gridSelection.selected,
    local!datasubset.identifiers
    )
    )
    )
    )






    }
    )
    )
    )

© 2024 Appian. All rights reserved.