Visibility of Button on Detail Selection of Records

Hi Team, 

 

I want to restrict the button visibility and make it display when the entitlement records in details are selected. If there are no records or records are not selected, then the button should not display in front end.

 

Can you help how can we achieve it in freedom UI

 

 

Like 0

Like

3 comments
Best reply

Hi,

 

You need to use this approach https://academy.creatio.com/docs/8.x/dev/development-on-creatio-platform/platform-customization/freedom-ui/customize-page-fields/examples/set-up-the-display-condition-of-a-field

 

It explains how to control the button visibility. If the question is about which parameter to use - example with the banking details list on the account form page - each list has the _SelectedRows property like BankingDetailsList_SelectedRows. It's name can be retrieved with the debugging. If we had a task to make the button visible if any record is selected in the banking details list on the accounts form page and hide this button if nothing is selected we should use BankingDetailsList_SelectedRows attribute and change the attribute state (like UsrIsButtonVisible) to true of false dynamically using the condition like:

 

{
                request: "crt.HandleViewModelAttributeChangeRequest",
                handler: async (request, next) => {
                    if (request.attributeName == "BankingDetailsList_SelectedRows") {
                        if (request.value && request.value.length > 0) {
                            request.$context.UsrIsButtonVisible = true;
                        } else {
                            request.$context.UsrIsButtonVisible = false;
                        }
                        return next?.handle(request);
                    }
                }
            }

 

UsrIsButtonVisible attribute should be used in the visible property of the button like:

 

{
                "operation": "insert",
                "name": "Button_l2jrfqt",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(Button_l2jrfqt_caption)#",
                    "color": "primary",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    "visible": "$UsrIsButtonVisible",
                    "clicked": {

....

 

Tested locally - works perfect, you can try this approach on your end.

Any one have idea ?

Hi,

 

You need to use this approach https://academy.creatio.com/docs/8.x/dev/development-on-creatio-platform/platform-customization/freedom-ui/customize-page-fields/examples/set-up-the-display-condition-of-a-field

 

It explains how to control the button visibility. If the question is about which parameter to use - example with the banking details list on the account form page - each list has the _SelectedRows property like BankingDetailsList_SelectedRows. It's name can be retrieved with the debugging. If we had a task to make the button visible if any record is selected in the banking details list on the accounts form page and hide this button if nothing is selected we should use BankingDetailsList_SelectedRows attribute and change the attribute state (like UsrIsButtonVisible) to true of false dynamically using the condition like:

 

{
                request: "crt.HandleViewModelAttributeChangeRequest",
                handler: async (request, next) => {
                    if (request.attributeName == "BankingDetailsList_SelectedRows") {
                        if (request.value && request.value.length > 0) {
                            request.$context.UsrIsButtonVisible = true;
                        } else {
                            request.$context.UsrIsButtonVisible = false;
                        }
                        return next?.handle(request);
                    }
                }
            }

 

UsrIsButtonVisible attribute should be used in the visible property of the button like:

 

{
                "operation": "insert",
                "name": "Button_l2jrfqt",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(Button_l2jrfqt_caption)#",
                    "color": "primary",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    "visible": "$UsrIsButtonVisible",
                    "clicked": {

....

 

Tested locally - works perfect, you can try this approach on your end.

Hey Oleg thanks it worked perfectly :) 

Show all comments