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.
