Navigation event with Tab Container

Hi all. New to Ignition. I’m working with a tab container in perspective, and having some trouble getting the navigation function that I would like.

  • I have this view with the navigation tab docked at the bottom of every screen.

  • When I click the “Contherms" button, the tab on the bottom changes to show the “CON 3000”, “CON 3100”, etc. buttons.

  • I’m able to click each of the “NavBtn” and add the “CON ####” text and configure an event to launch the detail page that I want. This works as expected.

  • I have not been able to figure out a way to make clicking the “Contherm” button launch a page that has an overview of all my contherms and bring up the list of detail pages at the bottom.

  • I’ve tried configuring an onClick event for the tab (NavTab4), but for some reason this does not work.

  • Is there a way to make what I want work?

Have you been testing in a real client? The designer doesn't do navigation and can't properly show interaction with docks.

I have been testing with a real client.

Your onClick event is not on the tab itself, but rather the container that is displayed when the tab is selected.

If you want to perform this navigation when the ‘Contherms’ tab is selected, I recommend adding a change script on the currentTabIndex property (on the Nav component) that will check the new value and perform any navigation using the Perspective navigate scripting function.

As you said you are new to Ignition, so I would also warn against leaning too heavily on change scripts throughout your project until you familiarize yourself with the potential performance impacts if utilized improperly. That said, I think this is a fine use case for one.

I tried this and doesn’t seem to work. Does my script look fine?

Here’s my perspective views:

First, before anyone beats me to it, any time you are posting code in the forums follow this guide Wiki - how to post code on this forum so it will format nicely and be more readable.

As per your script, the one thing I can see is incorrect is the way you are using currentValue. If you look at the parameter definitions on top the currentValue and previousValue are QualifiedValues which means they can’t be used like an integer for comparison.

What you’d have to do in this case is extract the raw value using currentValue.value to compare. This will come up more throughout your experience with Ignition, so I’d recommend familiarizing yourself with the concept (Scripting Object Reference: QualifiedValue).

2 Likes

This worked. I’ll read through the materials you linked. Thanks for your help.