# Accordion Load Times **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [November 7, 2023, 5:29pm UTC](https://forum.inductiveautomation.com/t/accordion-load-times/81610 "2023-11-07T17:29:08Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![Eliazar\_Sanchez](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eliazar_sanchez/32/34393_2.png) [@Eliazar\_Sanchez](https://forum.inductiveautomation.com/u/Eliazar_Sanchez)\ **Post date:** [November 7, 2023, 5:29pm UTC](https://forum.inductiveautomation.com/t/accordion-load-times/81610/1 "2023-11-07T17:29:09Z")
Hello, I have a accordian that has anywhere from 300 - 400 items. Each with a header view and a body view so of course this means that there are that many views generated when on startup. I dont know if the body views are loaded then and there or when the subview is toggled. But still the load time is extreme and the view itself laggy. My question is: is there a way on an accordian or table, to load the view on the toggle event? instead of preloading all the views? im trying to improve performance without having to split the items list and only display 50 at a time ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [November 7, 2023, 6:20pm UTC](https://forum.inductiveautomation.com/t/accordion-load-times/81610/2 "2023-11-07T18:20:02Z")
The first thing to check is how you populate that accordion. What's the datasource, what scripts do you have there, etc. When I first started using ignition, I had to make an accordion, and its performances were terrible because I was doing a lot of things that really shouldn't be done in an accordion. When that was fixed, everything was much smoother. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [November 7, 2023, 6:25pm UTC](https://forum.inductiveautomation.com/t/accordion-load-times/81610/3 "2023-11-07T18:25:59Z")
One way would be to bind the `props.items.x.body.viewPath` to `props.items.x.expanded`. If it's expanded then set the viewPath property and if it's not expanded then make it `null`. You could do this using an expression binding on each viewPath. An efficient way to do this might be to create a custom property on the the accordian component in the vein of, ```auto items : 0: header : Heading 0 viewPath : /view0 param1 : abcd1 1: header : Heading 1 viewPath : /view0 param1 : abcd2 ... etc. ``` Then put a script binding on the items property to generate the items structure complete with the `enabled` binding. ---
**Author:** ![Eliazar\_Sanchez](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eliazar_sanchez/32/34393_2.png) [@Eliazar\_Sanchez](https://forum.inductiveautomation.com/u/Eliazar_Sanchez)\ **Post date:** [November 7, 2023, 7:48pm UTC](https://forum.inductiveautomation.com/t/accordion-load-times/81610/4 "2023-11-07T19:48:24Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd0608f13a135600e6c5d559253df1dfcead898b.png) On a onStartUp script, i grab a pre-processed ds, that i then have to manipulate again to form the final ds i want. The script itself runs fast but the loading of the views is what is slow. At the bottom youll notice i only assigned 50 items from the total array in order to improve performance significantly ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [November 7, 2023, 8:09pm UTC](https://forum.inductiveautomation.com/t/accordion-load-times/81610/5 "2023-11-07T20:09:06Z")
Please post code, not pictures of code. > [@Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831): > > This thread is intended as a short help file for all those struggling to post formatted code on the forum. Posting formatted code on the forum (and most others) is as simple as selecting the code and pressing the \ button. It works the same as applying Bold or Italic styles to your document. It preserves indentation and applies syntax highlighting. [How to post code] ---
**Author:** ![Eliazar\_Sanchez](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eliazar_sanchez/32/34393_2.png) [@Eliazar\_Sanchez](https://forum.inductiveautomation.com/u/Eliazar_Sanchez)\ **Post date:** [November 7, 2023, 8:31pm UTC](https://forum.inductiveautomation.com/t/accordion-load-times/81610/6 "2023-11-07T20:31:28Z")
```auto value = system.tag.read("[default]Pre-Processed Datasets/rostersAndUsersDS").value accordianList = [] headers = ['UserID', 'Username', 'Fullname', 'Email', 'Phone', 'SMS', 'Schedule', 'RemoveUser'] for row in range(value.getRowCount()): userData = [] rosterData = [] rosterUsersDS = system.util.jsonDecode(value.getValueAt(row,'rosterUsers')) for user in rosterUsersDS: userData.append([user['userID'], user['username'], user['fullName'], user['email'], user['phone'], user['sms'], user['schedule'], 'X']) finalUserDS = system.dataset.toDataSet(headers, userData) rosterData.append(value.getValueAt(row, 'rosterID')) rosterData.append(value.getValueAt(row, 'roster')) rosterData.append(value.getValueAt(row, 'Type')) rosterData.append(value.getValueAt(row, 'Region')) rosterData.append(value.getValueAt(row, 'Yard')) accordianList.append({ "expanded": False, "header": { "toggle": { "enabled": True, "expandedIcon": { "path": "material/expand_less", "color": "", "style": { "classes": "" } }, "collapsedIcon": { "path": "material/expand_more", "color": "", "style": { "classes": "" } } }, "content": { "type": "view", "text": "", "useDefaultViewWidth": False, "useDefaultViewHeight": False, "viewPath": "MainScreens/User_Roster Management/Carousel_Views/accordianHeader", "viewParams": {"rosterDetails": rosterData}, "style": { "classes": "" } }, "height": "40px", "reverse": False, "style": { "classes": "" } }, "body": { "viewPath": "MainScreens/User_Roster Management/rosterMembers", "viewParams": {"rosterMembers": finalUserDS, "rosterID": value.getValueAt(row, 'rosterID')}, "useDefaultViewWidth": False, "useDefaultViewHeight": False, "height": "auto", "style": { "classes": "", "margin": "16px" } } }) self.custom.accordianData = accordianList self.custom.dataLength = len(accordianList) accordianListDemo = accordianList[self.custom.dataIndex - 50:self.custom.dataIndex] self.getChild("rosterTableC").getChild("Accordion").props.items = accordianListDemo ``` ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [November 8, 2023, 8:06am UTC](https://forum.inductiveautomation.com/t/accordion-load-times/81610/7 "2023-11-08T08:06:21Z")
What do the views do ? Any scripting or other dynamically computed things in there ? side note: It's spelled "accordion", with an 'o'.