LIGHTWEIGHT TEMPLATES
Yes. Lightweight Templates can be closed programmatically using the tp.pianoWidgets API. Unlike Classic templates, where a single tp.template.close() call closes the active template, Lightweight Templates are managed as individual widget instances, so you first identify the widget you want to close, then remove it.
Two ways to close a widget
There are two equivalent approaches. Both work from a RunJS card.
Option 1 - Delete by elementInstanceId
javascript
// Step 1: get all current widgets on the page
const widgets = tp.pianoWidgets.getWidgets();
// Step 2: get widget elementInstanceId
const widgetsIds = widgets.keys().toArray();
// Step 3: delete the widget by its elementInstanceId
// if you have one widget
tp.pianoWidgets.deleteWidget(widgetsIds[0]);
// if you have multiple widgets
widgetsIds.forEach(elementInstanceId => {
tp.pianoWidgets.deleteWidget(elementInstanceId);
})
Option 2 - Call destroy() on the widget object directly
// Step 1: get all current widgets on the page
const widgets = tp.pianoWidgets.getWidgets();
// Step 2: get all widget instances
const widgetsInstances = widgets.values().toArray();
// Step 3: delete the widget
// if you have one widget
const currentWidget = widgetsInstances[0];
currentWidget.destroy();
// if you have multiple widgets
widgetsInstances.forEach(widget => {
widget.destroy();
});
Consider replacing widgets.keys().toArray() / widgets.values().toArray() with Array.from(widgets.keys()) / Array.from(widgets.values()). Iterator.prototype.toArray() is only supported in recent browsers (Chrome 122+, Firefox 131+, Safari 18.4+) and throws TypeError in older ones.
How to identify the widget you want to close
tp.pianoWidgets.getWidgets() returns a Map of all currently active widgets on the page. Each entry contains the widget's metadata and methods. For example, with a single widget on the page:
Map(1) {
'39db861f-773e-418c-9976-17a23e69afe0' => {
applicationId: "ABCD12345",
container: { selector: '.piano-widget-container' },
destroy: d => { ... },
dispatchSignal: (d, m) => { ... },
elementId: "1f6fd202-9262-4bc4-9ae8-bb73d4cf0930",
elementInstanceId: "39db861f-773e-418c-9976-17a23e69afe0",
listen: (d, m) => t.subscribe(d, m),
listenOnce: (d, m) => t.subscribeOnce(d, m),
listenerList: () => t.subscriberList,
removeListener: (d, m) => t.unsubscribe(d, m)
}
}
The key of the Map is the elementInstanceId, which is also exposed on the widget object itself. This is the identifier deleteWidget() expects.
Key points
-
tp.pianoWidgets.getWidgets()returns aMapof all currently rendered Lightweight widgets, keyed byelementInstanceId. -
tp.pianoWidgets.deleteWidget(elementInstanceId)removes a widget by its instance ID. -
widget.destroy()is the equivalent method available directly on each widget object, useful when you already have a reference to the widget. -
Both approaches can be triggered from a RunJS card, an event handler, or any custom JavaScript that has access to the
tpglobal. -
If multiple Lightweight widgets are on the page, iterate the Map to identify the specific one you want to close, for example by
applicationIdorelementId.