Custom web components
Upload reusable standards-based controls with isolated JavaScript, CSS, typed props, emitted events, demo values, and a unique custom-element tag.
Feature guide
Extensibility
Build governed custom web components and code-backed workflow activities that behave like native UserTasks capabilities.
On this page
Complete feature description
Understanding extensibility in UserTasks
Extensibility lets teams add governed capabilities when a native control or workflow activity does not cover a specialized requirement. Extensions remain tenant-scoped assets with permissions, status, versions, project relationships, import and export, readiness guidance, and dependency-aware deletion.
Custom web components are standards-based browser controls used in Forms and Application Pages. Their manifest declares configurable props, events, and slots; demo props drive preview; and the component emits values through normal DOM events so rules, bindings, and submissions can treat it like a native control.
Custom workflow activities package deterministic JavaScript as typed workflow steps. A manifest declares inputs and outputs, while the runtime supplies workflow context and helpers for expressions, variables, logs, UUIDs, and timestamps. Active activities appear in the workflow palette and preserve node-level execution history.
When to use this feature
- A domain-specific input or visualization is not available as a native form/page component.
- Organization-specific deterministic logic is duplicated across several workflows.
- An extension needs reusable typed configuration rather than pasted one-off code.
- Custom capabilities must remain governed, portable, and visible to designers.
What you can build
- Specialized data-entry controls
- Branded interactive widgets
- Risk gauges and scorecards
- Domain calculations and validators
- Reusable workflow transformations
- Project-specific extension libraries
Production design notes
- Prefer native features when they satisfy the requirement because they receive platform updates automatically.
- Keep custom-element tags and workflow-activity keys stable after designers use them.
- Validate and escape untrusted values, preserve accessibility, and avoid global browser side effects.
- Make workflow outputs deterministic and JSON-serializable, and test extension upgrades against every consuming asset.
Core concepts
Workflow activities
Create code-backed workflow steps with typed input and output manifests, deterministic execution, logging, variables, and runtime helpers.
Native designer integration
Active web components appear in form and page builders; active activities appear in the workflow palette and configuration panel.
Governance and portability
Tenant permissions, status, versions, project links, import/export, deletion checks, and MCP tools govern extension assets.
Ready-to-use starters
Download extensibility templates
Each ZIP includes working source, a typed manifest, sample values, and a README explaining how to customize, upload, test, and activate the extension.
Custom web component starter
A responsive Shadow DOM input control with typed props, a bubbling change event, preview values, accessibility guidance, and full source.
component.jsstyles.cssmanifest.jsondemo-props.jsonREADME.mdWorkflow activity starter
A score-classification activity showing typed inputs and outputs, validation, runtime logging, helper usage, and deterministic results.
workflow-activity.jsmanifest.jsonREADME.mdActions and capabilities
What designers and operators can do in this product area.
Extensibility actions
The main operations available in Extensibility.
Extensibility actions
Download a starter template
Choose a complete web-component or workflow-activity ZIP with source, manifest, example values, and setup instructions.
Example: Create a risk-gauge web component for forms and a reusable score-classification activity for workflows.
Configuration inputs
- Permission to view and edit the relevant extensibility assets.
- The target web component or workflow activity, including its stable tag/key, source, manifest, preview inputs, status, and version.
- Any required mappings, recipients, filters, variables, permissions, or lifecycle settings shown by the designer.
How to use it
- 1.Open Extensibility from the main navigation.
- 2.Create or open the relevant asset and choose “Download a starter template”.
- 3.Complete the required fields, map dynamic values, and review access to every referenced asset.
- 4.Use preview, test, or validation where available; correct errors before publishing or executing.
- 5.Run the action and inspect its status, output, history, or audit record.
Expected results
- The active extension appears in its native designer palette with typed configuration and governed tenant access.
- Failures remain visible with enough context to correct configuration or retry safely.
Extensibility actions
Create a web component
Define a unique tag, JavaScript bundle, optional CSS, typed props, events, slots, preview values, and presentation guidance.
Example: Create a risk-gauge web component for forms and a reusable score-classification activity for workflows.
Configuration inputs
- Permission to view and edit the relevant extensibility assets.
- The target web component or workflow activity, including its stable tag/key, source, manifest, preview inputs, status, and version.
- Any required mappings, recipients, filters, variables, permissions, or lifecycle settings shown by the designer.
How to use it
- 1.Open Extensibility from the main navigation.
- 2.Create or open the relevant asset and choose “Create a web component”.
- 3.Complete the required fields, map dynamic values, and review access to every referenced asset.
- 4.Use preview, test, or validation where available; correct errors before publishing or executing.
- 5.Run the action and inspect its status, output, history, or audit record.
Expected results
- The active extension appears in its native designer palette with typed configuration and governed tenant access.
- Failures remain visible with enough context to correct configuration or retry safely.
Extensibility actions
Attach a component to a form or page
Activate the component, add it from the Extensibility palette, configure props, and map its value or events into rules.
Example: Create a risk-gauge web component for forms and a reusable score-classification activity for workflows.
Configuration inputs
- Permission to view and edit the relevant extensibility assets.
- The target web component or workflow activity, including its stable tag/key, source, manifest, preview inputs, status, and version.
- Any required mappings, recipients, filters, variables, permissions, or lifecycle settings shown by the designer.
How to use it
- 1.Open Extensibility from the main navigation.
- 2.Create or open the relevant asset and choose “Attach a component to a form or page”.
- 3.Complete the required fields, map dynamic values, and review access to every referenced asset.
- 4.Use preview, test, or validation where available; correct errors before publishing or executing.
- 5.Run the action and inspect its status, output, history, or audit record.
Expected results
- The active extension appears in its native designer palette with typed configuration and governed tenant access.
- Failures remain visible with enough context to correct configuration or retry safely.
Extensibility actions
Create a workflow activity
Define a stable key, source function, typed inputs and outputs, demo inputs, icon, color, version, and setup guidance.
Example: Create a risk-gauge web component for forms and a reusable score-classification activity for workflows.
Configuration inputs
- Permission to view and edit the relevant extensibility assets.
- The target web component or workflow activity, including its stable tag/key, source, manifest, preview inputs, status, and version.
- Any required mappings, recipients, filters, variables, permissions, or lifecycle settings shown by the designer.
How to use it
- 1.Open Extensibility from the main navigation.
- 2.Create or open the relevant asset and choose “Create a workflow activity”.
- 3.Complete the required fields, map dynamic values, and review access to every referenced asset.
- 4.Use preview, test, or validation where available; correct errors before publishing or executing.
- 5.Run the action and inspect its status, output, history, or audit record.
Expected results
- The active extension appears in its native designer palette with typed configuration and governed tenant access.
- Failures remain visible with enough context to correct configuration or retry safely.
Extensibility actions
Use an activity in a workflow
Activate the activity, drag it from the workflow palette, map its inputs, and use its named outputs downstream.
Example: Create a risk-gauge web component for forms and a reusable score-classification activity for workflows.
Configuration inputs
- Permission to view and edit the relevant extensibility assets.
- The target web component or workflow activity, including its stable tag/key, source, manifest, preview inputs, status, and version.
- Any required mappings, recipients, filters, variables, permissions, or lifecycle settings shown by the designer.
How to use it
- 1.Open Extensibility from the main navigation.
- 2.Create or open the relevant asset and choose “Use an activity in a workflow”.
- 3.Complete the required fields, map dynamic values, and review access to every referenced asset.
- 4.Use preview, test, or validation where available; correct errors before publishing or executing.
- 5.Run the action and inspect its status, output, history, or audit record.
Expected results
- The active extension appears in its native designer palette with typed configuration and governed tenant access.
- Failures remain visible with enough context to correct configuration or retry safely.
Extensibility actions
Import, export, and version
Move portable JSON assets between environments and retain stable tags, keys, and contracts across versions.
Example: Create a risk-gauge web component for forms and a reusable score-classification activity for workflows.
Configuration inputs
- Permission to view and edit the relevant extensibility assets.
- The target web component or workflow activity, including its stable tag/key, source, manifest, preview inputs, status, and version.
- Any required mappings, recipients, filters, variables, permissions, or lifecycle settings shown by the designer.
How to use it
- 1.Open Extensibility from the main navigation.
- 2.Create or open the relevant asset and choose “Import, export, and version”.
- 3.Complete the required fields, map dynamic values, and review access to every referenced asset.
- 4.Use preview, test, or validation where available; correct errors before publishing or executing.
- 5.Run the action and inspect its status, output, history, or audit record.
Expected results
- The active extension appears in its native designer palette with typed configuration and governed tenant access.
- Failures remain visible with enough context to correct configuration or retry safely.
Potential use cases
Patterns you can adapt to your own operating model.
Specialized form control
Capture a domain-specific value that native controls do not represent while preserving form rules and workflow mappings.
Download web starter
Implement control
Upload and preview
Activate
Add to form
Reusable workflow calculation
Package deterministic organization-specific logic as a typed activity instead of duplicating expressions across workflows.
Download activity starter
Define contract
Implement and validate
Activate
Map inputs and outputs
Project extension library
Manage reusable branded components and workflow logic as governed project assets.
Create extension assets
Link to project
Export versions
Import to environment
Validate dependencies