Accordion Load Times

[Eliazar_Sanchez]

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

[pascal.fragnoud]

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.

[Transistor]

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,

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.

[Eliazar_Sanchez]

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

[Transistor]

Please post code, not pictures of code.

Wiki - how to post code on this forum

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]

[Eliazar_Sanchez]

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

[pascal.fragnoud]

What do the views do ? Any scripting or other dynamically computed things in there ?

side note: It's spelled "accordion", with an 'o'.