FormAction

Storybook

Browse the props, controls and all the stories of FormAction in Storybook.

The FormAction component renders the settings form of a Form.io action (save, email, webhook, etc.). It takes the action information returned by the Form.io server (actionInfo), renders its settingsForm and pre-fills it with the action defaults merged with the optional submission. Components of type resourcefields are converted into a select loading the resources of the project.

Usage

import { FormAction } from "@tsed/react-formio/organisms/form/actions/FormAction";

export function EditAction({ actionInfo, action }) {
  return (
    <FormAction
      actionInfo={actionInfo}
      submission={action}
      options={{ template: "tailwind", iconset: "lu" }}
      onSubmit={(submission) => console.log(submission.data)}
    />
  );
}

Where actionInfo looks like:

import type { ActionType } from "@tsed/react-formio";

const actionInfo: Partial<ActionType> = {
  name: "save",
  title: "Save Submission",
  description: "Saves the submission into the database.",
  priority: 10,
  defaults: {
    handler: ["before"],
    method: ["create", "update"],
    priority: 10,
    name: "save",
    title: "Save Submission"
  },
  settingsForm: {
    components: [
      { type: "textfield", input: true, label: "Title", key: "title" },
      { type: "button", input: true, label: "Save Action", key: "submit", action: "submit", theme: "primary" }
    ]
  }
};

Props

Name	Type	Default	Description
actionInfo	Partial<ActionType>		Information about the action, including its defaults and its settingsForm.
submission	Partial<SubmissionType>		Action values used to fill the form. They override the values of actionInfo.defaults.
onSubmit	(submission: SubmissionType<ActionType>) => void		Called when the settings form is submitted.
options	FormOptions		Options passed to the underlying Form (template, iconset, i18n, etc.).
children	ReactNode		Optional content rendered above and below the form.

Examples

Save action

Configuration of the "Save Submission" action.

Live exampleOpen in Storybook ↗

Email action

Configuration of the "Email" action.

Live exampleOpen in Storybook ↗

Webhook action

Configuration of the "Webhook" action.

Live exampleOpen in Storybook ↗