Help on Disabling button on ui page

[BEBOLD2]

This UI page is being opened from a UI Action, and it contains the following button, which should be disabled/hide initially:

<g:dialog_buttons_ok_cancel cancel="return cancelDialog()" ok="return submitDialog()"/>

[GlideFather]

Hi @BEBOLD2,
When you want to disable it, why don't you remove that code?

Or what's the issue?

[Ankur Bawiskar]

@BEBOLD2 

there are lot of OOTB UI page examples which disable the OK button unless some mandatory fields on UI page are populated.

Did you check those?

Another way is to use body onload function to set the ok button as disabled and then enable it based on your logic and use your own button tag and don't use <g:dialog_buttons>

share your complete business requirement and UI page.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[BEBOLD2]

@GlideFather  and @Ankur Bawiskar  Thanks for response.

I need to disable initially and enable after some calculations. No OOTB for disabling <g:dialog_buttons>

I tried this

<g:dialog_buttons_ok_cancel cancel="return cancelDialog()" ok="return submitDialog()" />

<script>

document.addEventListener("DOMContentLoaded", function () {

// Disable the OK button

var okBtn = document.getElementById("ok_button"); // default id

if (okBtn) {

okBtn.disabled = true;

okBtn.style.opacity = "0.5"; // visual indication

okBtn.style.pointerEvents = "none";

}


It disables when I do "Try it" on ui page but doesn't work when ui page rendered from UI Action

[Ankur Bawiskar]

@BEBOLD2 

seems it may not work with the OOTB dialog buttons provided by ServiceNow.

Did you use your custom button?

This UI page worked for me

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">

    <p><b>${gs.getMessage('Please fill the work notes to proceed.')}</b></p>

    <div class="form-horizontal no_next">
        <div class="form-group" id="work-notes-wrapper">
            <label class="col-sm-2 control-label" for="sc-work-notes">
                <span mandatory="true" class="required-marker"></span>
                ${gs.getMessage('Work notes')}
            </label>
            <div class="col-sm-10">
                <textarea required="true" class="form-control sc-textarea" id="sc-work-notes" type="text"></textarea>
            </div>
        </div>
    </div>

    <div id="dialog_buttons" class="clearfix pull-right no_next">
        <button type="button" class="btn btn-default" onclick="sc.close()" title="${gs.getMessage('Close the dialog')}">${gs.getMessage('Cancel')}</button>
        <button type="button" class="btn btn-primary disabled" aria-disabled="true" id="sc-button" title="${gs.getMessage('Complete the Task')}" onclick="sc.taskClosure()">${gs.getMessage('OK')}</button>
    </div>
</j:jelly>

Client Script:

addLoadEvent(function() {
    (function(global) {
        var workNotes = document.getElementById("sc-work-notes");
        var scBtn = document.getElementById("sc-button");
        var workNotesWrapper = document.getElementById("work-notes-wrapper");
       // var id = g_form.getUniqueValue();

        function workNotesOnChange() {
            if (!workNotes.value.trim()) {
                workNotesWrapper.classList.remove('is-filled');
                scBtn.classList.add('disabled');
                scBtn.setAttribute('aria-disabled', 'true');
            } else {
                workNotesWrapper.classList.add('is-filled');
                scBtn.classList.remove('disabled');
                scBtn.setAttribute('aria-disabled', 'false');
            }
        }

        function taskClosure() {
            if (!scBtn.classList.contains('disabled')) {
                var notes = workNotes.value.trim();
                alert(notes);
                /*var app = new GlideRecord(g_form.getTableName());
                if(app.get(id)){
                    app.setValue('work_notes', notes);
                    app.update();
                }
				*/
                close();
            } else {
                alert(getMessage("Please enter work notes before continuing."));
            }
        }

        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 close() {
            window.location.reload(false); // Reload page without cache
        }

        global.sc = {
            taskClosure: taskClosure,
            close: close,
            workNotesOnChange: _debounce(workNotesOnChange, 200)
        };

        // Run once on load to set correct button state initially
        workNotesOnChange();

        // Add event listeners in case browser doesn't support inline
        workNotes.addEventListener('input', global.sc.workNotesOnChange);
        workNotes.addEventListener('change', global.sc.workNotesOnChange);

    })(window);
});

Output: