Responding to a Row Selected Event in a Creatio Freedom UI List
At AavishkarIT, we specialize in providing expert solutions for low-code/no-code platforms, and Creatio Freedom UI is a key part of our expertise. One important feature in Freedom UI is the ability to handle row selection events in a list, enabling dynamic user interactions. In this guide, we'll explore how to respond to a row selection event within a Freedom UI list by handling attribute changes. This functionality is useful for tasks like displaying action buttons only when a row is selected.
CREATIOARTICLEBLOGS
3/21/20252 min read
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!
AavishkarIT Solutions
Innovate Faster, Automate Smarter
Contact
info@aavishkarit.com
+918368785127
© 2025. All rights reserved.
Industries
Cloud and Devops Services
Custome CRM developemnt
By submitting this form, you confirm that you agree to the storing and processing of your personal data by AavishkarIT as described in the Privacy Policy.
Services
Low Code / No Code
Education
HyperAutomation Services
Financial Services
Healthcare
Travel
IT & Software Services
Consulting & others