Hi,

I have created one UI Page script and calling it through UI Action button but script is not working in workspace however it's working properly in form label.

UI page Script Name: modal_popup_for_work_notes

HTML:

                 

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

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

    <style>

        div.dialog_title {

            font-weight: 700;

            font-size: 18px;

            color: #3b3b3b;

            text-align: center;

            padding: 10px 0;

            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

        }

        table {

            width: 100%;

            margin: 0;

            padding: 0;

        }

        td {

            padding: 8px;

            vertical-align: top;

        }

        label {

            font-weight: 600;

            display: block;

            margin-bottom: 4px;

            font-size: 13px;

        }

        input,

        select,

        textarea {

            width: 100%;

            padding: 8px;

            font-size: 14px;

            border: 1px solid #ccc;

            border-radius: 6px;

            box-sizing: border-box;

            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

        }

        #work_notes {

            height: 220px;

            resize: vertical;

        }

        .btn {

            min-width: 100px;

            font-weight: 600;

            border-radius: 6px;

            padding: 8px 16px;

        }

        .btn-primary {

            background-color: #5e35b1;

            border-color: #5e35b1;

            color: #fff;

        }

        .btn-primary:hover {

            background-color: #4527a0;

            border-color: #4527a0;

        }

        .btn-default {

            background-color: #f0f0f0;

            border-color: #ccc;

            color: #333;

        }

        .btn-default:hover {

            background-color: #e0e0e0;

        }

        .dialog_buttons {

            display: flex;

            justify-content: flex-end;

            gap: 10px;

            margin-top: 10px;

        }

        input[readonly],

        select[readonly] {

            background-color: #f5f5f5;

            cursor: not-allowed;

        }

    </style>

    <g:ui_form>

        <table>

            <tr>

                <td>

                    <label for="country">Country<span style="color: red;">*</span></label>

                    <select id="country" onchange="onCountryChange()">

                        <option value="">-- Select Country --</option>

                        <option value="CA">Canada</option>

                        <option value="US">United States</option>

                        <option value="UK">United Kingdom</option>

                        <option value="AUS">Australia</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td>

                    <label for="street_address">Street Address<span style="color: red;">*</span></label>

                    <input type="text" id="street_address" maxlength="250" />

                </td>

            </tr>

            <tr>

                <td>

                    <label for="city">City<span style="color: red;">*</span></label>

                    <input type="text" id="city" />

                </td>

            </tr>

            <tr>

                <td>

                    <label for="state">State / Province<span style="color: red;">*</span></label>

                    <input type="text" id="state" maxlength="100" />

                </td>

            </tr>

            <tr>

                <td>

                    <label for="pincode">Zip/Postal Code<span style="color: red;">*</span></label>

                    <input type="text" id="pincode" />

                </td>

            </tr>

            <tr>

                <td>

                    <label for="phone">Phone Number<span style="color: red;">*</span></label>

                    <input type="text" id="phone" />

                </td>

            </tr>

 <!-- <tr>

                <td>

                    <label for="serial_number">Serial Number</label>

                    <input type="text" id="serial_number" readonly="true" style="background-color: #eeeeee;" />

                </td>

            </tr> -->

            <tr>

    <td>

        <label for="serial_number">Serial Number<span style="color: red;">*</span></label>

        <select id="serial_number">

            <option value="">-- Fetching serial numbers... --</option>

        </select>

    </td>

</tr>

            <tr>

                <td>

                    <label for="work_notes">Enter the troubleshooting steps</label>

                    <textarea name="work_notes" id="work_notes">

Office location:

Availability:

Employee Name:

Device Serial number:

OEM:

Model (Optional):

Description of the issue:

When did the issue start?

Does the issue occur when the PC is not connected to anything (IE; dock, monitor, AC Adapter)?

Troubleshooting Steps:

Reason to Escalate (Attach screenshot where possible):

                    </textarea>

                </td>

            </tr>

            <tr>

                <td>

                    <div class="dialog_buttons">

                        <g:dialog_buttons_ok_cancel ok_id="submitData" ok="return continueOK()" ok_type="button" ok_text="${gs.getMessage('Send')}" ok_style_class="btn btn-primary" cancel_type="button" cancel_id="canceldata" cancel_style_class="btn btn-default" cancel="return continueCancel()" />

                    </div>

                </td>

            </tr>

        </table>

    </g:ui_form>

</j:jelly>

 

Client script: 

 

                           

// Country address data - easily add more countries here

var COUNTRY_ADDRESS_DATA = {

    "CA": {

        street_address: "25 York Street, 30th Floor",

        city: "Toronto",

        state_province: "Ontario",

        pincode: "M5J 2V5"

    },

    "US": {

        street_address: "250 Royall Street, Suite 210W",

        city: "Canton",

        state_province: "Massachusetts",

        pincode: "02021"

    },

    "UK": {

        street_address: "6th Floor, 90 High Holborn",

        city: "London",

        state_province: "N/A",

        pincode: "WC1V 6BH"

    },

    "AUS": {

        street_address: "Level 16, 440 Collins Street",

        city: "Melbourne",

        state_province: "N/A",

        pincode: "VIC 3000"

    }

};

addLoadEvent(function() {

    var affectedUser = '';

    // Method A: Check URL Parameters (Required for Workspace showFrame)

    var urlParams = new URLSearchParams(window.location.search);

    affectedUser = urlParams.get('sysparm_u_affected_user');

    // Method B: Fallback to GlideModal preferences (For Classic UI)

    if (!affectedUser) {

        try {

            var modal = GlideModal.get();

            if (modal) {

                affectedUser = modal.getPreference('u_affected_user');

            }

        } catch (e) {}

    }

   

    // Now execute the Ajax call with the found ID

    if (affectedUser && affectedUser !== 'null' && affectedUser !== 'undefined') {

        var ga = new GlideAjax('THLenovoUtils');

        ga.addParam('sysparm_name', 'getAssetDetailsforAssignedTo');

        ga.addParam('sysparm_caller_id', affectedUser);

        ga.getXMLAnswer(function(answer) {

            var serialDropDown = gel('serial_number');

            if (serialDropDown) {

                // Clear existing options (like the "Fetching..." placeholder)

                serialDropDown.options.length = 0;

                if (answer && answer.trim() !== "" && answer.indexOf("No Caller ID") === -1) {

                    // Split the comma-separated string into an array

                    var serials = answer.split(',');

                    // Add a default "Select" option

                    var defaultOpt = document.createElement('option');

                    defaultOpt.value = "";

                    defaultOpt.text = "-- Select a Serial Number --";

                    serialDropDown.add(defaultOpt);

                    // Loop through the array and add each serial as an option

                    for (var i = 0; i < serials.length; i++) {

                        var sn = serials[i].trim();

                        if (sn) {

                            var opt = document.createElement('option');

                            opt.value = sn;

                            opt.text = sn;

                            serialDropDown.add(opt);

                        }

                    }

                } else {

                    // Handle case where no assets were found

                    var noOpt = document.createElement('option');

                    noOpt.value = "";

                    noOpt.text = "No computer assigned to caller";

                    serialDropDown.add(noOpt);

                }

            }

        });

    }

});

// Add onchange event to country dropdown

function onCountryChange() {

    var countryCode = gel('country').value;

    if (countryCode && COUNTRY_ADDRESS_DATA[countryCode]) {

        var addressData = COUNTRY_ADDRESS_DATA[countryCode];

        // Populate fields

        gel('street_address').value = addressData.street_address;

        gel('city').value = addressData.city;

        gel('state').value = addressData.state_province;

        gel('pincode').value = addressData.pincode;

        // Make fields readonly

        gel('street_address').readOnly = true;

        gel('city').readOnly = true;

        gel('state').readOnly = true;

        gel('pincode').readOnly = true;

    } else {

        // Clear and enable fields if no country selected

        gel('street_address').value = '';

        gel('city').value = '';

        gel('state').value = '';

        gel('pincode').value = '';

        gel('street_address').readOnly = false;

        gel('city').readOnly = false;

        gel('state').readOnly = false;

        gel('pincode').readOnly = false;

    }

}

function continueOK() {

    var modal = GlideModal.get();

    // Get all mandatory fields

    var street = gel('street_address').value.trim();

    var city = gel('city').value.trim();

    var state = gel('state').value.trim(); // State/Province field

    var country = gel('country').value.trim();

    var pincode = gel('pincode').value.trim();

    var phone = gel('phone').value.trim();

    var work_notes = gel('work_notes').value.trim();

    var serial = gel('serial_number').value.trim();

    // Array to collect missing fields

    var missingFields = [];

    if (!street) missingFields.push("Street Address");

    if (!city) missingFields.push("City");

    if (!state) missingFields.push("State/Province");

    if (!country) missingFields.push("Country");

    if (!pincode) missingFields.push("Zip/Postal Code");

    if (!phone) missingFields.push("Phone Number");

    if (!serial) missingFields.push("Serial Number");

    // if (!work_notes) missingFields.push("Troubleshooting Steps"); // optional

    // If any fields are missing, alert and stop

    if (missingFields.length > 0) {

        alert("Please fill the following mandatory fields:\n- " + missingFields.join("\n- "));

        return false;

    }

    // Create JSON object of mandatory fields (excluding work_notes)

    var mandatoryData = {

        street_address: street,

        city: city,

        state_province: state, // Added state

        country: country,

        pincode: pincode,

        phone_number: phone,

        serial_number: serial

    };

    // Send data to server via GlideAjax

    var ga = new GlideAjax('THLenovoUtils');

    ga.addParam('sysparm_name', 'createCaseViaSubflow');

    ga.addParam('sysparm_sys_id', g_form.getUniqueValue()); // first input

    ga.addParam('sysparm_mandatory_json', JSON.stringify(mandatoryData)); // second input: JSON

    ga.addParam('sysparm_work_notes', work_notes); // third input: raw work_notes

    ga.getXMLAnswer(function(response) {

        modal.destroy();

        g_form.addInfoMessage("Incident has been sent to Lenovo for further investigation");

    });

}

function continueCancel() {

    GlideModal.get().destroy();

}

 

Workspace client script:

 

function onClick(g_form, g_modal, g_user) {

    // 1. Get values from the Workspace form

    var workNotes = g_form.getValue("work_notes");

    var caller = g_form.getValue("caller_id");

   

    // 2. Define the UI Page (ensure the prefix is correct)

    var uiPage = "modal_popup_for_work_notes";

    // 3. Construct URL with parameters

    // We use encodeURIComponent to ensure special characters in notes don't break the URL

    var url = uiPage + ".do?sysparm_workspace=true" +

              "&sysparm_caller_id=" + caller +

              "&sysparm_work_notes=" + encodeURIComponent(workNotes);

    // 4. Open the Modal

    g_modal.showFrame({

        title: "Incident Details",

        url: url,

        size: 'lg',

        height: 500

    });

}

UI Action button script:

 

function sendIncidentTolenovo() {

    if (g_form.getValue('work_notes') == '') {

        var workNotes = g_form.getValue("work_notes");

        var affectedUser = g_form.getValue("u_affected_user"); // Get the caller

        var gm = new GlideModal("modal_popup_for_work_notes");

        gm.setTitle("Incident Details");

        gm.setPreference("work_notes", workNotes);

        gm.setPreference("u_affected_user", affectedUser); // Pass the caller to the UI Page

        gm.setSize(600, 400);

        gm.render();

        return false;

    }

    //!current.isNewRecord() && current.active == true && current.correlation_id.toString().indexOf('Lenovo') == -1 && new x_telu6_th_lenovo.THLenovoUtils().isUserInAllowedGroups()

}

Please help, thanks in advance.

Regard,

Dusmanta.