Drawer open/close in v2

Questions
1

Quick question for those more familiar with features in v2. I am attempting to leverage the drawer feature on tables. Is there still not a way to make it a “only one drawer open at a time” setup natively? Maybe I am totally missing something or this is a new feature in Boston, of which I have not gotten to just yet :slight_smile: (I am still on Boston)

Now for some feedback: I certainly see the benefit of allowing it to be open for multiple rows, but you reach a scalability/performance issue when you are dealing with a lot rows and data (at least the way I am trying to use it). From a performance and efficiency stand-point, I prefer to open one drawer at a time and call the respective child records of that row at the time the user needs it. I envision a world where this feature is dynamic: if you want it to be able to open for multiple, check this setting. If you want it only open for one at a time, click this setting. Everyone wins.

Also, I am aware of some javascript on posts that help address this issue. I have tried to apply it for v2, but I am not having any luck. Full disclosure, I am mediocre at best with javascript, so that might be the reason why .

Thanks for listening.

2

Hello,

Sorry, I’m unable to help you, but I would really appreciate it if you could share the posts that you’ve come across that address this issue, as I’ve not even been able to find that.

Best,

Lukas

3

Luka, are you referring to the fix in v1?

4

Sorry, v2.

5

Sorry Luka, I should have been more clear in my post. The javascript posts address the challenge in V1, and I was trying to convert it to work in v2. I have not found a post that specifically discusses v2.

6
  • Hi, I ended up investigating this more.

    To toggle a drawer on a table using JS:

rowId = mode.getFirstRow().Id 
skuid.$C(<TableId>).cpi.toggleDrawer(rowId)
  • I haven't found a way to check if the drawer is open or not.

    Close all Drawers:

skuid.$('#<TableId> tbody tr [aria-label="close drawer"]').each((i, ele) =>{
       skuid.$(ele)[0].click()
});

it uses JQuery to iterate over rows on the table and if they are opened then they will be closed.
or you can use inbuilt table function
skuid.$C()._cpi.closeAllDrawers()

  • Open all drawers :

skuid.$('#<TableId> tbody tr [aria-label="open drawer"]').each((i, ele) =>{
        skuid.$(ele)[0].click()
    });

it uses JQuery to iterate over rows on the table and if they are closed then they will be opened.

There is no inbuilt function to open all drawers, like for close.

Now, you can add JS Snippet with code for ‘Close all drawers’ to Before load actions. So JQuery will close all drawers, and then Skuid will open the one user selected.

Note, JQuery works and should keep working, but if Skuid changes something then it could break.

Best,

Lukas

7

Luis, love the simplicity of your solution just to click.

//To find all drawers that are open:
const opendrawers = document.querySelectorAll(“div[aria-expanded=‘true’]”);

//And close them:
for (let i = 0; i < opendrawers.length; i++) {
opendrawers[i].ariaExpanded = false;
opendrawers[i].click();
};

8

In Edinburgh update 2 we released some new component actions to open and close Drawers and Accordion sections. So in your “open drawer row action” you could add a preliminary action that closed all the drawers - and then opnened the specific one you were targeting. This should make the JS above unecessary.

Upgrade your Skuid for all the new goodness…

1 Like
9

This topic was automatically closed after 12 days. New replies are no longer allowed.