Security, Privacy, AI and CSR information for all Piano products now lives in one place. Explore our Compliance Center.
Subscriptions
English French
English French

Is there an equivalent to tp.template.close() for Lightweight Templates that can be triggered from a RunJS card?

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

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

JavaScript
// 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:

JavaScript
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 a Map of all currently rendered Lightweight widgets, keyed by elementInstanceId.

  • 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 tp global.

  • If multiple Lightweight widgets are on the page, iterate the Map to identify the specific one you want to close, for example by applicationId or elementId.

Last updated: