Tasks
Gallery form controls
The official form controls in the gallery — chart, saved report, address search (Google Places), map, signature, rating, slider, rich text, editable table, Likert matrix, progress, info card and PDF viewer: install, properties, values, capabilities and security.
The gallery has official form controls: ready-made custom form controls built and signed by the UserTasks team. Each is a web component (Lit, bundled into one ES module with every library it uses) that installs into Extensibility → Form controls and appears in the form designer's palette under Custom.
They follow the same contract and sandbox as your own controls: a frame with an opaque origin and a strict Content-Security-Policy, the field's label as the accessible name, the form theme as --ut-* tokens in light and dark, full keyboard operation, a text formatter for read-only views (completed tasks, mobile, emails) and a value the server validates against the control's schema.
Install
- In the app: Extensibility → Form controls → Browse gallery opens Packages → Browse gallery on the Form controls tab. Choose Install: the wizard verifies the package (checksum, file hashes, signature) and shows what it adds. The control lands enabled; versions installed from the signed gallery show Signed package with the signer's fingerprint.
- Starter pack: Form controls starter pack installs every control in one go.
- By file or CLI: download the
.utpkgfrom the control's page, drag it onto Automations → Packages, orusertasks packages install form-control-<name>-<version>.utpkg.
Then drag the control onto a form, set its properties in the properties panel and map its context fields (other fields of the same form it reads, such as the address a map shows). Its value flows downstream like any field: {{task_data.<key>}} on task forms, {{form.<key>}} on form pages and the Form submitted trigger.
Capabilities and security
A control can only use the host services its manifest declares and the host grants:
| Capability | What the control can do | Granted when |
|---|---|---|
lookup | Ask for suggestions (lookup request). The server runs the field's lookup source — a data table, or an API reference with credentials stored on the server. | The field has a lookup source configured. |
reports | Ask for the rows of a saved report (report request). The report is the field's report_id, read by the server from the stored form — a control cannot choose another one. It runs as the person filling in the form: only their own or shared reports, with their permissions and row-level security. | The field has a report chosen. |
files | Upload files to Attachments (upload), and read the bytes of files the form already gives it (file): its own value, or an Attachments field mapped as context. Reads go through the user's own session. | The form can store files (not in the designer preview). |
network | Fetch from the hosts listed in its manifest; with tile.openstreetmap.org approved, also ask for map tiles (tile), fetched and cached by the server. | An administrator approves the hosts in Extensibility → Form controls; until then the frame's CSP blocks every request and the server refuses tiles. |
Address search and Google Places
The address control never holds an API key. It sends what the person types to the UserTasks server as a lookup; the server calls Places API (New) Text Search through an API reference whose key is stored encrypted in an integration, and returns only the configured fields (formatted address, address components, location). A browser key would be exposed to anyone using the form — and a sandboxed control frame has an opaque origin and sends no referrer, so an HTTP-referrer-restricted key could not work there anyway.
The package ships the integration (Google Places API (New), API key header X-Goog-Api-Key), the API reference (POST /v1/places:searchText with a field mask) and a sample form (Address and location (sample)) with the address control wired to the reference and a map showing the result. The install asks for the API key. Restrict the key to the Places API (New) in the Google Cloud console; set a quota. Any other address source works too: point the field's lookup at your own API reference or a data table of sites — the control understands Google's new and legacy shapes and plain street / city / postcode / lat / lng fields.
Map tiles
The map control shows OpenStreetMap tiles once an administrator approves tile.openstreetmap.org for it (dimmed to match dark mode), and always shows the attribution. Public tile servers refuse requests without a referrer — which a sandboxed frame never sends — so the control asks the host for each tile (a tile request): the UserTasks server fetches it with an identifying User-Agent and Referer, caches it (7 days), rate-limits per user, and serves it only for controls with the host approved. The OpenStreetMap Foundation's tile servers are for light use under their tile usage policy; for heavy use, fork the control for a commercial or self-hosted tile server.
Licences
Every control is Apache-2.0. Bundled libraries are permissive only and pinned to exact versions: Lit (BSD-3-Clause), Chart.js (MIT), Leaflet (BSD-2-Clause), pdf.js (Apache-2.0), signature_pad (MIT); their licence notices stay in the module. The build refuses any other licence.
Reference
| Control | Element | Value | Uses | Bundled libraries |
|---|---|---|---|---|
| Address | <ut-address> | { formatted, street, city, region, postcode, country, country_code, lat, lng, place_id } | lookup | lit 3.3.3 (BSD-3-Clause) |
| Chart | <ut-chart> | { label, value, series } | lookup, reports | @kurkle/color 0.3.4 (MIT), chart.js 4.5.1 (MIT), lit 3.3.3 (BSD-3-Clause) |
| Info card | <ut-info-card> | string | — | lit 3.3.3 (BSD-3-Clause) |
| Likert scale | <ut-likert> | json | — | lit 3.3.3 (BSD-3-Clause) |
| Map | <ut-map> | { lat, lng } | network | leaflet 1.9.4 (BSD-2-Clause), lit 3.3.3 (BSD-3-Clause) |
| PDF viewer | <ut-pdf-viewer> | [{ id, name, size, type }] (Attachments) | files | lit 3.3.3 (BSD-3-Clause), pdfjs-dist 5.4.624 (Apache-2.0) |
| Progress | <ut-progress> | number | — | lit 3.3.3 (BSD-3-Clause) |
| Rating | <ut-rating> | number | — | lit 3.3.3 (BSD-3-Clause) |
| Rich text | <ut-rich-text> | { html, text } | — | lit 3.3.3 (BSD-3-Clause) |
| Saved report | <ut-saved-report> | json | reports | @kurkle/color 0.3.4 (MIT), chart.js 4.5.1 (MIT), lit 3.3.3 (BSD-3-Clause) |
| Signature | <ut-signature> | [{ id, name, size, type }] (Attachments) | files | lit 3.3.3 (BSD-3-Clause), signature_pad 5.1.4 (MIT) |
| Slider | <ut-slider> | number | — | lit 3.3.3 (BSD-3-Clause) |
| Table | <ut-table> | array | — | lit 3.3.3 (BSD-3-Clause) |
Address
<ut-address> 1.0.0 — Address search with suggestions from Google Places (key kept on the server) or a data table, saved as street, city, postcode, country and coordinates.
Value: { formatted, street, city, region, postcode, country, country_code, lat, lng, place_id } (type json). Read-only views show {{value.formatted}}.
Capabilities: lookups (the field's lookup source, called by the server).
Keyboard: Type at least three characters to search. Down / Up move through the suggestions, Enter chooses one, Escape closes the list (a second Escape clears the field). "Enter the address manually" shows separate inputs.
| Property | Type | Default | |
|---|---|---|---|
Placeholder (placeholder) | string | Start typing an address | |
Search after (characters) (min_chars) | number | 3 | |
Wait after typing (ms) (debounce_ms) | number | 350 | How long to wait after the last keystroke before searching. |
Allow manual entry (allow_manual) | boolean | yes | Shows "Enter the address manually": street, city, region, postcode and country inputs. |
Show address details (show_details) | boolean | no | Shows the parsed street, city, region, postcode, country and coordinates under the field. |
Country hint (country_hint) | string | — | Appended to every search as ", <country>" (e.g. New Zealand) to favour addresses in that country. |
Setup after installing: (1) In Google Cloud, enable Places API (New) and create an API key restricted to that API. It is a server key: the browser never sees it, so do not add a website (referrer) restriction. (2) Install the package and paste the key when asked: it is stored in the "Google Places API (New)" integration. The "Places text search (addresses)" API reference and the "Address and location (sample)" form come with it. (3) Use the sample form, or drag Address onto your own form and set its lookup source: API reference "Places text search (addresses)", query = {{search}}, results path places, display fields formattedAddress, addressComponents and location, value field id. (4) Optionally set a country hint (e.g. New Zealand), the placeholder and whether manual entry and the parsed details are shown. Add a Map control with its Location mapped to this field to show the address on a map.
Chart
<ut-chart> 1.0.0 — Bar, line, area, pie or doughnut chart of static data, another field's rows, lookup results or a saved report, with keyboard-navigable points.
Value: { label, value, series } (type json). Read-only views show {{value.label}}: {{value.value}}.
Capabilities: lookups (the field's lookup source, called by the server); saved reports (the report the designer picks, run as the viewer).
Keyboard: Tab to the chart; Left / Right move through the points (Up / Down change series), Home / End jump to the first / last, Enter selects the point when points are selectable, Escape leaves the point. The 'Show data table' button shows every value in a table.
Context (other fields it reads, mapped in the designer): data (Data).
| Property | Type | Default | |
|---|---|---|---|
Chart title (chart_title) | string | — | Shown above the chart and used as the data table's caption. |
Chart type (chart_type) | bar / horizontal-bar / line / area / pie / doughnut | bar | |
Data source (source) | static / context / lookup / report | static | |
Static data (data) | json | [object Object], [object Object], [object Object], … | For Static data: [{"label":"Jan","value":12}, …] or {"labels":[…],"datasets":[{"label":"Sales","data":[…]}]}. |
Saved report (report_id) | string | — | For Saved report: the report's id (open it in Reports — the id is in the address bar). People see only what they can see in Reports. |
Lookup query (lookup_query) | string | — | For Lookup source: the search text sent to the lookup (empty = everything). |
Label field (label_field) | string | — | The row field (or report column key) for the labels. Defaults to the first text field. |
Value field (value_field) | string | — | The row field for the values. Defaults to the first numeric field. |
Series fields (series_fields) | string[] | — | Several numeric fields, one series each (instead of Value field). |
Group by label (aggregate) | none / sum / count / average | none | |
Show legend (show_legend) | boolean | yes | Shown for pie / doughnut charts and when there is more than one series. |
Stack series (stacked) | boolean | no | |
Colours (colors) | string[] | — | Series / slice colours (#hex). Defaults to the theme's primary colour plus accessible companions for light and dark mode. |
Chart height (px) (height) | number | 280 | |
Selectable points (selectable) | boolean | no | Clicking a point (or Enter on it) makes it the field's value: { label, value, series }. |
Setup after installing: (1) Install the package: Chart appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Chart onto a form and choose the chart type and the data source in the properties panel. (3) Static data: paste the data as JSON. Another field: map the Data context entry to the field with the rows (e.g. an editable table) and set Label field / Value field. (4) Lookup source: set the field's lookup source (a data table or API reference) with Min characters 0, then Label field / Value field to the lookup's columns. (5) Saved report: set Saved report (report_id) to the report's id. People only see the report if it is theirs or shared with them.
Info card
<ut-info-card> 1.0.0 — Info, success, warning, error or neutral callout that can show up to six other form values, formatted for the reader, as text or a key / value list.
Value: string (type string). Read-only views show {{props.card_title}}.
Capabilities: none — fully sandboxed.
Keyboard: Display only: nothing to operate. A note (warning and error cards are a polite status region) named by its title, with the variant read first ("Warning: …"); the icon is decorative.
Context (other fields it reads, mapped in the designer): field1 (Field 1), field2 (Field 2), field3 (Field 3), field4 (Field 4), field5 (Field 5), field6 (Field 6).
| Property | Type | Default | |
|---|---|---|---|
Variant (variant) | info / success / warning / error / neutral | info | |
Title (card_title) | string | Before you approve | May use {{field1}} … {{field6}}. |
Text (body) | text | Check the amount against the budget for this cost centre. | Plain text; line breaks are kept. {{field1}} … {{field6}} are replaced by the mapped fields' values. |
Layout (layout) | callout / key-value | callout | |
Field labels (labels) | string[] | — | For the key / value layout: the labels of field 1 … field 6, in order. |
Value format (format) | auto / plain | auto | |
Show icon (show_icon) | boolean | yes |
Setup after installing: (1) Install the package: Info card appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Info card onto a form, choose the variant and type the title and text. (3) To show other values, map Field 1 … Field 6 (context) to fields of the form and use {{field1}} … {{field6}} in the title or text, or switch the layout to Key / value and give each field a label.
Likert scale
<ut-likert> 1.0.0 — Survey matrix that rates several statements on one agree, satisfaction, frequency or custom scale, with optional N/A. Cards on phones.
Value: json (type json). Read-only views show the value as json.
Capabilities: none — fully sandboxed.
Keyboard: Each statement is a radio group with one Tab stop: Tab / Shift+Tab move between statements, the arrow keys choose within a statement (Home / End jump to the ends), Space or Enter chooses the focused point, Delete clears the statement's answer.
| Property | Type | Default | |
|---|---|---|---|
Statements (statements) | string[] | The request was handled quickly, The staff were helpful and courteous, I would recommend us to a colleague | One row each. The answer is stored under a key made from the statement (lowercase, other characters become _), so renaming a statement changes its key. |
Scale (scale) | agree5 / agree7 / satisfaction5 / frequency5 / custom | agree5 | |
Custom scale labels (scale_labels) | string[] | — | For a custom scale: 2 to 10 labels, lowest first. The answer is the label's position (1 = first). |
Offer N/A (show_na) | boolean | no | Adds a Not applicable column, stored as 0. |
Every statement must be answered (all_required) | boolean | no |
Setup after installing: (1) Install the package: Likert scale appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Likert scale onto a form, type the statements (one per line) and choose the scale. (3) Optionally offer N/A and require every statement. Keep statement wording stable once responses come in: the answer keys are made from the text.
Map
<ut-map> 1.0.0 — Shows an address or coordinates from another field on an OpenStreetMap map, and can let people drop a pin to record a location.
Value: { lat, lng } (type json). Read-only views show {{value.lat}}, {{value.lng}}.
Capabilities: network (declared hosts, after an admin approves them). Hosts: tile.openstreetmap.org.
Keyboard: Tab to the map: arrow keys pan, + / - zoom. With pin dropping on, Enter or Space drops the pin at the centre (a crosshair marks it). The Latitude and Longitude inputs set the pin exactly; Clear removes it.
Context (other fields it reads, mapped in the designer): location (Location).
| Property | Type | Default | |
|---|---|---|---|
Map style (tiles) | auto / osm | auto | |
Zoom (zoom) | number | 15 | 1 shows the world, 15 a few streets, 19 a building. |
Map height (px) (height) | number | 320 | |
Let people drop a pin (pick) | boolean | no | Click, tap or press Enter to place the pin; the field stores its coordinates. Off: the map only shows the location. |
Show coordinates (show_coordinates) | boolean | yes | Latitude and longitude under the map (editable when people can drop a pin). |
Setup after installing: (1) Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Approve the tile hosts in Extensibility → Form controls → Map: tile.openstreetmap.org. Until then the map shows the pin on a plain background and says which host to approve. (3) Drag Map onto a form and map its Location to the field it should show (for example an Address field), or leave it unmapped and turn on "Let people drop a pin". (4) Choose the map style, zoom, height and whether coordinates are shown in the properties panel.
PDF viewer
<ut-pdf-viewer> 1.0.0 — Shows a PDF inside the form, from an Attachments field or an upload, page by page with zoom, rotation and the text read out to screen readers.
Value: [{ id, name, size, type }] (Attachments) (type files). Read-only views show the value as list.
Capabilities: files (uploads to Attachments; reads files the form already has).
Keyboard: Tab to the toolbar buttons (previous / next page, zoom out / in, fit to width, rotate) and to the page. On the page: Page Down / Page Up turn pages (after scrolling to the end of a zoomed page), Home / End go to the first / last page, + / - zoom, 0 fits the width. Each page is an image named "Page 2 of 7, file name", followed by the page's text for screen readers.
Context (other fields it reads, mapped in the designer): document (Document).
| Property | Type | Default | |
|---|---|---|---|
Allow uploading a PDF (allow_upload) | boolean | no | Shows a Choose a PDF button; the uploaded PDF becomes this field's value and is shown instead of the mapped document. |
Setup after installing: (1) Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag PDF viewer onto a form and map its Document context to an Attachments field of the form (the first PDF in it is shown). (3) Optionally turn on Allow uploading a PDF so people can choose a PDF themselves; the uploaded file is stored as this field's value.
Progress
<ut-progress> 1.0.0 — Show progress as a bar, a ring or named steps from two fields of the form or fixed values, with warning and on-track colours.
Value: number (type number). Read-only views show the value as text.
Capabilities: none — fully sandboxed.
Keyboard: Display only: nothing to operate. Bar and ring are a progressbar with the label and percentage as aria-valuetext; Steps is an ordered list with the current step marked aria-current="step" ("Step 2 of 5: Review").
Context (other fields it reads, mapped in the designer): current (Current), total (Total).
| Property | Type | Default | |
|---|---|---|---|
Style (appearance) | bar / ring / steps | bar | |
Current (current_value) | number | — | Used when the Current context entry is not mapped. |
Total (total_value) | number | 100 | Used when the Total context entry is not mapped. For Steps, the number of steps. |
Step names (steps) | string[] | — | For the Steps style, in order (e.g. Submitted, Review, Approval, Done). Current may be the step number (1 = first) or its name. |
Unit (unit) | string | — | e.g. tasks, hours, $ |
Show percentage (show_percentage) | boolean | yes | |
Label (label_template) | string | — | Text with {{current}}, {{total}}, {{unit}}, {{percent}}, {{remaining}}, {{step}}. Default: {{current}} of {{total}} {{unit}}. |
Warn below (%) (warn_below) | number | — | Below this percentage the progress uses the error colour and says Needs attention. |
Good from (%) (good_above) | number | — | From this percentage the progress uses the success colour and says On track. |
Setup after installing: (1) Install the package: Progress appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Progress onto a form and choose the style (bar, ring or steps). (3) Map the Current (and optionally Total) context entries to fields of the form, or type Current / Total values. For steps, list the step names. (4) Optionally set the unit, the label, and the Warn below / Good from thresholds.
Rating
<ut-rating> 1.0.0 — Star, heart or circle rating from 1 to 10 with optional labels such as Poor to Excellent, for satisfaction scores and quality checks.
Value: number (type number). Read-only views show {{value}} of {{props.max}}.
Capabilities: none — fully sandboxed.
Keyboard: Tab to the rating; Left / Right (or Up / Down) change it; Home / End jump to the lowest / highest; Delete or Backspace clears it when clearing is allowed.
| Property | Type | Default | |
|---|---|---|---|
Number of symbols (max) | number | 5 | |
Symbol (symbol) | star / heart / circle | star | |
Size (size) | small / medium / large | medium | |
Labels (labels) | string[] | — | One label per value, lowest first (e.g. Poor, Fair, Good, Very good, Excellent). Shown next to the symbols and read by screen readers. |
Allow clearing (allow_clear) | boolean | yes | Clicking the selected symbol again, or pressing Delete, removes the rating. |
Symbol colour (color) | color | — | Defaults to the form theme's primary colour. |
Setup after installing: (1) Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Rating onto a form, then set the number of symbols, the symbol and the labels in the properties panel.
Rich text
<ut-rich-text> 1.0.0 — A rich-text editor with bold, italic, underline, headings, lists, quotes and links, a character counter and strict sanitising of everything pasted in.
Value: { html, text } (type json). Read-only views show {{value.text}}.
Capabilities: none — fully sandboxed.
Keyboard: Tab to the formatting toolbar (Left / Right / Home / End move between buttons, Enter or Space applies one), Tab again to the text. In the text: Ctrl/Cmd+B, I, U for bold, italic, underline; Ctrl/Cmd+K adds a link (Enter applies, Escape cancels); Ctrl/Cmd+Z undoes, Ctrl/Cmd+Shift+Z redoes.
| Property | Type | Default | |
|---|---|---|---|
Placeholder (placeholder) | string | — | Shown in the empty editor, e.g. Describe the problem. |
Maximum characters (max_length) | number | 5000 | Counted on the plain text. A counter shows the length; longer text is refused. |
Toolbar (toolbar) | full / basic | full | |
Minimum height (px) (min_height) | number | 160 |
Setup after installing: (1) Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Rich text onto a form, then set the placeholder, the maximum length, the toolbar (full or basic) and the minimum height in the properties panel. (3) Anywhere you show the stored HTML outside UserTasks (an email template, another app), sanitise it again on that side; or use the plain-text copy (value.text).
Saved report
<ut-saved-report> 1.0.0 — Show a saved report inside a form as a sortable, paginated table or chart, with the permissions of the person filling it in. Optionally pick a row.
Value: json (type json). Read-only views show the value as json.
Capabilities: saved reports (the report the designer picks, run as the viewer).
Keyboard: Tab through the view switch, Refresh, the column headers (Enter or Space sorts; again reverses), the row select buttons (when rows are selectable; Enter or Space picks / unpicks) and Previous / Next. The table scrolls sideways inside its own frame on narrow screens.
| Property | Type | Default | |
|---|---|---|---|
Saved report (report_id) | string | — | The report's id (open it in Reports — the id is in the address bar). People see only what they can see in Reports: their own or shared reports, with their permissions. |
View (view) | auto / table / chart | auto | |
Rows per page (page_size) | number | 10 | |
Maximum rows (max_rows) | number | 100 | Rows fetched from the report (at most 1,000). A note says when there are more. |
Chart height (px) (height) | number | 280 | |
Show the report's name (show_title) | boolean | yes | |
Selectable rows (selectable) | boolean | no | Picking a row makes that row (an object of its columns) the field's value. Otherwise the field stays empty. |
Setup after installing: (1) Install the package: Saved report appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Open the report in Reports and copy its id from the address bar. (3) Drag Saved report onto a form and paste the id into Saved report (report_id). Share the report with the people who fill in the form — they only see reports that are theirs or shared with them. (4) Optionally choose the view, rows per page and Selectable rows.
Signature
<ut-signature> 1.0.0 — Sign with a finger, pen or mouse, or type a name. The signature is saved as a trimmed PNG with the task's attachments.
Value: [{ id, name, size, type }] (Attachments) (type files). Read-only views show the value as list.
Capabilities: files (uploads to Attachments; reads files the form already has).
Keyboard: Tab to the drawing area and the buttons. Keyboard users choose "Type your name instead", type their name and press Enter (or "Use this signature"). Undo removes the last stroke, Clear empties the pad, "Sign again" replaces a saved signature.
| Property | Type | Default | |
|---|---|---|---|
Ink colour (pen_color) | color | — | Defaults to dark ink on a white background, or the theme's text colour on a transparent one. |
Background (background) | white / transparent | white | The saved image's background. White prints and previews well everywhere. |
Pad height (px) (height) | number | 180 | |
Allow a typed signature (allow_typed) | boolean | yes | Shows "Type your name instead": the name is drawn in a handwriting font. This is the keyboard-accessible way to sign. |
Prompt (prompt) | string | Sign above | Text under the signing line. |
Setup after installing: (1) Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Signature onto a form. It uses the form's file storage (the same limits as an Attachments field), so no other setup is needed. (3) Optionally set the ink colour, background, pad height, prompt and whether a typed signature is allowed in the properties panel.
Slider
<ut-slider> 1.0.0 — A range slider for numbers with a value bubble, mark labels such as Low, Medium and High, a unit or currency prefix and an optional exact-entry box.
Value: number (type number). Read-only views show {{value}}.
Capabilities: none — fully sandboxed.
Keyboard: Tab to the slider; Left / Right (or Up / Down) move one step, Page Up / Page Down move further, Home / End jump to the minimum / maximum. Enter or Space accepts the starting position while the field is still empty. With the number box, Tab again to type an exact value.
| Property | Type | Default | |
|---|---|---|---|
Minimum (min) | number | 0 | |
Maximum (max) | number | 100 | |
Step (step) | number | 1 | The slider moves in steps of this size (1, 5, 0.5, …). |
Prefix (value_prefix) | string | — | Shown before the value, e.g. $. |
Suffix (unit) (value_suffix) | string | — | Shown after the value, e.g. % or kg. |
Show value bubble (show_value) | boolean | yes | |
Mark labels (marks) | string[] | — | Labels spread evenly under the track, lowest first (e.g. Low, Medium, High). Without marks the minimum and maximum are shown. |
Show number box (show_input) | boolean | no | A small number box beside the slider for typing an exact value. |
Starting position (default_value) | number | — | Where the slider starts. The field stays empty until the person moves it (or presses Enter). |
Setup after installing: (1) Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Slider onto a form, then set the minimum, maximum and step, the prefix or suffix, and (optionally) the mark labels and starting position in the properties panel.
Table
<ut-table> 1.0.0 — An editable table for line items, attendees or readings, with typed columns, per-cell validation, totals and spreadsheet-style keyboard editing.
Value: array (type array). Read-only views show the value as json.
Capabilities: none — fully sandboxed.
Keyboard: Tab into the table (one stop). Arrow keys move between cells, Home / End to the row's ends (Ctrl+Home / End to the table's), Enter, F2 or typing edits a cell; Enter saves and moves down, Shift+Enter up, Escape cancels; Tab / Shift+Tab move cell by cell and leave the table at its ends. Delete clears a cell, Space or Enter toggles a tick box, Ctrl+Enter adds a row; each row's Delete row button is the last cell of the row.
| Property | Type | Default | |
|---|---|---|---|
Columns (columns) | json | [object Object], [object Object], [object Object] | A list of columns: { "key", "label", "type": text | number | currency | date | select | checkbox, "required", "options" (select), "min" / "max" (number, currency), "width" (px) }. |
Minimum rows (min_rows) | number | 0 | |
Maximum rows (max_rows) | number | 50 | |
Allow adding rows (allow_add) | boolean | yes | |
Allow deleting rows (allow_delete) | boolean | yes | |
Show totals (show_totals) | boolean | no | A footer row summing the number and currency columns. |
Currency (currency) | string | USD | ISO 4217 code for currency columns (USD, EUR, NZD, …). |
Starting rows (default_rows) | json | — | Rows shown before the person edits (a list of objects keyed by column key). Not stored until the table is edited. |
Setup after installing: (1) Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom. (2) Drag Table onto a form and define the columns in the properties panel (key, label, type, required, options, min / max, width). (3) Set the row limits, whether people can add or delete rows, the currency for currency columns, and (optionally) the starting rows and the totals row.
Sources and contributing
The sources are in the repository's gallery/controls folder — one folder per control (manifest.json, src/, gallery.json, README.md, the built module in dist/). npm run build there bundles them, npm test runs the contract tests in headless Chrome (render, light and dark, read-only, axe-core WCAG 2.1 AA, 360 px mobile, keyboard and values), and npm run gallery:build packages and signs them with the rest of the gallery.