help to convert a ui page from native to sow
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-25-2024 04:09 PM
hi , i have created a ui pop up on the native interface but i needed to be convert to work in SOW .
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
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-28-2024 11:37 AM
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.