Queues with drawers: expand and collapse all top-level queue drawers

  • 6
  • Idea
  • Updated 9 months ago
We like queues with drawers to categorize queue items.
For top-level queues where the only on-click action is open/close drawer, here's two simple one-line snippets we're using to expand and collapse all:

expand:
skuid.$('#CategoryQueue').find('.nx-list-contents:first').children('.nx-queue-item').not('.nx-item-has-drawer').click();

collapse:
skuid.$('#CategoryQueue').find('.nx-list-contents:first').children('.nx-item-has-drawer').click();

Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 6
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Hi Matt,

Do you think its possible to get this 'expand all drawers' snippet to execute on a table (without it being attached to a queue)? The snippet I've got isn't doing much at the moment:

skuid.$('#SegmentsTable').find('.nx-list-contents:first').children('.nx-item').not('.nx-item-has-drawer').click();
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
skuid.$('#SegmentsTable').find('table:first > tbody').children('.nx-item').not('.nx-item-has-drawer').find('.fa-truck').click();

Replace the bold part (fa-truck) with the name of the icon for your drawer row action.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Of course, you can only have one action with each type of icon for this to work. You could reuse the same icon if you use conditional rendering to only show one of each icon at a time. You would need to add the :visible tag after the icon css class, like so:

skuid.$('#SegmentsTable').find('table:first > tbody').children('.nx-item').not('.nx-item-has-drawer').find('.fa-truck:visible').click();
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Thanks very much for this Matt. Interesting, it works fine in the browser console, but when I make it a page title button running the snippet called 'openDrawers' it does nothing. I've also tried it as a global action button on the table which runs the snippet.



Is it supposed to be set up as a button which runs a snippet?
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
Not sure what I did different but it's working perfectly now. I might have had a typo in the icon name I think. Thanks very much Matt. Legend :)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Glad you got it working!
Photo of Ashwat

Ashwat

  • 768 Points 500 badge 2x thumb
I needed the same functionality where im able to create new multiple accounts within a table and upon saving of these rows, I wanted a drawer to automatically open which would allow them to create child records. After a lot of researching, I stumbled upon this which was probably the easiest solution and IT WORKS!!! Thanks Matt & Greg.
Photo of Dilia Gayfutdinova

Dilia Gayfutdinova

  • 192 Points 100 badge 2x thumb
I have been looking for the solution to open all drawers on a table and struggling to get this to work. Is this the entire snippet or is there more to it? I am not very familiar with js, so some guidance would be appreciated. i currently have a table with drawers, that open manually, one by one. Looking to add another action that opens all drawers at once. thank you! 
Photo of Dilia Gayfutdinova

Dilia Gayfutdinova

  • 192 Points 100 badge 2x thumb
Hi Matt, i have another question if you dont mind. I am running into saving issues with the multiple drawers. Each drawer has a page include with a page that is editable. When I open all drawers, but work only with first drawer (editing), when i try to save the edits it doesnt work. I am guessing this is because of the fact that you can only save one record at a time. The reason for opening all drawers at once is to make a few records load at once so that you dont have to wait for each to load individually, while you are working with the previous record. Wondering if you had any suggestions how to tackle this? I thought about running a snippet to open the NEXT drawer (as opposed to all of them), on SAVE on the page include. What do you think? That would make it load at least right away after saving the current record. thank you for any input.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Dilia,

It sounds like you have a situation with multiple versions of the same page include on the same page? Generally, that's a big no-no with skuid. Perhaps drawers are an exception? If the drawers are working for you, that's great, but that could be what's causing your issue.

The plan to run a script to open the next drawer on save sounds like a reasonable one. 
Photo of Dilia Gayfutdinova

Dilia Gayfutdinova

  • 192 Points 100 badge 2x thumb
Thanks Matt! Drawers are working when you go one by one, but not when you open multiples... So i am trying to save a few seconds by maybe opening the next drawer on save. What would the script look like? (code is not my strong suit ;) I am guessing some sort of modification to open NEXT as opposed to ALL.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
If you are saving from a button within the drawer, something like this will get to to the drawer itself:

arguments[0].component.closest('.nx-item-drawer')

Perhaps that's as far as you need to go up the chain, and then grab the next sibling with .next()? I'm not looking at a table with drawers at the moment, so I'm not sure. You should be able to right click on your table and inspect it to take a look at the html. See where you need to traverse, and use jquery to get you there.
Photo of Dilia Gayfutdinova

Dilia Gayfutdinova

  • 192 Points 100 badge 2x thumb
thank you. I believe the "closest" will do since i only have one set of them on the table. Can you please help with the code though? I have this for opening all drawers now: 

skuid.$('#table_ID').find('table:first > tbody').children('.nx-item').not('.nx-item-has-drawer').find('.fa-angle-down:visible').click();

Do i replace certain portion of it? Thank you so much 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Teaching a man how to fish. Here's a video of me bumbling through jquery and the page elements to find a solution to "On Save, close current drawer and open next."





Here's the final code to copy/paste:
var params = arguments[0],
    element = params.component.element;
element.closest('tr').prev().find('.fa-truck:visible').click();
element.closest('tr').next().find('.fa-truck:visible').click();