View canvas - script navigation for all embedded views?

Ignition
1

I'm using a dynamic view canvas to display small UI cards for nodes/assets in the tag structure related to a given tagPath.

The embedded views are generally custom for a given node/asset as defined using a UDT-defined property such as tagPath.navView=viewPathToNavCard. As such, I have many similar yet unique card layouts and am trying to keep as much as I can at the view canvas level. For example, the View Canvas's defaultStyle properties are excellent to style the embedded views as consistent UI cards. Common where possible, custom where it counts.

I'm aiming to do something similar for user interaction when clicking on a given embedded view within the view canvas. I want each view to nav to a specific viewPath, but pass the tagPath found within its given instance such as instances.[n].viewParams.tagPath. Conversely, I'm trying to avoid having to configure a nav event on the root flexbox of every single UI card variant, thus my aim to keep it within the view canvas component if possible. The view canvas component has the onInstanceClicked component event, however I don't see a clear way for it to drill into a specific parameter for each embedded instance. Any ideas?

2

The event.index tells you which instance in the instances array was clicked, from which you can retrieve the viewParams that were passed to it.

3

Thanks @pturmel for the advice. Works great to use event.index.

Project script:

from java.net import URLEncoder
from java.nio.charset import StandardCharsets

def doCardNav(self, event):
	tp = self.props.instances[event.index].viewParams.tagPath
	encoded = URLEncoder.encode(tp, StandardCharsets.UTF_8)
	system.perspective.navigate(page='/urlPathHere/' + encoded)

Then on the view canvas component, onInstanceClicked, run cardstack.doCardNav(self, event)

1 Like