How to write a Ui page in order to get a dialog box

[Varun Naidu]

How to write a UiIpage in order to get a dialog box

When we click on the SOP link o the incident page it should open a Pop up(Dialog box)

Below is my script I need to know how can I get the dialog box in order to get the content of the article attached in it 

Below is my script

var SOP_LINK_WIKI = Class.create();
SOP_LINK_WIKI.prototype = Object.extendsObject(AbstractAjaxProcessor,{

GETSOPWIKIGUIDE : function(){
gs.log("KB CI link is calling");
var kbsysID;
var kbrefLink;
var ci = this.getParameter('sysparm_cmdb');
var cust=this.getParameter('sysparm_cust');
var prac=this.getParameter('sysparm_pra');
//var wiki=this.getParameter('sysparm_wiki');
gs.log("KB CI link is calling and CI is" +ci +"cust is"+cust +"prac is" +prac);

//gs.log();
var kb = new GlideRecord('kb_knowledge');
kb.addQuery('u_customer',cust);
kb.addQuery('cmdb_ci',ci);
kb.addQuery('u_practice',prac);
kb.addQuery('article_type',"wiki");
kb.query();
if(kb.next()){
gs.log("Wiki "+kb.sys_id);
kbsysID=kb.number;
return 'kb_view.do?sysparm_article='+kbsysID;
}
else{
var kb2 = new GlideRecord('kb_knowledge');
kb2.addQuery('u_customer',cust);
kb2.addQuery('cmdb_ci',ci);
kb2.addQuery('u_practice',prac);
kb2.query();
if(kb2.next()){
gs.log("normal "+kb2.sys_id);
kbsysID=kb2.sys_id;
}

}


gs.log("the KB sys id is"+kbsysID);
if(kbsysID!='')
{
var grAttachment = new GlideRecord("sys_attachment");
grAttachment.addQuery('table_sys_id',kbsysID);
//grAttachment.addEncodedQuery("content_typeINapplication/msword,application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedoc");
grAttachment.orderByDesc('sys_updated_on');
grAttachment.query();
if(grAttachment.next()){
kbrefLink = gs.getProperty('glide.servlet.uri') + grAttachment.getLink();
//gs.log("B "+B);
return kbrefLink;
}
}else{

return -1;
}

function processCancel(){
GlideDialogWindow.get().destroy(); //Close the dialog window
reloadWindow(window); //Refresh the form
}

},

type: 'SOP_LINK_WIKI'
});

Thanks in advance

[ChrisBurks]

Here is the link to the docs for calling/opening a ui page as a GlideDialogWindow: https://docs.servicenow.com/bundle/kingston-application-development/page/app-store/dev_portal/API_re...

But basically you would call the GlideDialogWindow api in a client-side scripting environment such as a client script or if doing a client side UI action.

var gdw = new GlideDialogWindow('name of ui page');

//Then you can set options for the window itself and send information to the ui page

      gdw.setTitle('title for the page'); //Title for the browser window not the ui page title
      gdw.setSize(750,300); //Size of the popup window
      gdw.setPreference('table', 'u_test_list'); //Sending/setting a jelly parameter for the ui page to use
      gdw.setPreference('title', 'A New Title'); //Sending/setting a jelly parameter for the ui page to use
      gdw.render(); //executes the dialog window to popup/show

More than likely you know this part as I see you created a function in your GlideAjax enabled script include to close the
dialog window. 

Creating a UI page to use as a GlideDialogWindow is no different than creating a regular UI page. In fact it's the same.
The only difference really has nothing to do with the creation of the UI page and that's how it's rendered which is what
I wrote above.

Using information being passed to it from the GlideDialogWindow api and the .setPreference() method.
Depending upon how you set the preference you can access them with this syntax within the ui page html block:

${RP.getWindowProperties().get('table')}

Or
if you prefixed your variable with sysparm_  when defining the setPreference then you can access  the variable like this
${sysparm_of_variable}

Link to creating ui page: https://docs.servicenow.com/bundle/kingston-application-development/page/script/server-scripting/ref...

Whatever renders in the UI page should render in the popup.