Ui page from OnSubmit client script

[hugogomes]

Hi community,

I'm trying to create a functionality to force users to add close notes when changing the state of a sc_task to "closed".

I have created a Client script with the following code:

function onSubmit() {
     var state = g_form.getValue('state');
if (state === '3'){
var close_note = g_form.getValue("close_notes");
var short_text = g_form.getValue("short_description");
var dialog = new GlideDialogWindow("enter_close_notes");
dialog.setTitle("Please enter Close Notes");
dialog.setPreference("close_note", close_note);
dialog.setPreference("short_text", short_text);
dialog.render();
}
}

It calls an Ui page:

<?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>
   <!-- Get the values from dialog preferences -->
   <g:evaluate var="jvar_short_text"
       expression="RP.getWindowProperties().get('short_text')" />
   <g:evaluate var="jvar_close_note"
       expression="RP.getWindowProperties().get('close_note')" />
     <!-- 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 align="left">
                 <!-- Comments text field (Contains comments from originating record as a default) -->
                 <g:ui_multiline_input_field name="dialog_close_note" id="dialog_close_note" label="Close Notes"
                       value="${jvar_close_note}" mandatory="true" />
             </td>
         </tr>
         <tr>
             <td colspan="2">
             </td>
         </tr>
         <tr id="dialog_buttons">
               <td colspan="2" align="center">
                     <!-- Add OK/Cancel buttons. Clicking OK calls the validateComments script -->
                     <g:dialog_buttons_ok_cancel ok="return validateCloseNotes()" ok_type="button" cancel_type="button" />
               </td>
         </tr>
   </table>
</g:ui_form>
</j:jelly>

Client script:

function validateCloseNotes() {
var close_note = gel("dialog_close_note").value;
close_note = trim(close_note);
if (close_note === "") {
alert("Please enter your Close Notes before submitting.");
return false;
}
GlideDialogWindow.get().destroy();
g_form.setValue("close_notes", close_note);
g_form.setValue("work_notes", "Close Notes: " + close_note);
g_form.update();
return true;
}

The problem here is, after pressing "OK" nothing happens, it doesn't save the record.

I have checked other posts and it seems that some users had the same problem but I didn't figure out, from their problems, how to solve mine.

Any ideas?

Thank you in advance

[Dave Smith1]

So.. couldn't a UI Policy force the work notes field to become mandatory when the state changes to "closed"..?

(just curious to know if it could be done without scripting)

[Vrushali11]

Hello @Dave Smith1  & @hugogomes 

I have the same requirement that when the state of sc_task changes to Closed Incomplete then a popup window needs to appear with additional field mandatory and char limit to 15.

I have created the UI Page for this but just want to know what to put in the 'Processing script' section.

- When I change the state to closed incomplete, the popup window appears, but when I click on the OK button it does not post the additional comment.

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:requires name="styles/heisenberg/heisenberg_all.css" includes="true" />
	<g:evaluate object='true' jelly="true">
		
	</g:evaluate>

	<g:ui_form id="task closed">
		
		<style type="text/css">
			#close_dialog_footer input {
			width: 100%;
			}
			#info_message {
			margin-left:10px;
			color:#667
			}
			.add-comment{
			position: relative;
            left: -20px;
			}
		</style>

		<div>
			

			<div class="form-group is-required row add-comment">
				<label for="comments" class="control-label col-sm-3" style="text-align:right">
					<span class="required-marker"></span>${gs.getMessage('Additional Comments')}
				</label>
				<span class="col-sm-9">

					<textarea id="comments" class="col-sm-9 form-control" required="required" rows="3" aria-required="true" placeholder="${gs.getMessage('Additional Comments')}" name="comments"> </textarea>
				</span>
			</div>
		</div>

		<footer id="close_dialog_footer" class="modal-footer">
			<input type="hidden" id="form_id" name="form_id" value="form.${sys_id}"></input>
			<input type="hidden" id="table" name="table" value="${sysparm_table}"></input>
			<input type="hidden" id="suspension_type" name="suspension_type" value="${sysparm_suspension_type}"></input>			
			<input type="hidden" id="sysparm_sys_id" name="sysparm_sys_id" value="${sysparm_sys_id}"></input>
			<input type="hidden" id="button_clicked" name="button_clicked" value="ok"></input>
			<button id="cancel_button" class="btn btn-default" onClick="return submitCancel(); ">
				${gs.getMessage('Cancel')} 
			</button>
			<button id="ok_button" class="btn btn-primary" onClick="return submitOk();">
				${gs.getMessage('Ok')}
			</button>
		</footer>

	</g:ui_form>

</j:jelly>

Client Script:

function submitCancel(state) {
    GlideDialogWindow.get().destroy();
	
	window.top.location.reload(true);
    return false;
}

function submitOk() {
    var result = $("comments").value != '';
    if (result) {
        $('cancel_button').addClassName('disabled');
        $('ok_button').addClassName('disabled');
    }
    return result;
}


addLoadEvent(function() {
    var formId = $('form_id').value.replace('.', '\\.');
    $j('#' + formId)
        .submit(function(evt) {
            var form = $j(this);
            var url = form.attr('action');
            $j.ajax({
                type: 'POST',
                url: url,
                data: form.serialize(),
                success: function(data) {
                    GlideDialogWindow.get().fireEvent('closeCompleteSuccess');
                }
            });

            evt.preventDefault();
        });
});

Processing Script:

(function(_this) {

    var urlOnStack = gs.getSession().getUrlOnStack();
    var taskCreated = false;
    var Task;

    
    
var task = new GlideRecord('sc_task');
    task.get(sysparm_sys_id);
    task.comments = comments;
    tsk.state = 4;
    task.update();
})(this);

Your suggestions would be greatly appreciated.

Thanks! 

[hugogomes · Accepted solution]

Found a solution for this

I have changed the client script where I call the Ui Page to this:

function onSubmit() {
     var state = g_form.getValue('state');
var closenotes = g_form.getValue('close_notes');
if (state === '3' && closenotes === ''){

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


var dialog = new GlideDialogWindow("enter_close_notes");
dialog.setTitle("Please enter Close Notes");
dialog.setPreference("close_note", close_note);
dialog.setPreference("short_text", short_text);
dialog.render();

}
if (closenotes === ''){
return false;
}
}

Working fine!

Thank you for your help!