Hubitat Custom App coding

Does anyone know how to expand and contract a section in an app? I know the new native homekit app contains code to do this. it also includes radio buttons (i think that what you call it?). Is there an extensive wiki on this? I’m building my first app and want to make it clean. here is what i’m talking about

The HomeKit integration app is a bit of a bad example; some built-in apps use tricks that are not available (or at least not readily apparent) to a user app or are just a front-end to something baked into other parts of the hub.

For developing your own app, I would start with the documentation. For your specific question, you'll find that here:

A section wiht "hideable" would get you about what you're asking for, though the display is a bit different from the app in your screenshot.

2 Likes

Thanks, yes, I found the hidable option for the sections. It's just clunky. I was hoping someone had the secret sauce recipe the built-in apps use. Perhaps @gopher.ny may have something to offer on this?

It looks like a mess of HTML and CSS that is heavily tied to implementation details under the current UI framework, which I would not suggest for long-term app stability. :slight_smile: (There is no guarantee this won't change.)

If you want a heavily customized UI, you'd be better off building an endpoint accessible via OAuth and do whatever you want with that content. Otherwise, most developers are able to work with the "native" app UI framework, so if you have something specific you are trying to do, sharing more information about exactly what isn't working may be more helpful.

2 Likes

Take a look at this app too if you wish to have an input table within your app:

1 Like

Thanks, as @bertabcd1234 mentions for future reliability, I see a reference in the code for the table string (i’m guessing this makes the table?) “https://code.iconify.design/”. does this mean these tables require an internet connection to generate? Please forgive my ignorance, I don’t really know enough about coding. I just kinda look at examples and hammer them in and shape them to make them work with a lot of trial and error (a whole lotta error, I mean like A LOT!).

This code example also falls right into what my end goal is as well. I would want to integrate some of this if it is reliable.

Depends on how you implement. I generally serve the JS from the local file system.

1 Like

No. These strings are just HTML. A number of our built-in apps use tables as a UI mechanism. There are a couple of methods in use in these apps to allow for embedded links in the table. In Mode Switches the method called 'buttonLink' is the one.

This is the very best thing to do! Hats off to you for making the attempt.. As you do this, feel free to reach out here for help with specifics.

3 Likes

is there a native way to add a "Pause" for an app (Child App in my case)? I know I can add a toggle button in the app to activate and then modify the app name to add (Paused) and do a bunch of other things to the event handlers. But is there a simple "Built In" Method for the hubitat coding?

Nope. It's all done with code in the apps.

1 Like

Okay, great. So there is not native app.pauseApp() or app.resumeApp(). How do we achieve setting the text for the app label (Paused) to be red? I have managed to build my own method to pause the app (and it works) but I can't make the "(Paused)" text red like the other apps. it is just the same color as the rest of the app name. this is the code im using to change ethe app label.

def updateAppLabel(paused) {
def newLabel = app.getLabel()
if (paused) {
if (!newLabel.contains(" (Paused)")) {
app.updateLabel(newLabel + " (Paused)")
}
} else {
app.updateLabel(newLabel.replace(" (Paused)", ""))
}
}

Suggest looking in the HPM application if you are modifying the app label. It does something similar and has a lot of advance feature coding.

1 Like

I have pause and resume buttons at the top of all my apps:


section(){
			if (!state.isPaused) {
				input(name: "pauseButton", type: "button", title: "Pause", backgroundColor: "Green", textColor: "white", submitOnChange: true)
			} else {
				input(name: "resumeButton", type: "button", title: "Resume", backgroundColor: "Crimson", textColor: "white", submitOnChange: true)
			}
		}

The button press is picked up by this function which sets a state variable and within updated() I subscribe/unsubscribe and/or schedule/unschedule things


def appButtonHandler(btn) {
    switch(btn) {
        case "pauseButton":
			state.isPaused = true
            break
		case "resumeButton":
			state.isPaused = false
			break
    }
    updated()
}

1 Like

Try this...

app.updateLabel("$state.name <span style='color:red'>(Paused)</span>")

1 Like