UI Page into Widget

[Anurag28]

Hi All,

We have a UI Page that displays depending on the choice of a variable on a Service Request. The Page displays a Knowledge Article. Below is the code-

HTML PART

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

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:ui_form>
<table width="100%">
<tr>
<td>
<j:set var="jvar_user_id" value="${sysparm_user}" />
<g:dialog_button onclick="toKnowledge()" type="button" class="diabutt">View Article</g:dialog_button>
<input type="hidden" id="kb_article" name="kb_article" value="${article.number}"/>
</td>
</tr>
<tr>
<td>
<div style="margin-top: 10px;">
<!-- Pull in 'ui_checkbox' UI Macro for accept checkbox -->
<g:ui_checkbox id="accept_terms" name="accept_terms" value="false"/>
<label for="load_demo">I accept these terms and conditions.</label>
</div>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr id="dialog_buttons">
<td colspan="2" align="right">
<g:evaluate var="sysparm_id">

var splitresult = RP.getReferringURL().split("=");

var sysparm_id = splitresult[1];

</g:evaluate>
<g:evaluate var="jvar_cancel_url"
expression= "RP.getWindowProperties().get('cancel_url')" />
<input type="hidden" id="cancel_url" value="${jvar_cancel_url}" />

<!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons -->
<g:dialog_buttons_ok_cancel ok="return termsOK()" cancel="termsCancel()" ok_type="button" cancel_type="button"/>
</td>
</tr>
</table>
</g:ui_form>

</j:jelly>

Client Script

function termsCancel(){
//Redirect gets called if the 'Cancel' dialog button is clicked
if($('cancel_url').value != 'null'){
window.location = $('cancel_url').value;
GlideDialogWindow.get().destroy();
}
else{
GlideDialogWindow.get().destroy();
//window.location = 'home.do'; //Redirect to default homepage
//window.location = 'sc_cat_item/sys_id=071bcd95db9c53842a862aea4b961954.do';

//action.setRedirectURL(current);

}
}

function termsOK(){
//Gets called if the 'OK' dialog button is clicked
//Make sure terms have been accepted
var terms = gel('accept_terms').value;
if(terms != 'true'){
//If terms are false stop submission
alert('Please accept the terms and conditions to continue your order.');
return false;
}
//If accept checkbox is true do this...
GlideDialogWindow.get().destroy(); //Close the dialog window
//g_form.setValue('myvar', true); //Optionally set the value of a variable or field indicating acceptance
}

function toKnowledge(){

var myarticle = document.getElementById('articleslist');

var myValue = "";

// var myValue = myarticle.options[myarticle.selectedIndex].value;

var url = new GlideURL('kb_view.do');

url.addParam('sys_kb_id','e7f31c4bdb19df480f3115784b96199f');

var w = getTopWindow();

w.popupOpenFocus(url.getURL(), 'kb_view', 300, 300, '_self', false, false);

}

We are calling this page from a onChange script in the request.

Catalog Client Script

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}

//Type appropriate comment here, and begin script below
var ag = g_form.getValue('Need_for_Business');
if(ag == 'No'){
var dialog = new GlideDialogWindow('terms_and_conditions_dialog'); //Render the dialog containing the UI Page 'terms_and_conditions_dialog'
dialog.setTitle('Terms and Conditions'); //Set the dialog title
dialog.setSize(300,300); //Set the dialog size
dialog.removeCloseDecoration(); //Remove the dialog close icon
//dialog.setPreference('cancel_url', 'catalog_home.do?sysparm_view=catalog_default'); //Set optional cancel redirect URL
dialog.render(); //Open the dialog
}
}

This was working fine till the introduction of Service Portal in the system. I know from wiki that UI Pages would not work in portal and we have to use widgets, but I have no clue how to do that! MoreOver an Angular Novice! If anyone can help how I can convert this into workable pieces of code for Portal that will be a very big help! Thanks! 

[Swathi12]

Hi Anurag,

1. Create a widget : Here you need to add the html code, client script and server script

2. Map it to a page so that it can be displayed in service portal. 

For starters you can check this: 

https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/c_QuickStart.html

Is it possible to share the screenshot of the page , how it looks as of now.

Regards,

Swathi

[Anurag28]

Hi Swathi,

This is what it looks now-

On change of Business Reason? You get this dialoguewindow, clicking on 'View Article' opens the knowledge article in a different page. 

[Swathi12]

Okay , how the dropdown values getting fetched is it from some table? Its pretty easy to do this . 

I will try to give you some code by tomorrow.

Regards,

Swathi

[Anurag28]

Just a Yes/No Field. When No, we should get this DialogueWindow.

View Article opens the knowledge article.

You click I accept and Ok to remain in the same page.

Cancel takes you back to Service Catalog.

Thanks for your help!