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

}

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

[J Siva]

Hi @dvelloriy 
Put your sripts in the client script section.
I just tried that, it seems to be working.

Regards,

Siva

[dvelloriy]

Hi @J Siva  i tried putting my jelly code in client script section of ui page earlier however it gave compiler errors. How is it working for you?

[J Siva · Accepted solution]

@dvelloriy 
I reviewed your script and made a few changes to create a new incident. It's now working as expected.
Note:
Modify the processing script as needed. In the sample below, I only considered incident creation and did not include the "Transfer Attachment" functionality.

UI Page:

Name: test_page

HTML:

<?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: 100%;

        }

        .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>
    <g:ui_form>
        <input type="hidden" id="key" name="key" value="${sysparm_key}" />
        <input type="hidden" id="cancelled" name="cancelled" value="false" />

        <div class="dialog-content">
            <!--<g:ui_input_field label="Additional Comments" name="additional_comments" id="additional_comments" /> -->

            <label for="additional_comments">Additional Comments</label>
            <textarea name="additional_comments" 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 -->
            <footer class="modal-footer">
                <button class="btn-primary btn" style="min-width:5em" onclick="return onSubmit();" name="submit" id="submit">Create incident</button>
                <button class="btn-danger btn" style="min-width:5em" onclick="return onCancel();" name="cancel" id="cancel">Cancel</button>
            </footer>

        </div>

    </g:ui_form>

</j:jelly>

Client script:

function onCancel() {
    var c = gel('cancelled');
    c.value = "true";
    GlideModal.get().destroy();
    return false;
}

function onSubmit() {
    return true;
}

Processing script:

if (cancelled == "false") {
    var hr_case_id = key; // sys id of case
    var comments = additional_comments; //comments

    if (!gs.nil(hr_case_id)) {
        var new_record = new GlideRecord('incident');
        new_record.initialize();
        new_record.short_description = comments +" :from"+hr_case_id;
        var new_id = new_record.insert();
        response.sendRedirect("incident.do?sys_id=" + new_id);
        gs.addInfoMessage("Incident has been created");

    }
} else {
    response.sendRedirect("incident.do?sys_id=" + key);
    gs.addInfoMessage("Incident hasn't been created");
}

Client callable UI action:

function runClientSideScript() {
    var modal = new GlideModal("test_page");
    modal.setTitle("Create new incident");
    modal.setPreference('sysparm_key', g_form.getUniqueValue());
    modal.render();
}

Output:

Regards,
Siva

[Ankur Bawiskar]

@dvelloriy 

are you trying to update the OOTB HR Transfer UI page?

what's your actual business requirement?

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