Customization on "Cancel" Ui action

[Rkanodia]

Hi 

I want to customize Cancel Ui action in HRSD, for both my default view and HR Agent workspace view. Once we click on the cancel ui button, a dialog appears asking the text(reason for cancellation). After the text is entered, we click on "cancel case". This should trigger two actions, one is move the hr case to cancelled state and second is should redirect the hr agent to the list of all hr cases. Anyone whi can help:
workspace client script :

function onClick(g_form) {

    getMessages(['Work notes', 'Cancel Case', 'Provide a reason for cancelling the case.', 'Enter a reason for canceling', 'This action can\'t be undone.', 'Don\'t cancel', 'Cancel case'], function() {

        var fields = [{

            type: 'textarea',

            name: 'work_notes',

            label: getMessage('Work notes')

        }];

        var sysId = g_form.getUniqueValue();

        var tblName = g_form.getTableName();

        g_modal.showFields({

            title: getMessage('Enter a reason for canceling'),

            fields: fields,

            instruction: getMessage('This action can\'t be undone.'),

            size: 'md',

            cancelTitle: getMessage('Don\'t cancel'),

            confirmTitle: getMessage('Cancel case'),

            cancelStyle: 'default',

            confirmStyle: 'destructive'

        }).then(function(fieldValues) {

            //get the work note entered

            var newWorkNote = fieldValues.updatedFields[0].value;

            //Call the Ajax function that handles adding worknotes and state

            var s = new GlideAjax("sn_hr_core.hr_CaseAjax");

            s.addParam("sysparm_name", "cancelAction");

            s.addParam("sysparm_obj_id", sysId);

            s.addParam("sysparm_table_name", tblName);

            s.addParam("sysparm_work_note", newWorkNote);

            s.getXML(addWorkNotes);

            function addWorkNotes(response) {

                g_form.save();

                var listUrl = new GlideURL('/now/hr/agent/list/params/list-id/71081d680f5620102208555db4767ed3/tiny-id/1Mtsm8aPVrPAsdmmB2820rwC04Jvj9iD');

                window.location.href = listUrl.getURL();

            }

        });

    });

}