Material Design Theme stumbling block

Anvil Q&A
1

I’m trying to use the material design theme per the quick start instructions, I keep stumbling. I have links along the left nav bar. I have a column panel in the form’s body. on a link click event, I want to display a form in that column panel (essentially “Switching the main page contents” per the instructions). So I have the code below - when a user clicks the link ‘dashboard - fleet’ (lnk_db_fleet), then I want to display my ‘fleet_dashboard’ form in the ‘content_panel’ column panel component. There’s clearly something wrong with my syntax or something, it’s not recognizing the form as a component. I know something is amiss because the ‘helper’ is not displaying the form as a choice of components.

  def lnk_db_fleet_click(self, **event_args):
    self.content_panel.clear()
    self.content_panel.add_component(fleet_dashboard)
2

I’ve tried everything. Looked at all the examples.

What do I put in the add_component all as an argument? I keep getting an error that ‘fleet_dashboard’ is not a component. If a form is not a component, then I’m really confused.

3

This may help:

  1. What is the name of the class that defines your fleet dashboard?
  2. Do you want to create an instance of that class, to display in the column panel? Or does that instance already exist?
  3. What is the name of the variable that contains (refers to) that particular instance?
  4. Where is that variable created?
4

Off-hand, if “fleet_dashboard” is the name of a class, you need parenthesis after it to create an instance of it.

Also, if you click the Gear link next to your project name, and choose Share App, you can get a clone link that you can post here. That’ll give people permission to create a copy of your app (so make sure you don’t mind people seeing it) to poke around and see the complete code.

5

I can’t thank you enough for responding/helping, here’s a clone - it’s a little jacked because I was playing with simply turning xy panels off and on to achieve my objective. What I really want to do is swap out different forms depending on what I’m doing

6

That link allows us to run your code, but not clone it. The clone link is the one below that one:

image

7

my bad, sorry…

clone removed by author

8

No problem, it’s all part of the learning curve.

You’ve got things setup right, you just need two pieces to get the fleetdb form to open up. One is to import it, the other is to create it as the component you’re adding.

In your Homepage form, add the import before you start defining the Homepage class.

from ..fleetdb import fleetdb

class Homepage(HomepageTemplate):

And then in the click handler, create an instance of fleetdb to add:

self.content_panel.add_component(fleetdb())

That adds a brand new instance of the form. That may or may not be what you want, depending on how you’re handling the forms, but it’ll get you started.

1 Like
9

… and that worked, you are my hero!

10

Glad it worked!

Longer-term, you might want to look into the excellent hash routing library: Routing, navigation with URL Hash

It takes care of the sort of thing you’re doing manually right now, and allows the user to use the Back button in the browser the way they’d expect to do so in a web app. It takes a little setup, but I wouldn’t create an app without it these days.

2 Likes