Hello,
I am using the Accordion Perspective Component to show my new data from the table. As shown in the image below.
I require that whenever I add a new country from Add Country, the accordion should auto-scroll and focus on the newly added country. Is there any possibility to configure Auto Scroll?
Most likely, but not without JavaScript. You can either inject it using the Markdown component, or use Ben Musson's Periscope module that exposes a function to call JavaScript in a less hacky way.. I’ll update with some more concrete info when I'm back on my laptop if someone else doesn’t in the meantime. However there’s a forum post where victordcq documents how to do this with a table component. It will need tweaking for the accordion
You can invoke .focus() on the newly added item in its onStartup event handler. You just need to make sure that the accordion itself first gains focus.
Here’s an example view with an accordion:
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 237
}
},
"root": {
"children": [
{
"children": [
{
"children": [
{
"meta": {
"name": "Accordion"
},
"position": {
"grow": 1
},
"props": {
"items": [
{
"body": {
"height": "auto",
"style": {
"classes": "",
"margin": "16px"
},
"useDefaultViewHeight": false,
"useDefaultViewWidth": false,
"viewParams": {},
"viewPath": "Item"
},
"expanded": true,
"header": {
"content": {
"style": {
"classes": ""
},
"text": "",
"type": "text",
"useDefaultViewHeight": false,
"useDefaultViewWidth": false,
"viewParams": {},
"viewPath": ""
},
"height": "40px",
"reverse": false,
"style": {
"classes": ""
},
"toggle": {
"collapsedIcon": {
"color": "",
"path": "material/expand_more",
"style": {
"classes": ""
}
},
"enabled": true,
"expandedIcon": {
"color": "",
"path": "material/expand_less",
"style": {
"classes": ""
}
}
}
}
}
]
},
"scripts": {
"customMethods": [],
"extensionFunctions": null,
"messageHandlers": [
{
"messageType": "add-item",
"pageScope": true,
"script": "\tself.parent.focus()\n\tself.focus()\n\tself.props.items.append({\n\t \"expanded\": True,\n\t \"header\": {\n\t \"toggle\": {\n\t \"enabled\": True,\n\t \"expandedIcon\": {\n\t \"path\": \"material/expand_less\",\n\t \"color\": \"\",\n\t \"style\": {\n\t \"classes\": \"\"\n\t }\n\t },\n\t \"collapsedIcon\": {\n\t \"path\": \"material/expand_more\",\n\t \"color\": \"\",\n\t \"style\": {\n\t \"classes\": \"\"\n\t }\n\t }\n\t },\n\t \"content\": {\n\t \"type\": \"text\",\n\t \"text\": \"\",\n\t \"useDefaultViewWidth\": False,\n\t \"useDefaultViewHeight\": False,\n\t \"viewPath\": \"\",\n\t \"viewParams\": {},\n\t \"style\": {\n\t \"classes\": \"\"\n\t }\n\t },\n\t \"height\": \"40px\",\n\t \"reverse\": False,\n\t \"style\": {\n\t \"classes\": \"\"\n\t }\n\t },\n\t \"body\": {\n\t \"viewPath\": \"Item\",\n\t \"viewParams\": {\n\t \"index\": len(self.props.items) + 1\n\t },\n\t \"useDefaultViewWidth\": False,\n\t \"useDefaultViewHeight\": False,\n\t \"height\": \"auto\",\n\t \"style\": {\n\t \"classes\": \"\",\n\t \"margin\": \"16px\"\n\t }\n\t }\n\t})",
"sessionScope": false,
"viewScope": false
}
]
},
"type": "ia.display.accordion"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"grow": 1
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
},
{
"events": {
"component": {
"onActionPerformed": {
"config": {
"script": "\tsystem.perspective.sendMessage(\u0027add-item\u0027)"
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "Button"
},
"position": {
"basis": "80px"
},
"props": {
"text": "Add Item"
},
"type": "ia.input.button"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"basis": "200px",
"shrink": 0
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}
…and the embedded item view:
{
"custom": {},
"params": {
"index": 1
},
"propConfig": {
"params.index": {
"paramDirection": "input",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 43
}
},
"root": {
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"grow": 1
},
"propConfig": {
"props.text": {
"binding": {
"config": {
"expression": "\u0027Item \u0027 + {view.params.index}"
},
"type": "expr"
}
}
},
"type": "ia.display.label"
}
],
"events": {
"system": {
"onStartup": {
"config": {
"script": "\tself.focus()\n"
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}