UI Page into Widget

Anurag28 · ‎07-25-2018

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;">

<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}" />

<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 · ‎07-27-2018

Hi Anurag,

Replace the html template of widget with :

<div class="panel panel-primary b">
<div class="panel-heading">
<h4 class="panel-title">
<i class="fa fa-info-circle m-r-sm"></i>User Information
</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group" >
<div class="col-sm-12">
<span style="color:red;">*</span><label class="control-label" >Phone Number</label>
<select id="ph_num" name="ph_num" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="c.selectedNumber" ng-options="x for x in data.choices" ng-change="myChange(c.selectedNumber)"><option value="">-- Select an option--</option></select>

</div>
</div>
<div class="form-group" >
<div class="col-sm-12">
<span style="color:red;">*</span><label class="control-label" >Data Plan Needed</label>
<select id="data_plan" name="data_plan" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="c.selectedData" ng-options="y for y in data.choices" ng-change="myChange(c.selectedData)"><option value="">-- Select an option--</option></select>
</div>
</div>
</form>


<div class="modal fade" tabindex="-1" role="dialog" id="example">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="checkbox">
<label>
<input class="check_list" name="check_list[]" type="checkbox">
I accept the Terms
</label>
</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary" id="btn1"> Accept Terms</button>

</div>
</div>
</div>
</div>
</div>
<div class="panel-footer clearfix">

<input class="pull-right btn btn-primary" type="reset" value="${Reset}" ng-click="reset()">
<input class="pull-left btn btn-primary" type="viewarticle" value="${View Article}" ng-click="onView()">
</div>
</div>

and Client script with :

function($scope, $window, spUtil,spModal) {
var c = this;

$scope.myChange = function(something){
if(something == "No"){
$('#example').modal('show');
}
}

$scope.onView = function() {
//Write view article code here
}
$scope.reset = function() {
c.selectedNumber = "";
c.selectedData = "";

$scope.data.func ='reset';
c.server.update().then(function(response) {
spUtil.update($scope);
})
}
}

Please do mark this answer helpful if it answered your question.

Regards,

Swathi