Responding to a Row Selected Event in a Creatio Freedom UI List

Understanding Row Selection in Freedom UI

On a Freedom UI page, the change request mechanism can track more than just user-initiated data modifications; it can also monitor changes to components like lists.

Every list in Freedom UI has an attribute that stores the ID of the currently selected row. By monitoring changes to this attribute, we can determine when a new row has been selected.

For example:

• If your list is named "CustomerList", the attribute will be "CustomerList_ActiveRow".

• If your list is named "OrderGrid_x89y56", the attribute will be "OrderGrid_x89y56_ActiveRow".

Whenever a user selects a row in the list, its ActiveRow attribute updates automatically. We can use this update to trigger actions based on the selection.

Scenario: Showing a Button Based on Row Selection

Goal:

We have a Customer List and a button that should only be visible when a row is selected.

Solution:

We'll introduce an attribute named "ShowActionButton" that will be set to true or false based on whether a row is selected.

The final outcome will be a button that appears only when a row is selected.

Step 1: Handling Row Selection with a Change Request

To detect row selection changes, we need to listen for updates to the ActiveRow attribute and adjust the ShowActionButton value accordingly.

Change Request Handler:

{
request: "crt.HandleViewModelAttributeChangeRequest",
handler: async (request, next) => {
if (request.attributeName == "CustomerList_ActiveRow")
{
request.$context.ShowActionButton = (request.value);
}
return next?.handle(request);
}
}

Explanation:

• request.attributeName == "CustomerList_ActiveRow": Detects when a new row is selected.

• request.$context.ShowActionButton = (request.value);: Updates our attribute based on whether a row is selected.
  

Now, ShowActionButton will be true when a row is selected and false when no row is selected.

Step 2: Binding the Button Visibility to the Attribute

To ensure that our button only appears when a row is selected, we bind the "visible" property to the ShowActionButton attribute.

Visibility Binding:

"visible": "$ShowActionButton"

This ensures that the button will only be visible when ShowActionButton is true.

Step 3: Getting the Selected Row ID in a Button Click Event

Once the button is visible and the user clicks on it, we may need to retrieve the selected row ID.

Fetching Selected Row ID:

const selectedId = await request.$context.CustomerList_ActiveRow;

If the list supports multi-selection, we use the SelectedRows attribute, which stores an array of selected IDs:

Handling Multi-Selection:

// Array of selected IDs const selectedIds = await request.$context.CustomerList_SelectedRows;

Even if the list allows only single-row selection, SelectedRows will still work, returning an array with one ID.

Advanced Use Cases

1. Filtering Rows Based on Conditions

To filter which rows can be selected, apply a filter to the list:

filterGroup.add("ActiveFilter", Terrasoft.createColumnFilterWithParameter( Terrasoft.ComparisonType.EQUAL, "Status", "Active" ));

2. Disabling Button for Certain Rows

Modify the ShowActionButton value based on additional conditions, like role-based access:

if (selectedId && userRole === "Admin") { request.$context.ShowActionButton = true; } else { request.$context.ShowActionButton = false; }

3. Triggering API Calls on Selection

Trigger an API request when a row is selected:

if (selectedId) { await fetch(`/api/getCustomerData/${selectedId}`); }

Troubleshooting & Common Issues

Button doesn’t appear after selecting a row: - Ensure ShowActionButton is correctly updated in the change request.
Selected row ID is not captured: - Check if ActiveRow is being correctly referenced.
Button doesn’t disappear when deselecting a row: - Ensure ShowActionButton is set to false when ActiveRow is empty.
Multi-selection isn't working properly: - Use SelectedRows instead of ActiveRow.

Conclusion

Handling row selection events in Creatio Freedom UI enables dynamic and interactive user experiences. By monitoring changes in the ActiveRow attribute, we can control UI elements such as buttons, trigger actions, and even call external APIs.

At AavishkarIT, we specialize in low-code/no-code development and can help you implement powerful Creatio solutions. If you need assistance, feel free to contact us at info@aavishkarit.com.

🚀 Unlock the full potential of Creatio Freedom UI with AavishkarIT!