UI page to review fields of Incident before closure

[Thamizharasan K]

I have a requirement to create an UI page pop up , which reviews the current value on the form fields also I have to update those values in the same UI Page

Right now I have the UI page which is populating NONE values by default, instead it should display the current field values in the form aIso have to update the field values before closure. Can anyone help me with this 

Am using on change Client script to trigger the UI Page 

Onchange client script:
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}
else if (newValue === "closed"){

var dialog = new GlideDialogWindow('sn_si_SIR_Incident_Closure');
dialog.setTitle('<b> Update the below fields before Closing the Security Incident </b>');
dialog.setSize(650,650);
dialog.setPreference('sys_id', g_form.getUniqueValue()); // Pass current object id
dialog.setPreference('sysparm_category', g_form.getValue('category'));
dialog.setPreference('sysparm_close_code', g_form.getValue('close_code'));
dialog.setPreference('sysparm_close_notes', g_form.getValue('close_notes'));
dialog.setPreference('sysparm_severity', g_form.getValue('severity'));
dialog.render(); // Open the dialog

}
}

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

<script language="javascript" src="/scripts/moment.min.js" />

<j:set var="jvar_pref" value="${sysparm_cat}"/>

<j:set var="jvar_category" value="${sysparm_category}" />

 <style>

        @media screen and (min-width: 992px){

            label {

                padding-left: 0px !important;

            }

        }

        #vi_count_warn{

            background-color: RGB(var(--now-alert--info--background-color,var(--now-color--neutral-1,181,221,229)));

            padding: .2em .6em .1em;

            margin-top: 0.6em;

            font-weight: bold;

            vertical-align: baseline;

            horizontal-align: left;

            border-radius: .25em;

            display: block;

            text-align: left;

            border: 1px solid #6ABECF;

        }

        #vi_reason_warn, #short_desc_warn, #grc_redirect_msg_new_group, #grc_redirect_msg_group_exist, #vi_state_warn {

            background-color: #B5DDE5;

            padding: .2em .6em .3em;

            margin-top: 0.6em;

            font-weight: bold;

            vertical-align: baseline;

            border-radius: .25em;

            display: block;

            border: 1px solid #6ABECF;

        }

        #close_error{

            padding-top:.45em;

            padding-right:.4em;

        }

    </style>

    <g:ui_form>

    <!-- Get the values from dialog preferences -->

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

<span style='color: red;' id="error_msg0" class="outputmsg_text"></span>

<div class="modal-body"> 

<div class="form_body form-horizontal">

<div class="row form-section form-group">

<label class="control-label col-xs-12 col-md-3">

<span style="display:inline" class="mandatory required-marker"></span>

<span class="label-text">${gs.getMessage('Close code')}</span>

</label>

<div class="col-xs-12 col-md-9">

<select id="sir_state" name="sir_state"  class="form-control" ng-non-bindable="true" required="true" style="direction:ltr; ">

<option value="">${gs.getMessage('-- Do Not Update --')}</option>

<option value="Duplicate">${gs.getMessage('Duplicate')}</option>

<option value="FalsePositive">${gs.getMessage('False positive')}</option>

<option value="Benign">${gs.getMessage('Benign')}</option>

<option value="10">${gs.getMessage('Cancel')}</option>

</select>

<div id="vi_state_warn" style="display:none"></div>

</div>

</div>

<div class="row form-section form-group">

                    <label class="control-label col-xs-12 col-md-3">

                        <span style="display:inline" class="mandatory required-marker"></span>

                        <span class="label-text">${gs.getMessage('Close notes')}</span>

                    </label>

                    <div class="col-xs-12 col-md-9">

<textarea id="closenote" class="form-control" rows="3" required="required" name="closenote" placeholder="$[gs.getMessage('close notes')]" value=""/>

<span style='color: red;' id="error_msg4" class="outputmsg_text"></span>

                   </div>

                </div>

<div class="row form-section form-group">

<label class="control-label col-xs-12 col-md-3">

<span style="display:inline" class="mandatory required-marker"></span>

<span class="label-text">${gs.getMessage('Affected Business Units (LoBs)')}</span>

</label>

<div class="col-xs-12 col-md-9">

<g:macro_invoke macro= "lightweight_glide_list2" id="lob" name="lob" control_name="myListCollector" reference="business_unit" can_write="true" required="true" />

</div>

</div>

<div class="row form-section form-group">

<label class="control-label col-xs-12 col-md-3">

                        <span style="display:inline" class="mandatory required-marker"></span>

                        <span class="label-text">${gs.getMessage('Category')}</span>

                    </label>

<div class="col-xs-12 col-md-9">

<g:evaluate> var catCode = new GlideRecord('sys_choice');

catCode.addEncodedQuery('element=category^name=sn_si_incident^inactive=false');

catCode.query(); 

  </g:evaluate>

<select name="category" class="form-control" id="category" required="true" onchange="myfunc(category.value)">

<option value = ""> --None-- </option> 

  <j:while test = "${catCode.next()}"> 

  <option value = "${catCode.value}"> ${catCode.label} </option> 

  </j:while> 

</select>

</div>

</div>

<div class="row form-section form-group">

<label class="control-label col-xs-12 col-md-3">

                        <span style="display:inline" class="mandatory required-marker"></span>

                        <span class="label-text">${gs.getMessage('Subcategory')}</span>

                    </label>

<div class="col-xs-12 col-md-9">

<select id="sub_category" name="sub_category" class="form-control"  required="true"  >

<option value = "" selected="selected"> --None-- </option> 

</select>

</div>

</div>

<div class="row form-section form-group">

<label class="control-label col-xs-12 col-md-3">

                        <span style="display:inline" class="mandatory required-marker"></span>

                        <span class="label-text">${gs.getMessage('Type')}  </span>

                    </label>

<div class="col-xs-12 col-md-9">

<g:evaluate> var catCode1 = new GlideRecord('sys_choice');

catCode1.addEncodedQuery('nameSTARTSWITHsn_si_incident^elementSTARTSWITHu_type^inactive=false');

catCode1.query(); 

  </g:evaluate>

<select name="type" class="form-control" id="type" required="true">

<option value = ""> --None-- </option> 

  <j:while test = "${catCode1.next()}"> 

  <option value = "${catCode1.value}"> ${catCode1.label} </option> 

  </j:while> 

</select>

</div>

</div>

<div class="row form-section form-group">

                    <label class="control-label col-xs-12 col-md-3">

                        <span style="display:inline"></span>

                        <span class="label-text">${gs.getMessage('     ')}</span>

                    </label>

                    <div class="col-xs-12 col-md-9">

    <div id="info_message" class="info-message"> 

                       Hint: If Close code is False positive, Duplicate or Benign,

then field Type will be updated automatically <br/><br/>

</div>

                   </div>

                </div>

<div class="row form-section form-group">

<label class="control-label col-xs-12 col-md-3">

<span style="display:inline" class="mandatory required-marker"></span>

<span class="label-text">${gs.getMessage('Severity')}</span>

</label>

<div class="col-xs-12 col-md-9">

<select id="sir_sev" name="sir_sev"  class="form-control" ng-non-bindable="true" required="true" style="direction:ltr; ">

<option value="">${gs.getMessage('-- Do Not Update --')}</option>

<option value="1">${gs.getMessage('1 - Very High')}</option>

<option value="2">${gs.getMessage('2 - High')}</option>

<option value="3">${gs.getMessage('3 - Medium')}</option>

<option value="4">${gs.getMessage('4 - Low')}</option>

</select>

<div id="vi_state_warn" style="display:none"></div>

</div>

</div>

                <div class="row form-section form-group">

                    <div class="col-md-12">

                        <div class="pull-right">

                             <g:dialog_buttons_ok_cancel ok="return validateForm()" type="submit;"  />

                        </div>

                   </div>

                </div>

            </div>

        </div>

</g:ui_form>

</j:jelly>