Form Widget
The Form Widget embeds a complete Atlas Form inside an App Studio Pane — bringing Atlas Forms' rich field library and validation engine into App Studio applications.
How It Works
The Form Widget is a bridge between App Studio and Atlas Forms. When placed in a Pane, it loads the specified Atlas Form by formId and renders it using Atlas Forms' own form player. The form handles its own field layout, validation, and step navigation — App Studio just provides the container.
Form Widget Placed in Pane
You place a Form Widget in a Pane and set formId to the target Atlas Form's ID (e.g., "lead-create-form").
Form Pre-fill (Optional)
Set prefillData to pass initial field values to the form — typically from route params or app variables: { "leadId": "{{ route.id }}" }.
User Fills and Submits
The Atlas Form player renders the form. The user fills fields and clicks Submit. Atlas Forms handles validation — invalid fields show errors, form stays open.
onSubmit / onValidationError Actions Fire
On successful submit, the Form Widget fires its onSubmit event. You configure what App Studio does next: navigate to a success page, show a notification, refresh a DataGrid.
Form Widget Configuration
// Form Widget placement config
{
"formId": "lead-create-form", // Atlas Form ID (required)
"prefillData": { // Pre-populate form fields
"leadId": "{{ route.id }}",
"assignedTo": "{{ context.userId }}"
},
"mode": "edit", // "edit" | "view" (read-only mode)
"hideSubmitButton": false, // Let Atlas Form show its own submit
"submitLabel": "Save Lead" // Override the form's submit button label
}
Events and Actions
| Event | When It Fires | Common Action |
|---|---|---|
onSubmit | Form submitted successfully (passed Atlas Forms validation) | Navigate to success page, show toast notification |
onValidationError | Form submitted with validation errors | Set variable to show an error banner |
onCancel | User clicks the Cancel button (if configured in Atlas Form) | Navigate back to list page |
Read-Only (View) Mode
Setting mode: "view" renders the Atlas Form in read-only mode — all fields are displayed as non-editable text. This is useful for showing a form's data to users who should see but not edit the values:
// Read-only form widget for detail view
{
"formId": "lead-detail-form",
"mode": "view",
"prefillData": {
"leadId": "{{ route.id }}"
}
}
The Form Widget does not duplicate Atlas Forms' logic — it embeds the actual Atlas Forms player. This means changes to the Atlas Form definition (adding fields, changing validation) are immediately reflected in all App Studio apps that embed that form, without any changes needed in App Studio.