Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Help with popup alert message within UI page

Nya Valdez
Kilo Guru

Hello SN Community:

I'm trying to add a popup alert message within my UI page that says: "Please ensure you review the Releases tab on  your Application Validation Tasks to understand what releases are impacting each of your applications." when a user clicks the "Update" dialog button. I wrote it into my button html line but what I get is below rather than an actual alert popup message. Can someone please tell me how to get this to appear as a popup message with 'OK'? My script is below

find_real_file.png

<?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> 
  <g:evaluate> 
  var currentTable = RP.getWindowProperties().get('current_table') || ''; 
  var sysIdList = RP.getWindowProperties().get('sys_id_list') || ''; 
  var tableName = RP.getWindowProperties().get('table_name') || '';
  </g:evaluate>
  <input type="hidden" name="current_table" value="$[currentTable]" /> 
  <input type="hidden" name="sys_id_list" value="$[sysIdList]" />
  <j:set var="jvar_work_notes" value="${RP.getWindowProperties()['work_notes_update']}" />          
<table width="250" style="border-spacing:20px; height:110px">
              <tr>
                             <td rowspan="5" nowrap="true" width="225px" style="vertical-align:top" />
              </tr>
              <div class="row">
                            <div class="col-md-8">
                             <span style="display:inline" class="mandatory required marker"></span>                         
                                          <label>${gs.getMessage('Assignment Group')}:</label>
                                           </div>
              </div>
                                           <div class="row">
                                                          <div class="col-md-8">
<g:ui_reference name="asgngroup" table="sys_user_group" show_lookup="true" show_popup="true" query="active=true" />
                                                         </div>
                             </div>
              <div class="row">
                             <div class="col-md-8">
                                           <label>${gs.getMessage('Validation Contact')}:</label>
                            </div>
              </div>
              <div class="row">
              <div class="col-md-8">               
<g:ui_reference name="asgnto" table="sys_user" show_lookup="true" show_popup="true" />
                             </div>
                                           </div>
<div class="row">
                             <div class="col-md-8">
                                           <label>${gs.getMessage('Validation Contact Cell Number')}</label>
                             </div>
              </div>
              <div class="row">
                            <div class="col-md-8">
                                          <g:ui_reference name="cellnum" id="cellnum" table="sys_user" show_lookup="true" show_popup="true" query="active=true^mobile_phoneISNOTEMPTY" />
                             </div>
              </div>
                <table>
                             <div class="row">
                                             <div class="col-md-8">
                                           <label for="validation_type">Validation Type</label>
                                             </div>
                             <div class="col-md-9">
                                                          <g:ui_choice_input_field id="validation_type" name="valtype" for="validation_type" default_value="None">
                             <g:evaluate var="jvar_choices" object="true">  
                                           var types = [];
                                           var gr = GlideRecord('sys_choice');
                                           gr.addQuery('name', 'x_namim_edrm_nos_patch_schedule_task');
                                           gr.addQuery('element', 'validation_type');
                                           gr.query();
                                           while (gr.next()){
                                           types.push({
                                           'value' : gr.value.toString(),
                                           'label' : gr.label.toString()
                                           });
                                           }
                                           types;
                             </g:evaluate>
                                                         <j:forEach items="${jvar_choices}" var="jvar_choice">
                                                                        <option value="${jvar_choice.value}">${jvar_choice.label}</option>
                                                          </j:forEach>
                             </g:ui_choice_input_field>                                                                                
                               </div>
                                             </div>
  </table>                                         
               <tr>
    <td class="left" valign="top">
      <div class="row">
                               <div class="col-md-8">
      <label for="work_notes_update">${gs.getMessage("Work Notes")}</label>
                               </div>
                             </div>
    </td>
    <td align="right">
      <textarea wrap="soft" autocomplete="off" rows="5" id="work_notes_update" data-length="4000" style="; width:67%; overflow:auto; background-color:LightGoldenRodYellow;" name="work_notes_update">${jvar_work_notes}</textarea>
                             </td>
<tr>
              <td colspan="2" style="text-align:right; padding-top:10px">
              <tr id="dialogbuttons">                
              <button class="btn btn-default" onclick="closeWindow()" style="margin-right:10px;">Cancel</button>
                                                                          <button class="btn btn-primary" onclick="update_ticket()" title="${gs.getMessage('Please ensure you review the Releases tab on your Application Validation Tasks to understand what Releases are impacting each of your applications')}">Update</button>
                             </tr>
              </td>
                             </tr>
               </tr>  
</table>
</g:ui_form>
</j:jelly>

 

1 ACCEPTED SOLUTION

Ankur Bawiskar
Tera Patron
Tera Patron

Hi,

why not use g:dialog_buttons_ok_cancel with ok and cancel button and then write the script in the client script

HTML:

<?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> 
        <g:evaluate> 
            var currentTable = RP.getWindowProperties().get('current_table') || ''; 
            var sysIdList = RP.getWindowProperties().get('sys_id_list') || ''; 
            var tableName = RP.getWindowProperties().get('table_name') || '';
        </g:evaluate>
        <input type="hidden" name="current_table" value="$[currentTable]" /> 
        <input type="hidden" name="sys_id_list" value="$[sysIdList]" />
        <j:set var="jvar_work_notes" value="${RP.getWindowProperties()['work_notes_update']}" />          
        <table width="250" style="border-spacing:20px; height:110px">
            <tr>
                <td rowspan="5" nowrap="true" width="225px" style="vertical-align:top" />
            </tr>
            <div class="row">
                <div class="col-md-8">
                    <span style="display:inline" class="mandatory required marker"></span>                         
                    <label>${gs.getMessage('Assignment Group')}:</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <g:ui_reference name="asgngroup" table="sys_user_group" show_lookup="true" show_popup="true" query="active=true" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <label>${gs.getMessage('Validation Contact')}:</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">               
                    <g:ui_reference name="asgnto" table="sys_user" show_lookup="true" show_popup="true" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <label>${gs.getMessage('Validation Contact Cell Number')}</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <g:ui_reference name="cellnum" id="cellnum" table="sys_user" show_lookup="true" show_popup="true" query="active=true^mobile_phoneISNOTEMPTY" />
                </div>
            </div>
            <table>
                <div class="row">
                    <div class="col-md-8">
                        <label for="validation_type">Validation Type</label>
                    </div>
                    <div class="col-md-9">
                        <g:ui_choice_input_field id="validation_type" name="valtype" for="validation_type" default_value="None">
                            <g:evaluate var="jvar_choices" object="true">  
                                var types = [];
                                var gr = GlideRecord('sys_choice');
                                gr.addQuery('name', 'x_namim_edrm_nos_patch_schedule_task');
                                gr.addQuery('element', 'validation_type');
                                gr.query();
                                while (gr.next()){
                                types.push({
                                'value' : gr.value.toString(),
                                'label' : gr.label.toString()
                                });
                                }
                                types;
                            </g:evaluate>
                            <j:forEach items="${jvar_choices}" var="jvar_choice">
                                <option value="${jvar_choice.value}">${jvar_choice.label}</option>
                            </j:forEach>
                        </g:ui_choice_input_field>                                                                                
                    </div>
                </div>
            </table>                                         
            <tr>
                <td class="left" valign="top">
                    <div class="row">
                        <div class="col-md-8">
                            <label for="work_notes_update">${gs.getMessage("Work Notes")}</label>
                        </div>
                    </div>
                </td>
                <td align="right">
                    <textarea wrap="soft" autocomplete="off" rows="5" id="work_notes_update" data-length="4000" style="; width:67%; overflow:auto; background-color:LightGoldenRodYellow;" name="work_notes_update">${jvar_work_notes}</textarea>
                </td>
                <tr>
                    <td colspan="2" style="text-align:right; padding-top:10px">
                        <tr id="dialogbuttons">                
                            <g:dialog_buttons_ok_cancel ok="return update_ticket();" cancel="return closeWindow();"/>
                        </tr>
                    </td>
                </tr>
            </tr>  
        </table>
    </g:ui_form>
</j:jelly>

Client Script:

function closeWindow() {
	GlideDialogWindow.get().destroy();
	return false;
}

function update_ticket(){
	alert('Please ensure you review the Releases tab on your Application Validation Tasks to understand what Releases are impacting each of your applications');
}

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

View solution in original post

2 REPLIES 2

Ankur Bawiskar
Tera Patron
Tera Patron

Hi,

why not use g:dialog_buttons_ok_cancel with ok and cancel button and then write the script in the client script

HTML:

<?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> 
        <g:evaluate> 
            var currentTable = RP.getWindowProperties().get('current_table') || ''; 
            var sysIdList = RP.getWindowProperties().get('sys_id_list') || ''; 
            var tableName = RP.getWindowProperties().get('table_name') || '';
        </g:evaluate>
        <input type="hidden" name="current_table" value="$[currentTable]" /> 
        <input type="hidden" name="sys_id_list" value="$[sysIdList]" />
        <j:set var="jvar_work_notes" value="${RP.getWindowProperties()['work_notes_update']}" />          
        <table width="250" style="border-spacing:20px; height:110px">
            <tr>
                <td rowspan="5" nowrap="true" width="225px" style="vertical-align:top" />
            </tr>
            <div class="row">
                <div class="col-md-8">
                    <span style="display:inline" class="mandatory required marker"></span>                         
                    <label>${gs.getMessage('Assignment Group')}:</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <g:ui_reference name="asgngroup" table="sys_user_group" show_lookup="true" show_popup="true" query="active=true" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <label>${gs.getMessage('Validation Contact')}:</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">               
                    <g:ui_reference name="asgnto" table="sys_user" show_lookup="true" show_popup="true" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <label>${gs.getMessage('Validation Contact Cell Number')}</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <g:ui_reference name="cellnum" id="cellnum" table="sys_user" show_lookup="true" show_popup="true" query="active=true^mobile_phoneISNOTEMPTY" />
                </div>
            </div>
            <table>
                <div class="row">
                    <div class="col-md-8">
                        <label for="validation_type">Validation Type</label>
                    </div>
                    <div class="col-md-9">
                        <g:ui_choice_input_field id="validation_type" name="valtype" for="validation_type" default_value="None">
                            <g:evaluate var="jvar_choices" object="true">  
                                var types = [];
                                var gr = GlideRecord('sys_choice');
                                gr.addQuery('name', 'x_namim_edrm_nos_patch_schedule_task');
                                gr.addQuery('element', 'validation_type');
                                gr.query();
                                while (gr.next()){
                                types.push({
                                'value' : gr.value.toString(),
                                'label' : gr.label.toString()
                                });
                                }
                                types;
                            </g:evaluate>
                            <j:forEach items="${jvar_choices}" var="jvar_choice">
                                <option value="${jvar_choice.value}">${jvar_choice.label}</option>
                            </j:forEach>
                        </g:ui_choice_input_field>                                                                                
                    </div>
                </div>
            </table>                                         
            <tr>
                <td class="left" valign="top">
                    <div class="row">
                        <div class="col-md-8">
                            <label for="work_notes_update">${gs.getMessage("Work Notes")}</label>
                        </div>
                    </div>
                </td>
                <td align="right">
                    <textarea wrap="soft" autocomplete="off" rows="5" id="work_notes_update" data-length="4000" style="; width:67%; overflow:auto; background-color:LightGoldenRodYellow;" name="work_notes_update">${jvar_work_notes}</textarea>
                </td>
                <tr>
                    <td colspan="2" style="text-align:right; padding-top:10px">
                        <tr id="dialogbuttons">                
                            <g:dialog_buttons_ok_cancel ok="return update_ticket();" cancel="return closeWindow();"/>
                        </tr>
                    </td>
                </tr>
            </tr>  
        </table>
    </g:ui_form>
</j:jelly>

Client Script:

function closeWindow() {
	GlideDialogWindow.get().destroy();
	return false;
}

function update_ticket(){
	alert('Please ensure you review the Releases tab on your Application Validation Tasks to understand what Releases are impacting each of your applications');
}

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

Nya Valdez
Kilo Guru

Thank you so much Ankur!!! That was exactly what I needed ... can't believe the solution was so simple, but I truly appreciate your help with it!!! Thank you!!!!