show/hide a field in g_modal

ShuRiseUp2023
Tera Expert

Hi Community

I'm trying to complete a task.  When click the "Reject" button on the Workspace, a popup window will show. On the popup window there're 2 fields: 1. Rejection Reason whose type is choices; 2. Other details whose type is string, When the user choses "Other" from the choices, the 2nd field-other details-will show, otherwise the other details string field will be hidden. At the bottom of the popup window there're 2 buttons: Cancel and Confirm. I created a UI action and used g_modal.showfield. 

My question is:

1. how to show/hide the 2nd field based on the value of the 1st field.

2. how to change the default "OK" button label to "Confirm".

==========================================

The client-side UI action Workspace Client script snippet is below:

function onClick(g_form) {

    g_modal.showFields({
        title: "Reject Application",
        fields: [{
                label: "Rejection Reason, if the reason is not listed, please choose 'Other'",
                name: "rejection_reason",
                type: "choice",
                choices: [{
                        displayValue: "Incomplete Information",
                        value: "incomplete_info"
                    },
                    {
                        displayValue: "Duplicate Request",
                        value: "duplicate_request"
                    },
                    {
                        displayValue: "Other",
                        value: "other"
                    },
                ],
                mandatory: true
            },
            {
                label: getMessage("If rejection reason is 'Other', please add details"),
                name: "other_detail",
                type: "string",
                mandatory: false
            },
            {
                label: getMessage("Explain your rejection reason in details (Optional)"),
                name: "rejection_details",
                type: "textarea",
                mandatory: false
            }
        ],
        size: 'lg'
    }).then(function(values) {
        try {
            g_form.setValue('state', 140);//change state to "Rejected"       
            g_form.setValue('rejection_reason', values.updatedFields[0].value);
            if(values.updatedFields[0].value == 'other'){
                g_form.setValue('other_rejection_details', values.updatedFields[1].value);
            }     
            var workNotesMessage = "Rejected Reason: " + values.updatedFields[0].displayValue;

            if (values.updatedFields[1].value) {//if there's rejection details add it into the work notes
                workNotesMessage += ". Other reason is: " + values.updatedFields[2].value;
            }
           
            if (values.updatedFields[2].value) {//if there's additonal comment add it into the work notes.
                workNotesMessage += ". " + values.updatedFields[2].value;
            }

            g_form.setValue("work_notes", workNotesMessage);
            g_form.save();
            g_form.addInfoMessage("Application has been rejected.");
        } catch (error) {
            g_form.addErrorMessage("An error occurred while rejecting the request. Please try again.");
        }
    });
}
==============================

Thanks

 

2 REPLIES 2

ShuRiseUp2023
Tera Expert

As I know there's a workaround that use 2 modals. But is it possible to use just 1 modal? The client doesn't like the 2 modals solution. 

RaviRajaM
Tera Contributor

The Attribute title is the title for the Modal. confirmTitle is the text on the positive button of the modal, cancelTitle is the text on the cancel button. Size can be used to set the size of the modal. Params is an object of attributes that will be passed into our component.

{
    title: 'Set Needs Attention on all open Cases',
    confirmTitle: "Set flag!",
    cancelTitle: "Cancel",
    size: 'lg',
    height: 'lg',
    params: {
        contactName: g_form.getValue('first_name') + " " + g_form.getValue('last_name')
    }
}


This way you can change the Modal Button Label Values.