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!!!!