OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Why do the (Ok & Cancel) buttons not appear on my ServiceNow UI Action GlideModal popup?

  • Thread starter Thread starter Mohamed Mahmoud
  • Start date Start date
M

Mohamed Mahmoud

Guest
I’m new to JavaScript and programming, but I want to create a ServiceNow UI Action for a function called ‘Request Info.’ The popup shows up correctly, but the Ok & Cancel buttons are missing. Can anyone help me with this issue?

The code I am using:

Code:
function checkawaitingtype() {
    if (typeof window === 'undefined') {
        updateticket();
    } else {
        var myModal = new GlideModal('awaiting_info_modal', false);
        myModal.setTitle('Provide Awaiting Info Details');
        // Fetch options for the dropdown from the u_awaiting_info_reason field
        var awaitingReasonOptions = getAwaitingReasonOptions(); // Implement this function
        var modalBody = '<div>' +
            '<label for="awaiting_reason">Awaiting Info Reason</label>' +
            '<select id="awaiting_reason" style="width: 100%;">' +
            '<option value="">Select Awaiting Info Reason</option>';
        // Populate dropdown options dynamically
        awaitingReasonOptions.forEach(function (option) {
            modalBody += '<option value="' + option.value + '">' + option.label + '</option>';
        });
        modalBody += '</select>' +
            '<label for="comments" style="margin-top: 10px;">Additional Comments</label>' +
            '<textarea id="comments" rows="4" style="width: 100%;"></textarea>' +
            '</div>';
        myModal.setBody(modalBody, false, false);
        
        myModal.addDecoration({
            text: 'OK',
            color: 'primary',
            id: 'ok_button'
        });
        myModal.addDecoration({
            text: 'Cancel',
            color: 'secondary',
            id: 'cancel_button'
        });
        var okFunction = function () {
            var awaiting_reason = document.getElementById('awaiting_reason').value;
            var comments = document.getElementById('comments').value;
            if (awaiting_reason === '') {
                alert('Please select an awaiting info reason');
            } else if (comments === '') {
                alert('Please specify details in comments');
            } else {
                // Populate the Awaiting Info Reason field
                g_form.setValue('u_awaiting_info_reason', awaiting_reason);
                g_form.setValue('comments', comments);
                g_form.setDisplay('u_awaiting_info_reason', true);
                g_form.setMandatory('u_awaiting_info_reason', true);
                g_form.setMandatory('comments', true);
                gsftSubmit(null, g_form.getFormElement(), 'requestMoreInformation');
                myModal.destroy();
            }
        };
        var cancelFunction = function () {
            myModal.destroy();
        };
        document.getElementById('ok_button').onclick = okFunction;
        document.getElementById('cancel_button').onclick = cancelFunction;
        myModal.render();
    }
}
function updateticket() {
    new global.StateFlow().processFlow(current, '9a028a63c3123100d6d210c422d3ae11', 'manual');
    action.setRedirectURL(current);
}
// Implement this function to fetch options from the u_awaiting_info_reason field
function getAwaitingReasonOptions() {
    // Replace with your logic to retrieve options (e.g., from a REST API or predefined list)
    return [
        { value: '1', label: 'Awaiting Contact' },
        { value: '2', label: 'Awaiting Change' },
        { value: '3', label: 'Awaiting Problem' },
        { value: '4', label: 'Awaiting Vendor' }
        // Add more options as needed
    ];
}

I got some help from ChatGPT to improve the code but it did not resolve the issue.

How the pop up look like without the buttonscription here

Error 1 from the browser developer mode (F12)

Error 2 from the browser developer mode (F12)here

For Reproducible Example, I am not expert so I do not know if it can be tested in any Javascript environment or not, but I know if you have a ServiceNow instance (A dev one should be sufficient), you can go and create a new UI action and use the above code then you will get the pop-up without the buttons.

<p>I’m new to JavaScript and programming, but I want to create a ServiceNow UI Action for a function called ‘Request Info.’ The popup shows up correctly, but the Ok & Cancel buttons are missing. Can anyone help me with this issue?</p>
<p>The code I am using:</p>
<pre><code>function checkawaitingtype() {
if (typeof window === 'undefined') {
updateticket();
} else {
var myModal = new GlideModal('awaiting_info_modal', false);
myModal.setTitle('Provide Awaiting Info Details');
// Fetch options for the dropdown from the u_awaiting_info_reason field
var awaitingReasonOptions = getAwaitingReasonOptions(); // Implement this function
var modalBody = '<div>' +
'<label for="awaiting_reason">Awaiting Info Reason</label>' +
'<select id="awaiting_reason" style="width: 100%;">' +
'<option value="">Select Awaiting Info Reason</option>';
// Populate dropdown options dynamically
awaitingReasonOptions.forEach(function (option) {
modalBody += '<option value="' + option.value + '">' + option.label + '</option>';
});
modalBody += '</select>' +
'<label for="comments" style="margin-top: 10px;">Additional Comments</label>' +
'<textarea id="comments" rows="4" style="width: 100%;"></textarea>' +
'</div>';
myModal.setBody(modalBody, false, false);

myModal.addDecoration({
text: 'OK',
color: 'primary',
id: 'ok_button'
});
myModal.addDecoration({
text: 'Cancel',
color: 'secondary',
id: 'cancel_button'
});
var okFunction = function () {
var awaiting_reason = document.getElementById('awaiting_reason').value;
var comments = document.getElementById('comments').value;
if (awaiting_reason === '') {
alert('Please select an awaiting info reason');
} else if (comments === '') {
alert('Please specify details in comments');
} else {
// Populate the Awaiting Info Reason field
g_form.setValue('u_awaiting_info_reason', awaiting_reason);
g_form.setValue('comments', comments);
g_form.setDisplay('u_awaiting_info_reason', true);
g_form.setMandatory('u_awaiting_info_reason', true);
g_form.setMandatory('comments', true);
gsftSubmit(null, g_form.getFormElement(), 'requestMoreInformation');
myModal.destroy();
}
};
var cancelFunction = function () {
myModal.destroy();
};
document.getElementById('ok_button').onclick = okFunction;
document.getElementById('cancel_button').onclick = cancelFunction;
myModal.render();
}
}
function updateticket() {
new global.StateFlow().processFlow(current, '9a028a63c3123100d6d210c422d3ae11', 'manual');
action.setRedirectURL(current);
}
// Implement this function to fetch options from the u_awaiting_info_reason field
function getAwaitingReasonOptions() {
// Replace with your logic to retrieve options (e.g., from a REST API or predefined list)
return [
{ value: '1', label: 'Awaiting Contact' },
{ value: '2', label: 'Awaiting Change' },
{ value: '3', label: 'Awaiting Problem' },
{ value: '4', label: 'Awaiting Vendor' }
// Add more options as needed
];
}

</code></pre>
<p>I got some help from ChatGPT to improve the code but it did not resolve the issue.</p>
<p><a href="https://i.sstatic.net/DMStx4EZ.png" rel="nofollow noreferrer">How the pop up look like without the buttonscription here</a></p>
<p><a href="https://i.sstatic.net/iVaSea2j.png" rel="nofollow noreferrer">Error 1 from the browser developer mode (F12)</a></p>
<p><a href="https://i.sstatic.net/Z4Qt4kHm.png" rel="nofollow noreferrer">Error 2 from the browser developer mode (F12)here</a></p>
<p>For Reproducible Example, I am not expert so I do not know if it can be tested in any Javascript environment or not, but I know if you have a ServiceNow instance (A dev one should be sufficient), you can go and create a new UI action and use the above code then you will get the pop-up without the buttons.</p>
 

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top