Disable Queue Item Actions in Javascript

  • 1
  • Question
  • Updated 3 years ago
I have a queue where I want to show a list of items and when you click on an item in the queue it Runs Multiple Actions. This works fine.

I now want to change the CSS and disable some items in the queue based on some complex criteria about what is selected in another model.

I think I have a way to change the CSS but I am having trouble making the queue item not clickable, or having the click do nothing (or do something else like show an alert).

Here is my Item Renderer Snippet code so far:

var selectedMtgModel = skuid.model.getModel('SelectedMeeting'); 
var classname = 'not-available';


if (selectedMtgModel.data.length > 0){
var mtgRow = selectedMtgModel.getFirstRow();
//More conditional logic to go here...
classname = 'available';
}


var args = arguments[0],
item = args.item,
list = args.list,
model = args.model,
element = args.element,
row = item.row,
renderTemplate = '<div class="attendee-queue-item ' + classname + '">{{Attendee__r.Name}} ({{Number_of_Meetings__c}}) - {{{Attendee__r.Congressional_District_Account__r.Name}}}</div>',
mergeSettings = {
createFields: true,
registerFields: true
};

if (classname=='available'){
element.html(
skuid.utils.merge('row',renderTemplate,mergeSettings,model,row)
);

} else {
element.html(
skuid.utils.merge('row',renderTemplate,mergeSettings,model,row)
).click (function() {
alert ("This person is not available for this meeting");
});

Any ideas for how to disable the clickability or the actions for a queue item?

Thanks
Photo of Tony Sirna

Tony Sirna

  • 976 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Tony - it was great to talk to you at Dreamforce.  Sorry we didn't get back to you sooner. 

Ben told me that you had asked him this same question.  He suggested returning false in your snippet which should inactivate the queue item.  But we are going to test this a little more thoroughly to make sure this is correct.  We'll post more conclusive evidence next week. 

Cheers. 
Photo of Tony Sirna

Tony Sirna

  • 976 Points 500 badge 2x thumb
Hi Rob,

Based on your and Ben's advice at Dreamforce I was able to implement this. Here's how.

1. In my Model used for the Queue I created a UI Only Field called Clickable.

2. In the renderer snippet for that field I used various logic to determine what was clickable and assigned row.Clickable  either false or true.

3. In the Queue's Action list I made the first item Run A Snippet called DisableQueueAction.

4. In DisableQueueAction I included this line:   

 return params.row.Clickable;

So it will return false when a row is not clickable.

This seems to work correctly with the only minor issue that it still shows a ... icon for a brief time when you click. This is adequate for my purposes.

Suggestions welcome if there is a better way to do this.

Thanks for the advice.

Tony
Photo of James Bujold

James Bujold

  • 112 Points 100 badge 2x thumb
Tony,
I am trying to replicate this solution.  I simply want to disable all clickability on all queue items.  for a particular queue.  I would appreciate any insight into how this could be achieved.  The Ui only field and queue action snippet make sense to me but im a bit lost on the code for the render snippet.  Cheers.  James
Photo of Tony Sirna

Tony Sirna

  • 976 Points 500 badge 2x thumb
Hi James,

This might help you. It's a little messy but hopefully you can get the gist.

var $ = skuid.$;
var classname = 'available';
    var args = arguments[0],
        item = args.item,
        list = args.list,
        model = args.model,
        element = args.element,
        row = item.row;
if (selectedMtgModel.data.length > 0){
   
    classname = 'Available';
    row.Clickable = true;
   
    if ( test-condition) {
        classname = 'Not-Available';
        row.Clickable = false;
    }
   
    }
  
   
}
        
    var renderTemplate = '<div class="attendee-queue-item ' + classname +
    '">{{Attendee__r.Name}} - {{{Attendee__r.Congressional_District_Account__r.Name}}} ({{Number_of_Meetings__c}}) - '+
    classname +'</div>',
        mergeSettings = {
            createFields: true,
            registerFields: true
        };
   
 element.html(
        skuid.utils.merge('row',renderTemplate,mergeSettings,model,row)
    );



}
   
   
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks for documenting this fix.  We'll look at it and see if we see possible improvement