Widget Code Structure

widgets are implemented as anonymous classes that extend the htmlelement class the preferred approach is to extend swimlaneelement, which itself extends litelement and provides additional functionality for building rich, interactive record and report widgets in turbine default widget example here is an example of the default widget with annotation added / import `swimlaneelement` class the `css`, `html`, and `svg` methods are also imported from `swimlane element` / import { swimlaneelement, css, html, svg } from '@swimlane/swimlane element\@2'; / the `recordframetemplate` is a template helper function see templates below / import { recordframetemplate } from '@swimlane/swimlane element\@2/lib/templates js'; / a swimlane widget is implemented as an anonymous class which extends the `swimlaneelement` class / export default class extends swimlaneelement { / the `styles()` getter is a static class getter it defines styles common to all widget instances this method does not have access to instance specific properties like `record` or `report` / static get styles() { return \[super styles, css` frame after { content "record output"; } `]; } / the `render()` method is an instance method scheduled by `litelement` lifecycle events it must return a `lit html` template this method has access to `this record` and `this report` / render() { return recordframetemplate(html` \<pre>${json stringify(this record, undefined, 2)}\</pre> `); } } properties swimlaneelement defines the following properties this record – available to record widgets an object containing key value pairs for each field on the record this report – available to report widgets an object with data parsed result rows rawdata unprocessed backend response query the report query this contextdata – available to all widgets contains contextual information application currentuser origin token documentation on how litelement handles properties and attributes can be found https //lit element polymer project org/guide/properties lifecycle in addition to standard htmlelement and litelement lifecycle methods, swimlaneelement includes resizedcallback() – called when the widget is resized by default, it calls requestupdate() to trigger re rendering documentation of litelement lifecycle methods and properties can be found https //lit element polymer project org/guide/lifecycle events swimlane widgets can emit platform events using the following methods this updaterecordvalue(key, value) updates a specific record field by key this addcomment(comment) adds a comment to the record this method returns a promise, allowing follow up actions to be chained this triggerbutton(); }) catch(error => { console error("failed to add comment ", error); }); this triggerbutton(buttonid) triggers a playbook button by its id this triggersave() saves the current record this method also returns a promise, enabling safe sequencing of actions this triggersave() then(() => { this triggerbutton(); }) catch(error => { console error("save failed ", error); }); avoid using settimeout() to delay follow up actions use promises to ensure actions happen after the save or comment completes successfully you can also perform multiple asynchronous actions in parallel using promise all() promise all(\[ this triggersave(), this addcomment("escalated to tier 2") ]) then(() => { this triggerbutton(); }); documentation on how to handle events in litelement can be found https //lit element polymer project org/guide/events value emission patterns for single value fields (text/numeric/date fields, etc ) or single select field types, simply emit the new value // value can be a string or number type this updaterecordvalue('field key', 'new value'); for text and numeric list field types, emit an array of new values if duplicate values exist, their ids get reused // value is an array of strings for text list, and numbers for numeric list this updaterecordvalue('field key', \['first item', 'third item']); for multi select field types (selects, radio buttons, checkboxes), emit an array of new values every element in the value must exist in the contextdata // value is an array of strings this updaterecordvalue('field key', \['first item', 'third item']); // all values must be present in contextdata // for example this updaterecordvalue('field key', \["fourth item"]) // ❌ error to add a comment, emit the new comment as a string this addcomment('comments key', 'hello world!');