Z-Order onClick Button Script

Ignition
1

I have a system of conveyors but portions of them overlap one another directly (like a stack of cards). Is it possible to create a onClick event on a button to change the Z-order of the embedded conveyor views? I would need to be able to toggle between 4 conveyors, but I could use 4 buttons each of which directly brings a different conveyor to the top of the list while lowering the others. I know you can set the Z-order of components using the toolbar button in the designer but I would need this to be possible in runtime.

2

This works in Vision, not sure about Perspective, my example is hard coded for top:

container = event.source.parent
container.setComponentZOrder(event.source,0)
3

You can’t change the z-order of arbitrary Perspective components at ‘runtime’ - the “depth” is just a reflection of the order of the components in the stack (notice if you place two components, modifying the z-order reorders them in the project browser).

The only exception is if you’re using an ‘Embedding’ component (flex repeater, view canvas, etc) - since you can dynamically reorder the instances array.

4

You would need to use something like the View Canvas component. This would allow you to specify the position AND order of the Views instanced on the View canvas. This would require you to re-make each of your conveyors as an individual View.

5

I see how it is possible with the View Canvas but using that is a bit more difficult to align everything correctly than I would like but it does seem better than the Flex Repeater. Is it possible to change the z-order of normal embedded views? All of my conveyors are embedded view components as they are a template so that each conveyor contains the required info needed for identification.

6

Embedded Views are just a component, so it has the exact same behavior as any attempt to re-order any other component (like your buttons).

Oh, this would make the View Canvas ideal then!

Here's what I would do:

  1. In addition to any params you're already passing to the conveyor, you should pass a unique identifier. The complexity does not matter - just make sure each identifier is unique to a conveyor piece.
  2. The conveyor template view needs to have an onClick event configured which uses system.perspective.sendMessage to "broadcast" the unique identifier param at the page or session scope.
  3. The View Canvas should have a Message Handler configured (at the same scope as the template is broadcasting at). The logic in this handler is responsible for re-ordering the instances of the View Canvas, doing so in a way that places the instance with the received unique identifier as the last instance.