@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, 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:
