onCustomAction()

Overview#

onCustomAction is a <Feathery.Form> prop and callback function to access and modify form state when a button that is configured to trigger a custom action is clicked. When a custom action is performed, step navigation is not triggered. If you want to trigger navigation, consider configuring the skip action. This function can be asynchronous.

Usage#

You can use onCustomAction to apply custom form navigation, render a custom component, set form state, and more.

import { init, Form } from 'feathery-react';
function App() {
// Initialize Feathery to Peter
init('adminAPIKey', 'peter@feathery.io');
// Show the `onboarding` Feathery form
return <Form
formKey='onboarding'
// Route to a specific step
onCustomAction={(context) => {
context.setStep("Custom Step");
}}
/>
}

Context Properties#

KeyTypeDescription
stepNamestringThe unique ID of the step.
userIdstringThe unique ID of the current user.
triggertriggerData objectThe info of the custom action trigger.
setProgressfunctionIf a progress bar exists on the step, its progress will be set to the value passed in (0 - 100). If null is passed, the progress bar will default to its original value.
setStepfunctionIf you want to reroute the user to a different step, pass setStep the ID of the new step to route to. For example, setStep('new-step')
setValuesfunctionPass in an object of the shape {<fieldKey>: <fieldValue>} to customize internal form state.
setOptionsfunctionPass in an object of the shape {<fieldKey>: [<fieldOption>]} to override the options a user can select for specific fields.

triggerData Object#

KeyTypeDescription
idstringThe ID of the element that triggered the custom action
typestring enumThe type of element that triggered the custom action. Can be button, text, or field.
actionstring enumclick if the trigger was clicked, change if the trigger field's value was changed.
textstringThe text displayed on the element that triggered the custom action.

fieldData Object#

The object keys are unique field ID strings, defined by users in the Feathery dashboard. They map to objects that store additional field-specific information, defined below.

KeyTypeDescription
displayTextoptional stringText to display to your user along with the field
typestring enumField type (e.g. textarea, checkbox, etc.)
valueoptional polymorphicUser-submitted value for this field. null if no submission, Promise<File> if file submission, array of values if repeated.

fieldData Example#

{
age: {
displayText: 'How old are you?',
type: 'integer_field',
value: 21
},
photo_id: {
displayText: 'Upload a photo of your ID',
type: 'rich_file_upload',
value: Promise<File>
}
}

Return Value#

A promise can be optionally returned from this function if it's asynchronous and you want execution to await.