Required * in UI Macro Jelly script only visible if field filled in!

[rita_m]

Hi - 

I'm adding a new required field "Incident Commander" to the "Promote Major Incident" ui page (mim_workbench_promote).

I've got the reference field added and working fine in the html, saving the page results in the data being saved just fine, etc.

The one bug I'm having is that the required star isn't visible until after I add DATA into the reference field. (Edit: And if I blank that data, the star goes away!)

Can anyone see what I'm missing?

Note: in both the html and the script, I'm only including portions relevant to the Incident Commander field.

Thanks in advance!

HTML:

<div class="form-group" id="incident-commander-wrapper">
  <label class="col-sm-2 control-label" for="mim-promote-incident-commander">
    <span mandatory="true" class="required-marker label_description" />
    Incident Commander
  </label>
  <div class="col-sm-12 col-md-6 form-field input_controls">
    <div class="is-required">
      <g:ui_reference required="required" name="mim-promote-incident-commander" id="mim-promote-incident-commander" table="sys_user" query="roles=itil^ORuser_name=tbd" value="$[assignedUser.sys_id]" displayValue="$[assignedUser.name]" onchange="promoteModal.incidentCommanderOnChange();"/>
    </div>
  </div>
</div>

Catalog Client Script:

(function(global) {
    var incidentCommanderModified = false;

    var incidentCommander = $("mim-promote-incident-commander");
    var incidentCommanderWrapper = $('incident-commander-wrapper');
    var promoteBtn = $('mim-promote-button');

    incidentCommanderOnChange();
    itaocOnChange();

    function _debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this,
                args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }


    function incidentCommanderOnChange() {
        if (incidentCommanderModified == false) {
            incidentCommanderModified = true;
        }
        if (incidentCommanderModified == true) {
            if (!incidentCommander.value.trim()) {
                incidentCommanderWrapper.removeClassName('is-filled');
            } else {
                incidentCommanderWrapper.addClassName('is-filled');
            }
        }
        if (_checkCurrentlyRequiredFields()) {
            promoteBtn.removeClassName('disabled');
            promoteBtn.writeAttribute('aria-disabled', false);
        } else {
            promoteBtn.addClassName('disabled');
            promoteBtn.writeAttribute('aria-disabled', true);
        }
    }



    function _checkCurrentlyRequiredFields() {
        if ( /*workNotesModified==true &&*/ businessImpactModified == true && incidentCommanderModified == true && itaocModified == true) {
            return true;
        } else {
            return false;
        }

    }

    function _promoteRestCall(record) {
        var dfd = $j.Deferred();
        var api = '/api/sn_major_inc_mgmt/mim/actions/' + window.NOW.MAJOR_INCIDENT_WORKBENCH.sys_id;
        var data = {
            action: 'PROMOTE',
            record: record
        };
        $j.ajax({
            type: 'POST',
            url: api,
            data: JSON.stringify(data),
            success: function(data) {
                dfd.resolve(data);
            },
            error: function() {
                dfd.reject();
            },
            contentType: "application/json",
            dataType: 'json'
        });
        return dfd.promise();
    }

    function promote() {
        getMessage("Promoted to a major incident", function(msg) {
            var updateWorkNotes = msg + "\n" + workNotes.value.trim();
            if (!promoteBtn.hasClassName('disabled')) {
                if (window.NOW.MAJOR_INCIDENT_WORKBENCH) {
                    var record = {};
                    record.work_notes = updateWorkNotes;
                    record.business_impact = businessImpact.value;
                    record.u_incident_commander = incidentCommander.value;
                    record.u_itaoc = itaoc.value;

                    _promoteRestCall(record).then(function() {
                        dialog.setPreference('reload', true);
                        close();
                    });
                } else {
                    //When UI Page is rendered from Form UI Action
                    g_form.getControl('work_notes').value = updateWorkNotes;
                    g_form.setValue('business_impact', businessImpact.value);
                    g_form.setValue('u_incident_commander', incidentCommander.value);
                    g_form.setValue('u_itaoc', itaoc.value);

                    GlideModal.prototype.get('sn_major_inc_mgmt_mim_workbench_promote').destroy();
                    gsftSubmit(null, g_form.getFormElement(), 'sysverb_mim_accept');
                }
            }
        });
    }

    function close() {
        dialog.destroy();
    }
    global.promoteModal = {
        promote: promote,
        close: close,
        //workNotesOnChange: _debounce(workNotesOnChange, 200), // Only execute when left idle for 200 ms
        businessImpactOnChange: _debounce(businessImpactOnChange, 200), // Only execute when left idle for 200 ms
        incidentCommanderOnChange: _debounce(incidentCommanderOnChange, 200), // Only execute when left idle for 200 ms
        itaocOnChange: _debounce(itaocOnChange, 200) // Only execute when left idle for 200 ms

    };
})(window);

[Brad Bowman]

You are welcome!