[Question][Perspective] What variable changes in a Carousel when a Carousel item is clicked?

[joe.friedrich]

In a Carousel, when you click on an item, there is an orange or blue box that appears around the item. What variable is changed to keep track of the boxed item? If the users are utilizing click+drag to navigate the Carousel, can we force boxing on double-click only?

[cmallonee]

Any variable tracked by the click would be determined by the component being clicked.

For example, if you have a button in a View which is in a Carousel, the Carousel knows ONLY about the ViewPaths and the viewParams used to construct itself - it knows NOTHING about the content it is displaying.

If a button is clicked and you need to track the number of clicks then really you need to have the button fire an onClick event which should then update a property somewhere within either itself or its parent View. You could also broadcast a message that the button has been clicked (along with how many times if the button is already tracking that in a property) using
system.perspective.sendMessage(messageType='MyViewButtonClicked', payload={'clickCount': self.custom.clicksMade}, scope='page')

Use of this broadcast message would also require you to configure a script on some “listener” within the View which contains the Carousel which would be listening for the “MyViewButtonClicked” messageType. That script would be responsible for digesting the payload ( self.props.text = payload['clicksMade']). The scope variable couldbe set to “session” if necessary, but a value of “view” would result in the message never reaching the View which contains the Carousel because the scope would actually be the View which contains the Button (that is, the View within the Carousel)…

[joe.friedrich]

Thank you. However, I was wondering how the yellow box in Pic 2 is handled.

Pic 1 is preview mode before I have clicked anything in the Carousel.
Pic 2 is after I have clicked on the second selection [1] of the Carousel.

(If you Launch a Session and click on an item, the outline is blue instead of yellow.)

I would like to know which item is selected so I can change variables in carousel.views[item].viewParams
I believe the item is captured in the same data that the Yellow box is using to highlight a selection.

[cmallonee]

I’m confused by your description and screenshots.

It looks like you have a View which has three Containers or Views in it. I would need to see the contents of that View to tell you what you’re looking for.

It might help if you provide me a copy of the View in question so I can replicate what you’re seeing:
Hold the Shift key and then right-click the View in question in the Project Browser (not the root node, but the actual named View). Select Copy JSON. Paste that contents of your clipboard into your favorite text editor and save the file as a .json. upload that file to this thread.

You technically haven’t changed anything about the carousel - it currently is displaying activePane = 0 even after your click.

[joe.friedrich]

<Note: edited the title of the thread to clarify the original question (removed the word 'view', clarified where i am looking for the variable in question.)>

You technically haven’t changed anything about the carousel - it currently is displaying activePane = 0 even after your click.

Correct. activePane tracks which 'dot' you are on (blue, at the bottom of the screen). I cannot find how the yellow box knows to draw itself around carousel.views[1].

Swiping Cards in Perspective

The important part (at least, re: swiping) is actually a carousel. I’ve attached an extremely basic example with two different pages in a carousel - each is actually the same view, but with a different number of ‘cards’ visible. The ‘Card’ view is just a coordinate container; then the ‘Page’ is a flex container with a flex repeater within it. On the ‘Landing’ view, the carousel is set to ignore the default view height and width, then then also set to take the entire space available in its contai…

I took Paul Griffith's Cards.proj (which you should be able to download from the post linked above) and manipulated it to make a better screenshot.

Landing.json (2.0 KB)

Paul's project: Landing has a Carousel. Landing's Carousel loads Page for each Carousel item, which contains a Flex Repeater. Page's Flex Repeater loads Card for each repeat. Card contains a Tank and Label.

Please let me know what further clarifications I can make.

[cmallonee]

Okay, got it.

Your Carousel has PROPS.slidesToShow = 3 Which is why you’re seeing the first three Views.
The only way you would have any way to know which View is being clicked (because what you’re seeing in the yellow box is the View you clicked into) is if there is an onClick event in place for the supplied View at the root-level.

To relay/use information about the clicked View, you’ll need several things in place:

1. Whatever property you’d like to relay when the View is clicked needs to be saved in a property somewhere within the View, including root or components (so ViewName.custom.view_name)(note that there is no way to directly access a View’s name, but you can hard-code it yourself).
2. For each View in use in the Carousel, select the View’s root node in the Project Browser.
3. Now right-click the root “component” in the Design Panel and select Configure Events.
4. Select the onClick Event, and then select the Script Action.
5. Your script must at some point execute the following code system.perspective.sendMessage(messageType='CarouselViewClicked', payload={'view_name': self.view.custom.view_name}, scope='session') although you could replace “session” with “page” if you prefer. The sticking point here is if you declare “session” as the scope and you have A View represented in the Carousel open in some other tab, it will also send information to this tab, whereas if you select “page” as the scope" then that won’t happen.
6. The View which contains the Carousel must have a listener in place for the “CarouselViewClicked” message. Any component or container (including the root) can have this listener, but whatever has the listener is responsible for the logic to be executed. It’s therefore probably bets to do at the root-level, so that if you delete a component the logic is still in place somewhere.
7. Select the root node in the Project Browser.
8. Right-click the root component in the Design Panel, and select Configure Scripts (not Events).
9. Double-click “Add handler”.
10. Set the Message Type input to “CarouselViewClicked” (without the quotes).
11. Supply logic to fire whenever the message is heard. For example, self.getChild('SomeLabel').props.text = payload['view_name'] would set a Label’s text to be the name of the clicked View.

Also, for clarity’s sake, while you have clicked props.views[1], the Carousel is “dumb” in that it has no idea about the content within it - the Carousel has no idea about what View you’ve clicked or what that View might contain. The Carousel will keep track of itself (like what slide is active). If you want to use the activePane property to align with the Views in the Carousel, you’ll have to limit the number of Views per slide/pane to 1.

[joe.friedrich]

Got it. I thought it might be using a hidden variable to which we had access, but was not documented.

I appreciate the workarounds provided and the hard work that went into our conversation.

[joe.friedrich]

Quick followup question/request.

My boss doesn’t like the yellow box.

Are there plans to get rid of it, or be able to toggle it off/on?

[cmallonee]

I believe the box existing at all is not something we control (third-party library in use), and I believe the color of the box is dependent on browser. In my testing, Chrome showed blue, Firefox showed a dotted line, and Edge gave no indicator. I’m not sure how you are seeing yellow, but it could perhaps be a setting in your browser? Have you tried on other workstations, or signed out of your browser profile?

[joe.friedrich]

Oh, it is yellow in the Ignition Designer preview mode.
It showed up blue in Chrome for me as well.

I’ll poke around in my browser.
Thanks for the info!