If you have a need to determine when a Creatio Freedom UI List component has no rows (or does have rows), the list component has a couple of attributes you can use for this. These are attributes that are available as a part of adding the List component to your page, so you don’t need to add these attributes, they will already exist. The first part of the names of the attributes will vary since they are using the List name. For my example, my List is a section List page, so my list component is named “DataTable”.
These attributes are:
- DataTable_Items – An array of the items loaded in the list. Note, this doesn’t include all data, only the rows that have been loaded so far. The data is paged with 30 records at a time. More rows will be added to this attribute as the user scrolls or filters the list.
- DataTable_NoItems – A boolean that indicates if the list does not have any rows. A value of true means the list does not have any rows.
- DataTable_NoFilteredItems – A boolean, similar to the NoItems attribute above, but indicates that the list is filtered and has no rows (filtered meaning the user used a linked search box, the user selected a folder, or linked quick filter components have been used)
As I mentioned, my list component’s name is DataTable, so the attributes listed above start with “DataTable”. However, if your list component is named “DataGrid_ysopiif”, your attribute names would start with that, such as “DataGrid_ysopiif_NoItems” instead of “DataTable_NoItems”, etc.
The nice thing about these existing as attributes is that they will trigger change events, just like any attribute. If you’d like to listen for a change to when the list has no rows, you could use the following in a change request handler:
{
request: "crt.HandleViewModelAttributeChangeRequest",
handler: async (request, next) => {
if (request.attributeName === "DataTable_NoItems" || request.attributeName === "DataTable_NoFilteredItems") {
if (request.value) {
// no records returned for list
Terrasoft.showInformation("No results returned!");
}
}
return next?.handle(request);
}
}
Additionally, you can use these attributes to bind to other controls as well. For example, let’s say you have a scenario where you want to only allow a single row to be added to a list. You could bind the NoItems attribute to the visible property of the add button so it only shows if the list has no rows. As soon as the list has a row, the button disappears. You could bind this attribute to the add button’s visible property as follows:
{
"operation": "insert",
"name": "DataGrid_ysopiifAddBtn",
"values": {
"type": "crt.Button",
"caption": "#ResourceString(DataGrid_ysopiifAddBtn_caption)#",
"icon": "add-button-icon",
// etc
"visible": "$DataGrid_ysopiif_NoItems"
}
}
Or if you need the opposite, you could invert the value:
{
"operation": "insert",
"name": "DataGrid_ysopiifAddBtn",
"values": {
"type": "crt.Button",
"caption": "#ResourceString(DataGrid_ysopiifAddBtn_caption)#",
"icon": "add-button-icon",
// etc
"visible": "$DataGrid_ysopiif_NoItems | crt.InvertBooleanValue"
}
}
I am trying to apply this in a mini page but I couldn’t work this out.
I’d guess you’re using the wrong list name. In the article it shows the attribute names like “DataTable_NoItems” where “DataTable” is the name of the List component (which is the case for section list pages). However, on a mini page, or any page, the list name is likely NOT named DataTable. You need to change the attribute names to match the name of the list.
From the article:
As I mentioned, my list component’s name is DataTable, so the attributes listed above start with “DataTable”. However, if your list component is named “DataGrid_ysopiif”, your attribute names would start with that, such as “DataGrid_ysopiif_NoItems” instead of “DataTable_NoItems”, etc.
Ryan