how to create pop-up for ui action

ganesh7 · ‎01-27-2016

Hi everyone,

i need to create one button Request Approval on change form so that it will prompts with a pop-up and allows enter a message that will be added in the email that goes out to the client lead requesting approval.

So could you please give some idea how to do this.

Regards,

Ganesh.

guhann · ‎01-27-2016

You can make use of GlideDialogWindow with an UI page to capture the message from user and process it wherever as per ur requirement. Refer: GlideDialogWindow API Reference - ServiceNow Wiki

zica · ‎01-27-2016

Hi GaneshBabu Sanneboina,

You can use the script below in order to achieve your query :

Step 1 : Create a new Ui Action :

name : Comments Dialog

table : incident for example

action name : comments_dialog

form button : true

Client : true

Copy and paste the script below under the script tab

function commentsDialog() {

     //Get the values to pass into the dialog

     var comments_text = g_form.getValue("comments");

     var short_text = g_form.getValue("short_description");



     //Initialize and open the Dialog Window

     var dialog = new GlideDialogWindow("task_comments_dialog"); //Render the dialog containing the UI Page 'task_comments_dialog'

     dialog.setTitle("Add Task Comments"); //Set the dialog title

     dialog.setPreference("comments_text", comments_text); //Pass in comments for use in the dialog

     dialog.setPreference("short_text", short_text); //Pass in short description for use in the dialog

     dialog.render(); //Open the dialog

}

Then Save It,

Step 2 : Create a new UI Page

name : task_comments_dialog

Under HTML form, copy and paste the script below :

<g:ui_form>

   <!-- Get values from dialog preferences passed in -->

   <g:evaluate var="jvar_short_text"

       expression="RP.getWindowProperties().get('short_text')" />

   <g:evaluate var="jvar_comments_text"

       expression="RP.getWindowProperties().get('comments_text')" />

     <!-- Set up form fields and labels -->

     <table width="100%">

         <tr id="description_row" valign="top">

               <td colspan="2">

                     <!-- Short description value used as a label -->

                     ${jvar_short_text}

               </td>

         </tr>

         <tr>

             <td>

                 <!-- Comments text field (Contains comments from originating record as a default) -->

                 <g:ui_multiline_input_field name="dial_comments" id="dial_comments" label="Additional comments" value="${jvar_comments_text}" mandatory="true" />

             </td>

         </tr>

         <tr>

             <td colspan="2">

             </td>

         </tr>

         <tr id="dialog_buttons">

               <td colspan="2" align="right">

                     <!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons.

                   'ok' option will call the 'validateComments' Client script function from the UI Page-->

                     <g:dialog_buttons_ok_cancel ok="return validateComments()" ok_type="button" cancel_type="button" />

               </td>

         </tr>

   </table>

</g:ui_form>

Below HTML tab, there is Client script tab, Copy and paste the script below under client script tab :

function validateComments() {

     //Gets called if the 'OK' dialog button is clicked

     //Make sure dialog comments are not empty

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

     comments = trim(comments);

     if (comments == "") {

           //If comments are empty stop submission

           alert("Please provide comments to submit the dialog.");

           return false;

     }

     //If comments are not empty do this...

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

     g_form.setValue("comments", comments); //Set the 'Comments' field with comments in the dialog

}

Then save it.

To be able to test it, open an incident, you will see a new button with 'Comments Dialog' name,

Click it, a popup will appear, input a comment under the popup and then click on OK,

You comment will appear under additional comment field.

Let me know if you need more info

Kind Regards,

Do not feel shy to mark correct or helpful answer if it helps or is correct, and like it

ganesh7 · ‎01-27-2016

Hi Zic

under html what to write

zica · ‎01-27-2016

Sorry mate, There is a bug when I copy and paste HTML Code.

Copy and paste the script below

<g:ui_form>

<g:evaluate var="jvar_short_text"

expression="RP.getWindowProperties().get('short_text')" />

<g:evaluate var="jvar_comments_text"

expression="RP.getWindowProperties().get('comments_text')" />

${jvar_short_text}

</td>

</tr>

<tr>

<td>

<g:ui_multiline_input_field name="dial_comments" id="dial_comments" label="Additional comments" value="${jvar_comments_text}" mandatory="true" />

</td>

</tr>

<tr>

</td>

</tr>

<!-- Pull in 'dialog_buttons_ok_cancel' UI Macro for submit/cancel buttons.

'ok' option will call the 'validateComments' Client script function from the UI Page-->

<g:dialog_buttons_ok_cancel ok="return validateComments()" ok_type="button" cancel_type="button" />

</td>

</tr>

</table>

</g:ui_form>

Kind Regards,

ZA

Do not feel shy to mark correct or helpful answer if it helps or is correct