UI page not working as expected.

[dvelloriy]

Hello Community.

I have created a UI page which is getting invoked via a Ui action button on HR case. (Create Incident).

Here is the html (jelly) of the UI page. It looks good when i click on the Ui action button (screenshot below) however "create incident" and "cancel" buttons at the bottom does nothing when i click them. Please advise.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">

    <style>

        .dialog-content {

            background-color: #f9f9f9;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 4px 8px rgba(0,0,0,0.1);

            font-family: Arial, sans-serif;

            width: 400px;

        }

        .dialog-button {

            background-color: #4CAF50;

            color: white;

            padding: 10px 20px;

            border: none;

            border-radius: 4px;

            cursor: pointer;

            margin-right: 10px;

        }

        .dialog-button:hover {

            background-color: #45a049;

        }

        .dialog-cancel {

            background-color: #d32f2f;

        }

        .dialog-cancel:hover {

            background-color: #b71c1c;

        }

        label {

            font-weight: bold;

            margin-bottom: 5px;

            display: block;

        }

        textarea {

            width: 100%;

            padding: 8px;

            margin-bottom: 15px;

            border: 1px solid #ccc;

            border-radius: 4px;

            resize: vertical;

        }

        .checkbox-container {

            margin-bottom: 15px;

            display: flex;

            align-items: center;

        }

        .checkbox-container input {

            width: auto;

            margin-right: 10px;

        }

    </style>

    <div class="dialog-content">

        <label for="additional_comments">Additional Comments</label>

        <textarea id="additional_comments"></textarea>

        <div class="checkbox-container">

            <input type="checkbox" id="transfer_attachments" />

            <label for="transfer_attachments">Transfer HR Case Attachments to Incident</label>

        </div>

        <!-- Fixed buttons -->

        <button type="button" onclick="submitDialog()" class="dialog-button">Create Incident</button>

        <button type="button" onclick="cancelDialog()" class="dialog-button dialog-cancel">Cancel</button>

    </div>

    <script>

        function submitDialog() {

            try {

                var comments = document.getElementById('additional_comments')?.value || '';

                var transferAttachments = document.getElementById('transfer_attachments')?.checked || false;

                var workNotesData = {

                    additional_comments: comments,

                    transfer_attachments: transferAttachments

                };

                var parentWindow = window.top;

                if (parentWindow &amp;&amp; parentWindow.g_form) {

                    parentWindow.g_form.setValue('work_notes', 'PAYROLL_INCIDENT:' + JSON.stringify(workNotesData));

                    console.log('Work notes set: PAYROLL_INCIDENT');

                    window.close();

                } else {

                    console.error('Parent window or g_form not accessible');

                    alert('Error: Unable to submit dialog. Contact support.');

                }

            } catch (e) {

                console.error('Error in submitDialog: ' + e);

                alert('Error: ' + e.message);

            }

        }

        function cancelDialog() {

            try {

                window.close();

            } catch (e) {

                console.error('Error in cancelDialog: ' + e);

            }

        }

    </script>

</j:jelly>

---------------

UI Action (client callable):

function showIncidentDialog() {

    // Open the dialog box

    var dialog = new GlideDialogWindow('sn_hr_core_HRIncidentDialog');

    dialog.setTitle('Create Incident');

   dialog.setPreference('sysparm_hr_case_sys_id', g_form.getUniqueValue());

    dialog.render();

    // Poll for work_notes update to trigger the flow

    setTimeout(function() {

        if (g_form.getValue('work_notes').startsWith('HR_INCIDENT:')) {

            var flowId = 'your_flow_sys_id'; // Replace with the flow sys_id after creating it

            var inputs = {

                hr_case_sys_id: g_form.getUniqueValue(),

                description: g_form.getValue('rich_description')

            };

            sn_fd.FlowAPI.startSubflow(flowId, inputs).then(function(response) {

                if (response.status === 'success') {

                    g_form.addInfoMessage('Incident created! Number: ' + response.output.incident_number);

                } else {

                    g_form.addErrorMessage('Failed to create incident. Contact support.');

                }

            });

        }

    }, 2000); // 2-second delay to allow dialog submission

}

---------------------

[dvelloriy]

Hi @Ankur Bawiskar  my requirement is to eventually create incident from this parent HR case. I will be creating a flow to do that but getting stuck at the ui page due to the highlighted error.

Is it available ootb?

[Ankur Bawiskar]

@dvelloriy 

This is not available OOTB. you will have to use custom solution/logic for this

if your basic requirement is to create incident from HR case then why no do this?

1) create a UI action which is client side

2) inside client side code ask the comments

3) then use GlideAjax and create incident and pass this comments and also send the HR case sysId and when INC is created set parent field of INC with HR Case

UI Action:

Client checkbox - True

Onclick - createIncident();

function createIncident() {
    var comments = prompt("Please enter comments for the incident:");
    if (comments) {
        var ga = new GlideAjax('CreateIncidentFromHRCase');
        ga.addParam('sysparm_name', 'createIncident');
        ga.addParam('sys_id', g_form.getUniqueValue());
        ga.addParam('comments', comments);
        ga.getXMLAnswer(function(response) {
            var incSysId = response.responseXML.documentElement.getAttribute("answer");
            if (incSysId) {
                alert("Incident created with Sys ID: " + incSysId);
            } else {
                alert("Failed to create incident.");
            }
        });
    }
}

Script Include: It should be client callable

var CreateIncidentFromHRCase = Class.create();
CreateIncidentFromHRCase.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    createIncident: function() {
        var hrCaseSysId = this.getParameter('sys_id');
        var comments = this.getParameter('comments');
        
        var incGr = new GlideRecord('incident');
        incGr.initialize();
        incGr.short_description = 'Incident created from HR Case';
        incGr.comments = comments;
        incGr.parent = hrCaseSysId;
        incGr.insert();
        
        return incGr.sys_id.toString();
    }
});

If my response helped please mark it correct and close the thread so that it benefits future readers.

[dvelloriy]

Hi @Ankur Bawiskar , This appears to be mostly working for me (admin). I will check for non-admin users (mostly HR agents with HR core basic role). I hope the solution works for them too since HR cases is in scoped HR app and we are creating incident in global.

Can we make this solution little more appealing? Right now when the incident is created, i dont see anything happening on the HR case. Can we update the worknotes of HR case saying the new Incident with INCxxxx has been been created?

Can we add a prompt for transferring attachments from HR to INC as well based on the response from the HR agent like i tried to configure it on my UI page?

Also, how can we map the rich_description of HR case (where all variable info is stored) to incident description?

Please let me know.

[Ankur Bawiskar]

@dvelloriy 

Glad to know that my script worked.

I believe I have answered your question and you can enhance it further.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar]

@dvelloriy 

Responses inline

1) to update work notes of HR you are already sending HR case sysId to Ajax, there you can query and update the work notes

2) UI page will be somewhat time consuming, but if you want you can check blogs, youtube videos and make it work

3) Map rich description of HR case to incident description -> this again can be done by performing GlideRecord to HR case in the ajax function

I believe I have answered your question.

If my response helped please mark it correct and close the thread so that it benefits future readers.