Opening a dialog window from a button in a UI macro?

TE2 · ‎02-18-2016

Hi all, I'm a bit of a newbie with ServiceNow and am creating a catalog item in which there is (or rather, should be) a button that, when clicked, opens up a pop-up box with some information. I did not want to create an alert or use the already provided "More information" function. I am trying to write a script in my UI macro that would open this dialog window from the button. Here's what I currently have:

<html>

<head>

<script>

window.onload = function() {

var a = document.getElementById("myUIpageName");

a.onclick = function() {

function dialog() {

var dialog = new GlideDialogWindow("myUIpageName"); //Instantiate the dialog containing the UI Page 'add_comments_dialog'

//dialog.setTitle("Eligibility"); //Set the dialog title

//dialog.render(); //Open the dialog

//gs.log('test', 'myUserName');

alert('Test');

}

return false;

}

</script>

</head>

<body>

<a id="myUIpageName" class="request_catalog_button" style="width: 150px; height: 25px;">TextOnMyButton</a>

</body>

</html>

Thanks!

ahaz86 · ‎02-19-2016

UI Macro:

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

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

   <input type="button" onclick="openDialog()" value="Open Dialog" class="selected_action action_context btn btn-primary"/>

   <script>

   function openDialog(){

               var dialog = new GlideDialogWindow("myUIpageName"); 

               dialog.setTitle("Eligibility"); 

               dialog.render(); 

   }

   </script>

</j:jelly>

View solution in original post

Linda S · ‎02-18-2016

I have something similar however I am using a UI Action to pop up a dialog to capture comments via a UI Page - maybe it will help?

UI Action:

Name - Add Comments

Table - Incident

Show on Update - checked

Client - checked

Form Button - checked

Onclick = showCommentsDialog()

Script:

function showCommentsDialog(){

var dialog = new GlideDialogWindow('Add Comments');

dialog.render();

}

UI Page:

Name - Add Comments

HTML - XML Section -

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

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<p>Please add comments</p>

</section>

</section>

</j:jelly>

Client Script Section -

function validateComments() {

//Make sure there are comments to submit

var comments = gel("dialog_comments").value;

comments = trim(comments);

if (comments == "") {

//If comments are empty, alert the user and stop submission

alert("Please enter your comments before submitting.");

return false;

}

//If there are comments, close the dialog window and submit them

GlideDialogWindow.get().destroy(); //Close the dialog window

g_form.setValue("short_description", comments); //Set the Short Description field with comments in the dialog

g_form.submit();

TE2 · ‎02-19-2016

I was actually creating a catalog item. I forgot to mention that initially. Thank you though!

ahaz86 · ‎02-19-2016

UI Macro:

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

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

   <input type="button" onclick="openDialog()" value="Open Dialog" class="selected_action action_context btn btn-primary"/>

   <script>

   function openDialog(){

               var dialog = new GlideDialogWindow("myUIpageName"); 

               dialog.setTitle("Eligibility"); 

               dialog.render(); 

   }

   </script>

</j:jelly>

TE2 · ‎02-19-2016

Worked like a charm. Thanks so much!