Need help on JavaScript to clear sluchbucket values.

[Jessica28]

Hello,

The purpose of this slush bucket is to add additional approvers. It checks the selected value against the approval table. If the approver you are trying to add is already in the list of approvers, I would like to remove or clear them from the selected values.

Here is the function I wrote, but it is not functioning correctly. Any suggestions would be appreciated.

function clearSelectedValues() {
    var rightSelect = slush.getRightSelect(); // Get the right slush bucket select element
    var selectedValues = slush.getValues(rightSelect); // Get the selected values from the right slush bucket

    // Loop through the selected values and remove them
    selectedValues.forEach(function(value) {
        slush.removeValue(rightSelect, value); // Remove each selected value
    });
}

[Kris Moncada]

Can you post the entire client script of the UI page? That would be more helpful.

I personally would approach it where by the GlideAjax call that populates the left side, only returns Users that are not already added as approvers. In this way, you don't have to worry about clearing the values on the right, because the list of Users on the left, have not been added.

Another option would be that you could modify GlideAjax call to return a JSON object, so that you could populate the left with available approvers, and the right current approvers. This would be valuable, because if there are already approvers associated, and you reopen the slush bucket, it would already populate the right slush bucket.

Hope all that made sense. But for more detailed help, you'll need to supply the client script and the GlideAjax script include you are using to populate the slushbucket.

[Jessica28]

Thank you for helping @Kris Moncada ,

Here is the link I followed to create the popup slush bucket. 

https://servicenowguru.com/system-ui/creating-custom-slushbucket-popup-dialog/

I like your ideal on only returns users that are not already added as approvers, but I don't know how to modify the code to make it works.  The more I made changes to it, the more the code got screwed up.

[Kris Moncada]

Perfect. When I get free moment, i'll rework snguru's solution to illustrate what I am talking about.  

[Kris Moncada · Accepted solution]

UPDATED: To prevent duplicates, when reopening slush bucket and clicking ok.

To anyone following along, you'll need to set a dialog size if to implement SNGurus solution on latest version instances.

function addApprovalGroups(){
   //Open a dialog window to select Approval Groups
   var dialog = new GlideDialogWindow('add_approval_groups');
   dialog.setTitle('Add Approval Groups');
   dialog.setPreference('sysparm_groupQuery', 'active=true');
   dialog.setSize(600,900);
   dialog.render();
   //Make sure to not submit the form when button gets clicked
   return false;
}

On the client script for the ui_page, I am now passing in a reference to the task, when doing the GlideAjax call "getGroups". Then on the loadResponse handler, we insert the groups accordingly.

//Called when the 'OK' button gets clicked
function continueOK() {
    //Get the selected values from the right slushbucket
    var values = slush.getValues(slush.getRightSelect());
    //Get the sys_id of the current record
    var taskID = g_form.getUniqueValue();
    //Make sure we have at least one selection
    if (values == '') {
        alert("At least one group must be selected");
        return;
    }

    //Add the group approval records
    var ajax = new GlideAjax('GroupSelectAjax');
    ajax.addParam('sysparm_name', 'groupsAdd');
    ajax.addParam('sysparm_taskID', taskID);
    ajax.addParam('sysparm_values', values);
    ajax.getXML(addGroupResponse);
}

//Called when we get a response from the 'continueOK' function
function addGroupResponse() {
    GlideDialogWindow.get().destroy();
    GlideList2.get('').setFilterAndRefresh('');
    return false;
}

//Called when the 'Cancel' button gets clicked
function continueCancel() {
    //Close the dialog window
    GlideDialogWindow.get().destroy();
    return false;
}

//Called when the form loads
addLoadEvent(function() {
    //Load the groups when the form loads
    slush.clear();
    var taskID = g_form.getUniqueValue();
    var ajax = new GlideAjax('GroupSelectAjax');
    ajax.addParam('sysparm_name', 'getGroups');
    ajax.addParam('sysparm_taskID', taskID);
    ajax.getXML(loadResponse);
    return false;
});

//Called when we get a response from the 'addLoadEvent' function
function loadResponse(response) {
    //Process the return XML document and add groups to the left select
    var xml = response.responseXML;
    var e = xml.documentElement;

    var items = xml.getElementsByTagName("item");
    if (items.length == 0)
        return;

    //Loop through item elements and add each item to left slushbucket
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (item.getAttribute('active'))
            slush.addRightChoice(item.getAttribute('value'), item.getAttribute('text'));
        else
            slush.addLeftChoice(item.getAttribute('value'), item.getAttribute('text'));

    }
}

Then lastly, the "Script Include", notice how the getGroups function first retrieves the current list of approval groups, then adds a designation I made up, called "active" to drive where the group will be inserted; left or right.

var GroupSelectAjax = Class.create();

GroupSelectAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    //Get and return a list of groups (name and sys_id)
    getGroups: function() {
        var taskID = this.getParameter('sysparm_taskID');

        var sysapproval_group = new GlideRecord('sysapproval_group');
        //parent=dfed669047801200e0ef563dbb9a712b^assignment_group=477a05d153013010b846ddeeff7b1225^parent=dfed669047801200e0ef563dbb9a712b
        sysapproval_group.addQuery('parent', taskID);
        sysapproval_group.query();

        var current_approval_group_list = [];
        while (sysapproval_group.next()) {

            current_approval_group_list.push(sysapproval_group.getValue('assignment_group'));
        }


        var gr = new GlideRecord("sys_user_group");
        gr.orderBy('name');
        gr.addQuery('active', true);
        gr.query();



        //Add the available groups to select from
        while (gr.next()) {
            var item = this.newItem();
            item.setAttribute('value', gr.getValue('sys_id'));
            item.setAttribute('text', gr.getValue('name'));

            if (current_approval_group_list.indexOf(gr.getUniqueValue()) != -1) {
                //since this group has already been added. We include it on the right.
                item.setAttribute('active', true);
            }
        }
    },

    //Take a taskID and group sys_id values and add 'sysapproval_group' records
    groupsAdd: function() {
        var taskID = this.getParameter('sysparm_taskID');
        var values = this.getParameter('sysparm_values').split(',');
        //Iterate through the group sys_id values
        for (x in values) {
            var rec = new GlideRecord('sysapproval_group');
            rec.addQuery('parent', taskID);
            rec.addQuery('assignment_group', values[x]);
            rec.query();

            if (rec.hasNext() == false) {
                rec.initialize();
                rec.parent = taskID;
                rec.assignment_group = values[x];
                rec.approval = 'requested';
                rec.insert();
            }

        }
    }
});