How to make button like "Add another global variable?"

🚧 Developers Coding Questions
1

How do I go about creating a button like the one in Rule Machine for "Add another global variable?"

image
image965×275 17.1 KB

It can't be an href button because it doesn't link to a new page. What else is it?

2

These are a special type of input on Hubitat using a type parameter of "button":

input name: "myButton", type: "button", title: "My Button Text"

When clicked/tapped, any button calls a method you must define called appButtonHandler and passes the name of the button, so you'll need something like:

void appButtonHandler(btn) {
   switch (btn) {
      case "myButton":
         doMyButtonThings()
         break
      default:
         log.warn "$btn press not handled"
         break
   }
}

To get two buttons side by side like you see above in RM, you'll need to add the width parameter to your input. There are 12 width "units" availbale, so it's possible each of those buttons are 6 (or maybe 4 or 5 with a 1-3 width empty "paragraph" in between) and the drop-downs below 4. An example:

input name: "firstButton", type: "button", title: "First Button", width: 6
input name: "secondButton", type: "button", title: "Second Button", width: 6
3 Likes
3

Ok, great. I've got it working mostly. I have it show the global variable name field when the button is clicked, but can't get the name field to submit and go away after the user inputs the name. For whatever reason, the "submitOnChange: true" doesn't seem to do it.

The way I've coded it is for the button handler to set a state variable to true when the button is pressed. And I show the name field only when the state variable is set to true. Then in the initialize() function I check whether the name field is null or not. If it's not null, suggesting someone just input the name, I set the state variable back to false.

4

I'm not sure if this explains what you're seeing (having a hard time wrapping my mind around that without seeing at least a minimal example), but I can tell you that if you change any setting/states in your appButtonHandler() method for the same page the button lives on, my experience suggests that they are usually not changed in time to take effect for the next loading of a dynamic page (which it sounds like you've seen will only happen with submitOnChange: true specified for the button). I'm not sure if behavior is guaranteed one way or the other, but that's what I've seen. A second reload would take care of the problem. I don't know a good workaround (besides considering a different input, like a boolean toggle instead of a button if that works for you), but others may have more creative ideas ... if this is indeed your problem.

5

I see. Well I wonder how Rule Machine does it then. Here's what I've done:

def DashboardTilePage() {
    dynamicPage(name: "DashboardTilePage") {
            input name: "addTile", type: "button", title: "Add Tile", width: 3            
            if (state.addingTile) {
                input name: "newTileName", type: "text", title: "New Tile Name", submitOnChange: true
            }
    }
}


void appButtonHandler(btn) {
   switch (btn) {
      case "addTile":
         state.addingTile = true
         break
      default:
         log.warn "$btn press not handled"
         break
   }    
}

def initialize() {
    if (newTileName) {
        state.addingTile = false   
    }
}
6

Ok, I figured out a way to make it work. And I like it better anyway. Just added a "Submit" button. Like this:

    if (state.addingTile) {
        input name: "newTileName", type: "text", title: "New Tile Name", submitOnChange: true, width: 4
        input name: "submitTile", type: "button", title: "Submit", width: 3
    }

void appButtonHandler(btn) {
   switch (btn) {
  case "addTile":
     state.addingTile = true
     break
  case "submitTile":
     if (!state.tiles) state.tiles = []
     if (newTileName) state.tiles.add(newTileName)
     state.addingTile = false
     break
  default:
     log.warn "$btn press not handled"
     break
   }    
}

Thanks for your help!

7

Just did some sluething, and it appears they change a state value when the button is pressed. I may have mis-remembered before--I know my attempts to modify settings before the page reloaded didn't work, but I was probably wrong about state, and now that I think about it, I believe that actually might have been how I worked around the problem I remember having when I discovered this (I can't check anymore since I totally re-thought what I was doing and moved these things to an entirely different page, avoiding these concerns altogether).

Glad you got something figured out in any case!