Welcome to Community Week 2025! Join us to learn, connect, and be recognized as we celebrate the spirit of Community and the power of AI. Get the details  

help to convert a ui page from native to sow

chercm
Mega Sage

hi , i have created a ui pop up on the native interface but i needed to be convert to work in SOW . 

 

chercm_0-1724627072000.png

 

here is the script : 

 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">
<g:evaluate var="jvar_taskId" expression="RP.getWindowProperties().get('sysId')" />
<g:evaluate var="jvar_callerId" expression="RP.getWindowProperties().get('callerId')" />
<g:evaluate var="jvar_firstName" expression="RP.getWindowProperties().get('firstName')" />
<g:evaluate var="jvar_lastName" expression="RP.getWindowProperties().get('lastName')" />
<g:evaluate var="jvar_emailAddress" expression="RP.getWindowProperties().get('emailAddress')" />
<g:evaluate var="jvar_mobilePhone" expression="RP.getWindowProperties().get('mobilePhone')" />

<input type="hidden" id="hidden_sys_id" value="${jvar_taskId}"></input>

<!-- Add custom styling for the dialog title -->
<style>
table.drag_section_header {
background-color: lightblue !important;
}
table.form-table {
width: 700px;
margin: 0 auto;
}
table.form-table td {
padding: 5px;
}
.right-align {
text-align: right;
}
</style>

<table class="form-table">
<tr>
<td>
<g:form_label>First Name</g:form_label>
</td>
<td>
<g:ui_input_field label="" name="form_first_name" id="form_first_name" readonly="true" size="40" value="${jvar_firstName}"/>
</td>
</tr>
<tr>
<td>
<g:form_label>Last Name</g:form_label>
</td>
<td>
<g:ui_input_field label="" name="form_last_name" id="form_last_name" readonly="true" size="40" value="${jvar_lastName}"/>
</td>
</tr>
<tr>
<td>
<g:form_label>Email Address</g:form_label>
</td>
<td>
<g:ui_input_field label="" name="form_email_address" id="form_email_address" readonly="true" size="40" value="${jvar_emailAddress}"/>
</td>
</tr>
<tr>
<td>
<g:form_label>Country</g:form_label>
</td>
<td>
<g:ui_input_field label="" name="form_country" id="form_country" mandatory="true" size="40"/>
</td>
</tr>
<tr>
<td>
<g:form_label>Mobile Phone</g:form_label>
</td>
<td>
<g:ui_input_field label="" name="form_mobile_phone" id="form_mobile_phone" mandatory="true" size="40" value="${jvar_mobilePhone}"/>
</td>
</tr>
<tr>
<td>
<g:form_label>Dell Assets</g:form_label>
</td>
<td>
<select id="dell_assets_dropdown" name="dell_assets_dropdown" style="width: 50%; margin-left: 164px;">
<option value="">None</option>
</select>
</td>
</tr>
<tr>
<td>
<g:form_label>Warranty End Date</g:form_label>
</td>
<td>
<g:ui_input_field label="" name="form_warranty_end_date" id="form_warranty_end_date" readonly="true" size="40"/>
</td>
</tr>
<tr>
<td>
<g:form_label>Troubleshooting / Description of issue</g:form_label>
</td>
<td>
<textarea id="form_description" name="form_description" rows="4" cols="40" style="width: 100%;"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;padding-top:10px;">
<button class="btn btn-default" onclick="processCancel()" style="margin-right:10px;">Cancel</button>
<button class="btn btn-primary" onclick="okButton()">Ok</button>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;padding-top:10px;">
<button class="btn btn-secondary" onclick="queryDellAsset()">Query Dell Asset</button>
</td>
</tr>
</table>

<script>
// Function to fetch and display Dell assets
function fetchDellAssets() {
var ga = new GlideAjax('DellAssetFetcher');
ga.addParam('sysparm_name', 'getDellAssets');
ga.addParam('callerId', '${jvar_callerId}');
ga.getXMLAnswer(function(response) {
var assets = JSON.parse(response);
var dropdown = document.getElementById('dell_assets_dropdown');
dropdown.innerHTML = ''; // Clear existing options
if (assets.length > 0) {
assets.forEach(function(asset) {
var option = document.createElement('option');
option.value = asset.serial_number;
option.text = asset.serial_number + ' - ' + asset.model;
dropdown.add(option);
});
} else {
var option = document.createElement('option');
option.value = '';
option.text = 'None';
dropdown.add(option);
}
});
}

// Call the function to fetch Dell assets when the page loads
fetchDellAssets();

// Function to query the selected Dell asset's warranty
function queryDellAsset() {
var selectedAsset = document.getElementById('dell_assets_dropdown').value;
if (!selectedAsset) {
alert('Please select a Dell asset to query.');
return;
}

var ga = new GlideAjax('DellWarrantyLookup');
ga.addParam('sysparm_name', 'getWarrantyEndDate');
ga.addParam('serialNumber', selectedAsset);

ga.getXMLAnswer(function(response) {
console.log("Warranty response: ", response); // Add log for the response
var result = JSON.parse(response);
if (result.status === 'success') {
console.log("Warranty data: ", result);
var entitlements = result.entitlements;
var latestEndDate = null;
entitlements.forEach(function(entitlement) {
var endDate = new Date(entitlement.endDate);
if (!latestEndDate || endDate > latestEndDate) {
latestEndDate = endDate;
}
});
if (latestEndDate) {
document.getElementById('form_warranty_end_date').value = latestEndDate.toISOString().split('T')[0];
}
} else {
console.log("Error in warranty lookup: ", result.message);
alert('Error: ' + result.message);
}
});
}

// OK button script
function okButton() {
if (form_country.value == '') {
alert('Country is required');
return false;
}

if (form_mobile_phone.value == '') {
alert('Mobile Phone is required');
return false;
}

if (form_description.value == '') {
alert('Description of issue is required');
return false;
}

// Call REST message with AJAX
var ga = new GlideAjax('DellREST');
ga.addParam('sysparm_name', 'sendMSG'); // AJAX function
ga.addParam('country', form_country.value); // Pass country into AJAX
ga.addParam('mobile_phone', form_mobile_phone.value); // Pass mobile phone into AJAX
ga.addParam('first_name', form_first_name.value); // Pass first name into AJAX
ga.addParam('last_name', form_last_name.value); // Pass last name into AJAX
ga.addParam('email_address', form_email_address.value); // Pass email address into AJAX
ga.addParam('hidden_sys_id', hidden_sys_id.value); // Pass sys_id into AJAX
ga.addParam('selected_asset', document.getElementById('dell_assets_dropdown').value); // Pass selected asset
ga.addParam('description', form_description.value); // Pass description

ga.getXML(myCallBack); // Process response

function myCallBack(response) {
// Dig out the 'answer' attribute
var ajaxcomplete = response.responseXML.documentElement.getAttribute('answer');
var result = JSON.parse(ajaxcomplete);
if (result.status == 'success') {
alert('Submitted successfully');
} else {
alert('Error: ' + result.message);
}
GlideDialogWindow.get().destroy(); // Close the dialog window
}
}

// Cancel button script
function processCancel() {
GlideDialogWindow.get().destroy();
}
</script>
</j:jelly>
 
 
1 REPLY 1

Najmuddin Mohd
Mega Sage

Hi @chercm 
The below link helps you to create Pages in SOW.

https://www.servicenow.com/community/next-experience-articles/how-to-use-ui-actions-in-workspaces/ta...

Hope this helps you.


Regards,
Najmuddin.