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

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

Siva — Fri, 05 Oct 2018 02:49:50 GMT

Hi Susan,

Below are the some of the best practices while Passing data to Grid.

1) Avoid dot notation to the Data Subset ,instead use indexing with default null.

2) Always Pass the paging Info with limited batch size

3) Query Entity should be optimized with the filters and if possible try to take the data out of data-subset and pass to another local variable and use it for grid data.

Thanks

Siva Chimata

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

charlesm492 — Wed, 03 Oct 2018 15:15:32 GMT

No problem! Generally, if the data is ever expected to be null such as in this case where it's null before the user makes a selection, the index() function is safer to use than dot notation since it returns the third parameter in the case of an invalid index.

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

susana197 — Wed, 03 Oct 2018 15:07:20 GMT

Thanks Charles. That took care of it.

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

charlesm492 — Wed, 03 Oct 2018 14:57:24 GMT

Try replacing the local!datasubset.data.comment with index(local!datasubset.data, "comment", null).

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

susana197 — Wed, 03 Oct 2018 14:52:32 GMT

Could not display interface. Please check definition and inputs.
Interface Definition: Expression evaluation error at function 'index' parameter 2 [line 58]: Invalid index: Cannot index property 'comment' of type Text into type List of Variant

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

charlesm492 — Wed, 03 Oct 2018 14:45:35 GMT

What is the error you are getting?

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

susana197 — Wed, 03 Oct 2018 13:46:15 GMT

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

}
)
)
)

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

susana197 — Wed, 03 Oct 2018 13:13:21 GMT

THANKS.

This has worked now.

Have a nice day.

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

Hema — Wed, 03 Oct 2018 13:09:51 GMT

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

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

susana197 — Wed, 03 Oct 2018 13:05:51 GMT

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

}
)
)
)

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

Hema — Wed, 03 Oct 2018 12:46:11 GMT

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

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

susana197 — Wed, 03 Oct 2018 12:39:39 GMT

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

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

Hema — Wed, 03 Oct 2018 06:07:11 GMT

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

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

Siva — Wed, 03 Oct 2018 05:48:16 GMT

Hi Susana197,

Please refer the below link , it will help you to play with Paging Gird Component.

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

Thanks
Siva Chimata

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

Chanakya Volam — Wed, 03 Oct 2018 02:27:58 GMT

Hi susana197

1. Since you are querying the data from database set the Identifiers parameter of pagingGrid with primary key of your data
2. In pagingGrid make sure to use a!gridselection in value and saveInto
3. Once you do this when user selects a row the ID will be stored in a!gridselection.selected
4. In the paragraph field use index(CDT,wherecontains(selectedID,CDT.ID))

Hope this helps you