App developers,
2.3.7.114 firmware update adds an easy way to dynamically update app UI with current devices status (and more) without re-rendering entire app page. There are two ways to accomplish that.
-
Pure browser updates. Just add class "device-current-state-$deviceId-$currentStateAttribute" to the HTML element, and the element's content will be updated with the value of that attribute in the browser. For apps, the class name is "app-state-$appId-$eventName", hub events, "hub-state-$eventName", and location events, "location-state-$eventName". To make troubleshooting easier, check JavaScript console for messages like 'assigning text on to elements with class device-current-state-123-switch'. These entries will show the exact class name expected.
-
Groovy based HTML rendering in response to events. The class name is similar to client side, but includes 'ssr-' prefix for 'server side rendering'. Each tagged HTML element will make a call to the app code when event occurs, so use judgement about how many elements you want to update. On the hub side, the application must include function String processServerSideRender(Map event). The event parameter will include all usual event fields plus elementId that this event is for, if applicable. It should return HTML, which will then override whatever HTML the element currently has.
Keep in mind that initial content of the HTML element is not pre populated. You have to explicitly do it in the app code. Here is a simple app that demonstrates these new abilities:
definition(
name: "Sample App - server side rendering",
singleInstance: true,
namespace: "demo",
author: "gopher.ny",
description: "Sample app for testing code",
category: "My Apps",
iconUrl: "",
iconX2Url: "",
iconX3Url: "",
installOnOpen: true
)
preferences {
page(name: "mainPage")
}
def mainPage() {
dynamicPage(name: "mainPage", title: " ", install: true, uninstall: true, containerClass: "w-full") {
section {
input "rgbwBulb", "capability.colorMode", title: "Select an RGBW bulb", submitOnChange: true
if (rgbwBulb) {
paragraph(
"<span class='device-current-state-${rgbwBulb.deviceId}-hue'>Hue unknown</span><br/>" +
"<span class='ssr-device-current-state-${rgbwBulb.deviceId}-hue ssr-device-current-state-${rgbwBulb.deviceId}-level ssr-device-current-state-${rgbwBulb.deviceId}-saturation'>Status unknown</span>")
}
}
}
}
String processServerSideRender(Map event) {
log.debug event
return "${event.displayName}'s ${event.name} is now <b>${event.value}</b>"
}
These dynamic updates have been added to Hub Variables page and the devices tables of Room Lights.
