Widget Code Structure

the widget is implemented as an anonymous class which extends the htmlelement class the preferred method to create a widget is to extend the swimlaneelement which extends the litelement class which itself extends htmlelement class here is an example of the default widget with annotation added / import `swimlaneelement` class the `css` and `html` methods are also imported from `swimlane element` / import { swimlaneelement, css, html } from '@swimlane/swimlane element\@1'; / the `recordframetemplate` is a template helper function see templates below / import { recordframetemplate } from '@swimlane/swimlane element\@1/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, in other words, it is a property defined on the class constructor this style getter method does not have access to any properties stored in the objects (i e `record` and `report` data) this getter defines styles common to all instances of this widget defining this in your widget is optional / static get styles() { return \[super styles, css` frame after { content "record output"; } `]; } / the `render` method is an instance method and, therefore, has access to properties stored in the object (i e `record` and `report` data), see properties below the render method is scheduled by `litelement` lifecycle events and must return a `lit html` template defining this method in your widget is required / 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 containing data , rawdata , and query this contextdata available to both record and report widgets, an object containing data such as application , currentuser , origin , and token documentation on how litelement handles properties and attributes can be found https //lit element polymer project org/guide/properties lifecycle in addition to the htmlelement and litelement lifecycle methods, swimlaneelement adds the resizedcallback method resizedcallback this method (called whenever the element is resized) but default simply calls requestupdate https //lit element polymer project org/guide/lifecycle#requestupdate documentation of litelement lifecycle methods and properties can be found https //lit element polymer project org/guide/lifecycle events swimlaneelement adds the following methods for emitting swimlane widget events this updaterecordvalue(key, value) available to record widgets updates record data by field key this addcomment(key, value) available to record widgets adds a new comment by field key this triggerintegration(taskid) available to record widgets triggers an integration this triggersave() available to record widgets triggers record save on the record page documentation on how to handle events in litelement can be found https //lit element polymer project org/guide/events for single value fields (text/numeric/date fields, etc) or single select fields 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 id s 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']); // every element in value must exist in the `contextdata` // e g this updaterecordvalue('field key', \["fourth item"]) // error to add a comment emit the new comment as a string this addcomment('comments key', 'hello world!');