ServiceNow Portal Widget - Read/Update Checkbox from Table

[DavidTillett]

Hi, I am very new to anything widget related and not good with scripting, so I am relying heavily on trying to borrow from other functions I can find and learn from.

I have been trying to get a widget I can add to the User Profile page to read a custom boolean (in this case u_auto_add_to_watch_list) from the sys_users table. The value itself is used in some business rules to opt some people into certain types of watch lists - the value itself works fine and users can update it in the self-service view.

My issue is I cannot seem to get the value to expose itself and be updated on a Portal page. The checkbox always shows unchecked and will not update to the value or update the value on the table - though you can of course check/uncheck it, it does nothing.

Here are the three scripts I have:

HTML:

<div id="auto_add_to_watch_list_widget">
    <label for="auto_add_to_watch_list">Auto Add to Watch List:</label>
    <input type="checkbox" id="auto_add_to_watch_list" />
</div>

Client Script:

var watchListWidget = Class.create();
watchListWidget.prototype = {
    initialize: function() {
        var self = this;
        var checkbox = $('auto_add_to_watch_list');

        // Get initial value from server script
        var ajax = new GlideAjax('watchListWidget');
        ajax.addParam('sysparm_name', 'getWatchListValue');
        ajax.getXML(function(response) {
            var answer = response.responseXML.documentElement.getAttribute('answer');
            gs.log('Received value from server: ' + answer);
            checkbox.checked = (answer === 'true');
            gs.log('Checkbox state set to: ' + checkbox.checked);
        });

        // Event handler for checkbox change
        checkbox.onchange = function() {
            var newValue = checkbox.checked;
            var ajax = new GlideAjax('watchListWidget');
            ajax.addParam('sysparm_name', 'setWatchListValue');
            ajax.addParam('value', newValue);
            ajax.getXML(function(response) {
                // Handle response if needed
            });
        };
    }
};

var watchListWidgetObj = new watchListWidget();

Server Script:

var watchListWidget = Class.create();
watchListWidget.prototype = {
    getWatchListValue: function() {
        var gr = new GlideRecord('sys_user');
        gr.addQuery('sys_id', gs.getUserID());
        gr.query();
        if (gr.next()) {
            return gr.u_auto_add_to_watch_list; // Return boolean directly
        }
        return false;
    },
    setWatchListValue: function(value) {
        var gr = new GlideRecord('sys_user');
        gr.addQuery('sys_id', gs.getUserID());
        gr.query();
        if (gr.next()) {
            gr.u_auto_add_to_watch_list = value;
            gr.update();
        }
    }
};

var watchListWidgetObject = new watchListWidget();

In truth, I am well out of my depth on scripting. Any help would be appreciated.

[Steven Young]

in your client script  try:
var checkbox = document.getElementById('auto_add_to_watch_list').checked