Author: Sam Lindsay

As you'll see, the code is simple and yet effective, and could be repurposed for a number of other similar applications. Our custom widget acts as a wrapper around the OOB widget (which in this case is sc-category)

Widget HTML Code

<div>
   <sp-widget widget="data.remoteControlWidget"></sp-widget>
</div>

Widget Server Code

(function() {
        data.remoteControlWidget = $sp.getWidget("sc-category");
})();

Widget Client Controller Code

function($scope) {        

        var c = this;
        //We can get the angular data object of BOTH widgets
        var thisWidgetsData     = $scope.data;
        var theOtherWidgetsData = $scope.widget.data.remoteControlWidget.data;

        //Look at the remote scope.data object for sc category to see if have the item we want to hide/remove?
        theOtherWidgetsData.items.forEach(function(item, location){

               //Is our "Get Help" widget on the page?
               if(item.sys_id=='ea8accaedb0508103ea3cd051496198b'){

                       //Angular's injector invoke will allow us to change the scope within a digest
                       window.angular.element(document.body).injector().invoke(function($compile) {

                               //Now we can modify the other widgets scope and angular will do the rest
                               theOtherWidgetsData.items.splice(location,1);
                       });
               }
        })      
}

In essence, all we're doing is remotely accessing the OOB widget's angular scope and then using angular's injector to update that scope.

Although this might seem overly complex, we can look at the scope of any angular widget by holding down the Control key and right-clicking above the widget. Once we've identified what needs to change (in this case, removing an entry from an array), the rest is quite simple.

UI Actions run code on both the client and the server, which is very handy.

The key to getting flexibility with glide modal dialogs is the renderWithContent function which allows us to craft our own HTML form and the window.whatever which allows us to intercept and interpret whatever happened on our modal window as the user interacted with the various options we gave them.

Consider the following code:

////////////////////////////////////////////////////////////////
//Client Side: Dialog box with choices
////////////////////////////////////////////////////////////////
function cancelDialog(){

   var gm = new GlideModal('cancelTask');
   //Sets the dialog title
   gm.setTitle('Cancel Task');
   //Set up valid custom HTML to be displayed
   gm.renderWithContent('<div style="padding:15px"><p>What action do you want to take?</p><p><select name="cancellation" id="taskCancellation" class="form-control"><option value="cancelOnly" role="option">Cancel this task but keep the requested item open</option><option value="cancelAll" role="option">Cancel this and all other tasks, closing the requested item</option></select></p><div style="padding:5px;float:right"><button style="padding:5px;margin-right:10px" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())" class="btn btn-default">Abort</button><button style="padding:5px" class="btn btn-primary" onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">Cancel Task</button></div></div>');

   //We'll use the windows object to ensure our code is accessible from the modal dialog
   window.changeTaskAction = function(thisButton, thisAction){

      //Close the glide modal dialog window
      gm.destroy();

      //Submit to the back-end
      if(thisButton=='Cancel Task'){
         if(thisAction=="cancelAll"){
            g_form.setValue('state',4);//Closed Incomplete -- will close the Requested Item and all other open tasks
         }else{
            g_form.setValue('state',7);//Closed Skipped -- will only close this task
         }
         //Regular ServiceNow form submission
         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
      }
   };
   return false;//prevents the form from submitting when the dialog first load
}

////////////////////////////////////////////////////////////////
//Server Side: Dialog box with choices
////////////////////////////////////////////////////////////////
if (typeof window == 'undefined')
   updateTask();

function updateTask(){
   //Runs on the server
      if(current.state==7){
      //closed skipped so simply update this one record
      current.update();
   }else{
      //closed incomplete so update all associated records to close the requested item entirely
      current.update();

      //And now we'll cancel any other open tasks along with the requested item
      if(!gs.nil(current.parent)){
         //Close siblings
         var otherTasks = new GlideRecord('sc_task');
         otherTasks.addEncodedQuery('request_item='+current.request_item+'^stateIN-5,1,2');
         otherTasks.query();
         while(otherTasks.next()){
            otherTasks.state = '4';
            otherTasks.update();
         }
         //Close parent
         var ritm = new GlideRecord('sc_req_item');
         if(ritm.get(current.parent)){
            ritm.state = '4';
            ritm.stage = 'Cancelled';
            ritm.update();
         }
      }
   }
}