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

Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
edited February 8, 2018 in Ideas
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();
imageimage

6
6 votes

Awaiting Review Β· Last Updated

Comments

  • edited December 4, 2017
    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();
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited February 10, 2017
    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.
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited December 7, 2016
    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();
  • edited December 4, 2017
    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.

    image

    Is it supposed to be set up as a button which runs a snippet?
  • edited December 4, 2017
    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 :)
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited February 8, 2018
    Glad you got it working!
  • edited February 10, 2017
    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!Β 
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited December 7, 2016
    This is the entire snippet:

    skuid.$('#MY_TABLE_ID').find('table:first > tbody').children('.nx-item').not('.nx-item-has-drawer').find('.my-icon:visible').click();

    Replace MY_TABLE_ID with the unique id of your table.
    Replace my-icon with the icon for your drawer row action.
  • edited June 17, 2016
    Hi Matt. Tried creating one for close all, and used this, but it didnt do anything, wonder if you have any input?

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

    Thank you!Β 

  • edited June 17, 2016
    thank you by the way, the first one worked like a charm! :)
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited December 7, 2016
    Try this to close:

    skuid.$('#TABLEID').find('table:first > tbody').children('.nx-item-has-drawer').find('.fa-ellipsis-v:visible').click();
  • edited June 17, 2016
    you the best! worked!!! thank you thank you.
  • edited June 24, 2016
    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.
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited December 7, 2016
    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.Β 
  • edited June 24, 2016
    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.
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited December 7, 2016
    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.

  • edited June 24, 2016
    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Β 
  • Matt SonesMatt Sones πŸ’ŽπŸ’ŽπŸ’Ž
    edited February 10, 2017
    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();
  • edited February 8, 2018
    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.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!