[BETA] UI Elements Library for App Developers

[thebearmay]

@jtp10181 got me thinking with some of the styling elements he created for buttons and icons, so I started digging a little and reverse engineered some code that will allow developers to create stylized input elements for Custom Apps. Current list of element types includes bool, button, capability, checkbox, color, date, decimal, enum, href (page and external), icon, mode, number, password, text, textarea, and time (dateTime).

Defined attributes for the elements currently include:

• name - (required) name to store the input as a setting, no spaces or special characters
• type - (required) UI Element type from the list above
• title - displayed description for the input element
• width - CSS descriptor for field width
• background - CSS color descriptor for the input background color
• color - CSS color descriptor for text color
• fontSize - CSS text size descriptor
• multiple - (for enum/capability/mode) allow multiple items to be selected: true/<false>
• options - list of values for the enum (modes will autofill)
• defaultValue - default for the field
• radius - CSS border radius value (rounded corners)
• destPage - (required for HREF unless using destUrl) name of the app page to go to
• destUrl - (required for HREF unless using destPage) URL for the external page
• trackColor - bool only
• switchColor - bool only
• cBoxColor - checkbox only

The library is located at:
https://raw.githubusercontent.com/thebearmay/hubitat/refs/heads/main/libraries/uiInputElements.groovy
and a small demo app to let you play without writing code is at:
https://raw.githubusercontent.com/thebearmay/hubitat/refs/heads/main/apps/UIElemDemo.groovy

Couple of screen shots from the demo app:

[thebearmay]

Added hoverText (tool tip) to all elements except icon, and did some code cleanup. Demo app reflects the changes also.

Note: If using hoverText, you must add $ttStyleStr to at least one element display on the page as it contains the CSS Style tag for the onhover function, i.e.
paragraph "$ttStyleStr"

[thebearmay]

Added uiType textarea

[xavib57905]

Gemini AI sent me here during a self-directed session on expanding my Groovy chops. I wondered, "Why didn't I notice this before?" My dream is to create an alternative UI for the hub itself, but I'll settle for prettying up my custom apps for now.

Nice collection there, sir.

[thebearmay]

Thank you!

[thebearmay]

As a result of the thread at

Let's model the change

Short Version: This community of developers can and should model the change they desire to see. Longer Version: It occurs to me that there are several talented developers in here that all have ideas, some brilliant and some not so much, but all have value and could provoke others into thought/creation. For the last year+ HE staff have put forth several improvements in the UI but I haven't seen a lot of developers throwing what I'd call "fleshed out" examples of what they've comptemplated or…

I've made some additions and minor corrections of the code (primarily enum and capability elements).