Anvil Extras Tab Component Click Event Handling

Anvil Q&A
1

Hello,

I’m relatively new to both python and anvil and I have been struggling trying to reference forms within forms. This is the hierarchy of my navigation:

I have a main form that includes a sub-form for an Overview Page, in this overview page I’ve used anvil extras tab component. Now this Overview form also has two sub-forms each for one of the options of the tabs. I also a navigation module that basically arranges the content as needed.

The issue is that I cant get the tabs_click to work, I think I have a fundamentally wrong understanding on how the click events work: I keep getting a warning:

Warning: overview_tabsTemplate.tab_overview_tab_click does not exist. Trying to set the ‘tab_click’ event handler of self.tab_overview from overview_tabsTemplate.

Although the tab component is responsive and the click looks like its working as a component I cant interface with it in the code.

Code Sample:

This is the code of the Overview Page that has the Tab component:

from ._anvil_designer import overview_tabsTemplate
from anvil import *
import anvil.users
from ... import navigation


class overview_tabs(overview_tabsTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
  
    # Any code you write here will run before the form opens.

  def tab_overview_tab_click(self, tab_index, tab_title, **event_args):
    if tab_index == 0:
      navigation.project_home()
    if tab_index == 1:
      navigation.project_econ()

And the code for the main page:

from ._anvil_designer import HomeDashboardTemplate
from anvil import *
import plotly.graph_objects as go
import anvil.users
from .. import navigation
from .overview_tabs import overview_tabs

class HomeDashboard(HomeDashboardTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    navigation.home_form = self
    navigation.project_home()
    # Any code you write here will run before the form opens.


  def nav_project_click(self, **event_args):
    navigation.project_home()
    
  def nav_ath_click(self, **event_args):
    navigation.ath_home()

  def nav_lam_click(self, **event_args):
    navigation.lam_home()
  
  def load_component(self, cmpt):
    self.home_content_panel.clear()
    self.home_content_panel.add_component(cmpt)

Any guidance would be greatly appreciated,
Thanks

2

Welcome to the forum!

When posting code samples, put them between three backticks (as shown in the Q&A template). That retains the indentation that’s important to reading Python code.

For the question, did you hook up the click event handler to your function? In the properties pane for the component, scroll down to the bottom and look at what you have in the click event handler there.

3

Thanks :smiley:

Yes, in the container properties → tab_click: tab_overview_tab_click

which is the same as the def tab_overview_tab_click(self, tab_index, tab_title, **event_args) :

4

Is this an app you can share a clone of? That will share the contents of your data tables, too, but gives forum volunteers a chance to poke around to see what might be up.

5

No I have no problem in sharing its just a sking atm:

6

It looks like you’re working directly with the templates that Anvil autogenerates. You should be working with the forms, instead. This is in your navigation module. Instead of:

form.add_component(tab_telemetry_cardTemplate())

You should be doing something like:

form.add_component(tab_telemetry_card())

The template classes exist for Anvil to use when creating forms, but they are not the forms themselves and not something you should be instantiating.

I didn’t go through and fix all of them to see if that got rid of the error, but that’d be my first step if I were you.

1 Like
7

Yeah that seemed to fixed it, went through and changed everything. Doesn’t really work as I want it to yet but at I can I see a path forward xD. Cheers mate

1 Like