Fire Event When Changing Tabs

[mramos]

I'm trying out the tab widget to collect data in a step by step manner.

The tab containers are convenient for me to place widgets and hide/show widgets within a section .

I can trigger an event/RPG call when I create buttons to for back and forth between tabs.

There is nothing is NAB that allows me to call RPG/RunScript/Call event when clicking a tab

How can I trigger an event or RPG call when the user clicks from tab 1 to tab 3 or vice versa, instead of using the buttons?




Cant control if tab is clicked instead of button click.PNG
Next Button to change Tabs.PNG

Thanks!

[Johnny Major]

We currently don't have anything that allows you to call a backend program when a tab is clicked; however, it might be better to use the new app breadcrumbs that were added in the 6.2 update "6.2.20230927" for something that is step-by-step

[mramos]

May you please explain a bit on how to use those breadcrumbs?

[sean.lanktree]

Sure, first you will need to enable breadcrumbs for your application by clicking the "App-level Breadcrumbs" checkbox. This will will activate the "Breadcrumbs" menu option in behaviors.

Adding a breadcrumb is simple, Breadcrumbs > Add Breadcrumb. You will be prompted for the text to output, an icon (optional), and an event name (optional) to fire when this is clicked. You will then need to listen for that event which you can do under the Event Listeners section within Behaviors. The event that the breadcrumb fires will be available as a "Local" event.

So just to try and tie it all up with an example...suppose I have a process for creating a product. It requires 3 different widgets to get all of the information and I want to do this in steps. Suppose step 1 is a form that just asks for some general details. Step 2 is grid of warehouses that I can select where the product will be sold from. Step 3 is a grid of products that the user can select as possible replacements if this product is out of stock.

User presses a button to get into new product setup. In this case I show my form to collect general details. I also output my first breadcrumb. I give it a text of "General Details" and an event name of "generaldetails".

User fills out info and the form and presses a next button: now I show my grid of warehouses and output a new breadcrumb with a text of "Warehouse" and an event of "warehouses".

User selects the warehouses and presses Next button: show my list of products to serve as possible substitutes and output new breadcrumb with a text of "Replacements". No need to fire off an event here as this is the last step.

Last I want to listen for the "generaldetails" and the "warehouses" events. For generaldetails, I will show my form from step 1. For warehouse, I will show my grid from step 2.

Hope this helps.

[mramos]

On the first step, where exactly do I find the 'App-Level Breadcrumbs' checkbox? I don't see an option in NAB.

[sean.lanktree]

What version do you have?

[mramos]

6.2.20231107.0

[sean.lanktree]

Go in to edit your application. The checkbox will be on the left hand side (just below the Appbar Title input).

[mramos]

No Checkbox.PNG
The only checkbox I can see is 'Allow Vertical Scrolling'

[sean.lanktree]

This is concerning as it has been available since the 0927 build. It's almost as if you are running a cached copy. Can you open Dev Tools go to Network and select the Disable Cache checkbox and then reload NAB?

[mramos]

There was an issue with the latest version installed. I am now able to use the breadcrumbs in NAB. I'll give that a shot. Thank you, Sean!

[Johnny Major]

May you please explain a bit on how to use those breadcrumbs?

We just posted a blog post on breadcrumbs

[Johnny Major]

In the next 6.2 update, you will be able to fire an event when the tab is activated and when the user is exiting the tab.

[mramos]

Great, thanks for the update!