Feathery Docs
HomeCommunityGitHub
  • Platform
    • Quickstart
    • Form Fields
      • Hidden Fields
      • How to Set Field Values
      • Link Fields Across Forms
      • Custom Field Input Format
    • Build Forms
      • Elements
        • Basic
          • Container
          • Button
          • Text
          • Progress Bar
          • Image
          • PDF Viewer
          • Video
          • Table
          • Tooltip
        • Fields
          • Address
            • Street Address Line 1
            • Street Address Line 2
            • City
            • State
            • Country
            • Zip Code
          • Button Group
          • Checkbox
          • Checkbox Group
          • Color Picker
          • Combobox
          • Dropdown
          • Dropdown Multiselect
          • Date Selector
          • Time Selector
          • Email
          • File Upload
          • Matrix
          • Number
          • Password
          • Picture Choice
          • Pin Input
          • Phone Number
          • Radio Group
          • Rating
          • Signature
            • Legally Binding Signatures
          • Slider
          • Social Security Number
          • Text Area
          • Text Field
          • Payment Method
          • URL
        • Custom HTML, JS, CSS, and Iframes
        • Custom Fields
      • Design
        • Reuse styles and elements
          • Styling
          • Assets
        • Alignment and Spacing
        • Sizing Forms and Elements
        • Responsive Layouts
      • Actions
      • Logic
        • Navigate Steps Conditionally
        • Show Elements Conditionally
        • Custom Field Validation
        • Available Conditions
        • Display Dynamic Text
        • Dynamically Repeating Containers
      • Advanced Logic & API Connections
        • Visual Rule Builder
          • Connect to API Action
            • Salesforce API Connector
          • Set Field Value Action
          • Navigate Step Action
          • Set Field Error Action
          • Open URL Action
          • Set Calendly URL Action
        • Javascript Rule Builder
          • API Connections in Code
          • Trigger Integrations from Logic
          • Reusable Logic Configs
        • Examples
          • API Connectors
            • Dynamic dropdown options
            • Dynamic form navigation
            • Pre-fill form from Salesforce
            • Pre-fill form from Hubspot
            • Pre-fill field options from Google Sheets
            • Generate ChatGPT Message
          • Field Validation
            • Complex Field Validation
            • Date and Time Validations
          • Initialize Date Field
          • Dynamically set field placeholder
          • Randomize Field Option Order
          • Update field options based on previous selection
      • Integrations
        • Event Triggers
        • Examples
          • Upload Files to Google Drive
      • Set Up a Staging Environment
    • Launch Forms
      • Embed Your Forms
      • Custom URLs & SEO
      • User Tracking
      • Completion Criteria
      • UTM Parameters
      • Accessibility Standards
      • Analytics
      • A/B Testing
      • Offline Mode
    • Document Intelligence
      • Review Extractions
      • Post Processing
      • Supported Document Types
      • Prompting Guide
      • Bulk Edit Extraction Configuration Guide
      • Examples
        • Investment Report
    • Document Autofill & Signatures
      • Autofill Document Templates
        • PDF Autofill
        • Word Doc Autofill
          • Dynamic Tables
        • Excel Autofill
        • PowerPoint Autofill
        • InDesign Autofill
      • Signature Workflows
        • Signature Notifications
        • Access Signed Documents
        • 21 CFR Part 11 Compliance
      • Export Form Submission PDF
    • Workflows
      • Collaboration
        • Email Invite
        • Start Directly
        • Anonymous Starts
      • Review, Edit & Approve
      • Unique Submission Links
    • Enterprise Compliance
      • Security and Privacy
      • Reliability and Performance
      • Document Management
      • Data Sovereignty
    • International Forms
      • Translate Forms
      • Right to Left (RTL) Support
      • International Form Fields
    • White Label Feathery
      • Build Custom Form Fields
      • Offer Custom Form Templates
      • Custom Dashboard Domain
    • Account Settings
      • Managing Your Team
      • Permissions and User Groups
      • Account Attributes
    • FAQs
      • Account & Billing
  • Guides
    • Verify Submissions & Prevent Spam
    • Build a Login or Verification Flow
      • Connect an Auth Integration
      • Add Auth Methods
        • Email SMS Code
        • Email Magic Link
        • Phone Number Verification
        • Social Logins
          • Google
          • Amazon
          • Apple
          • Bitbucket
          • Coinbase
          • Discord
          • Facebook
          • GitHub
          • GitLab
          • LinkedIn
          • Microsoft
          • Slack
          • Twitch
          • Twitter
      • (Optional) Require Auth for Onboarding Steps
      • (Optional) Add Login Flow to Your Site
        • Feathery-Hosted (Recommended)
        • Embed Login Flow
          • Login Embed Tutorial
    • Build a Payment Flow
      • Connect to Stripe
      • Select Products or Plans
      • Collect Payment Method
      • Purchase Products
    • Send Custom SMS Messages
    • Salesforce Picklist Options
  • Developers
    • React SDK
      • API Guide
        • init()
        • <Form>
          • contextRef
          • Event Handlers
            • onSubmit()
            • onLoad()
            • onChange()
            • onAction()
            • onError()
            • onFormComplete()
            • onView()
          • Custom JSX Components
          • PopupOptions
          • initialLoader
        • getFieldValues()
        • setFieldValues()
        • updateUserId()
        • Login API
          • <LoginForm>
          • useAuthClient()
      • Inline vs Popup Form
    • Javascript SDK
    • Context API
      • Field Object
      • field.setStyles()
      • Deprecated Context API
    • REST API
Powered by GitBook
On this page

Was this helpful?

  1. Developers

Context API

Common API functionality across advanced logic, event handlers, and the context ref.

PreviousJavascript SDKNextField Object

Last updated 1 month ago

Was this helpful?

All of these properties are available via , , and the object. Specific events may also have additional properties unique to them. To see these properties, check out the documentation for the corresponding .

Key
Type
Description

formName

string

The name of the form

formId

string

The ID of the form

userId

string

The ID of the user in the current form session

fields

{ [fieldKey: string]: Field }

getStepProperties

() => { totalSteps: number, stepName: string, previousStepName: string, backgroundColor: hex string, language?: string, hideRules: { elementType: string; rules: {}[] } }

Returns useful information about the current step of the form:

  • Name of current step

  • Name of previous step

  • Background color of step

  • Total steps in form

  • Language code of form if set

  • Conditional hide/show rules on step

goToStep

function

If you want to reroute the user to a different step, pass goToStep the ID of the new step to route to. For example, goToStep('new-step')

setProgress

(number | { progress?: number; segments ?: number }) => {}

Set the amount of the progress bar on the current step.

Pass in either a number from 0 - 100 or if you want a segmented progress bar, you can pass in both the progress amount and the number of segments you want the progress bar to be broken into.

setFormCompletion

function

Pass in a boolean flag to set the user's completion status for this form.

validateStep

(showErrors = true) => { [fieldKey: string]: string | string[] }

Runs default form validation on the current step. Triggers built-in field validation along with custom validation rules specified from the dashboard. Errors will be shown unless false is passed for showErrors.

Returns an error message per field, or an empty string if the field is valid.

isLastStep

() => boolean

Returns True when the current step is the last step the user needs to complete.

isTestForm

() => boolean

Returns True when the current form is in test mode (and not live).

collaborator

Information about the active collaborator.

runIntegrationActions

(actionIds: string[] | string, options: {waitForCompletion?: boolean; multiple?: boolean}) => Promise<{ ok: boolean; error?: string; payload?: any }>

Trigger integration actions that have been set up with the Custom Logic trigger. If multiple actions are passed, they will be run in order.

If waitForCompletion is true (the default), the returned Promise will resolve with data from the last action once it completes. Otherwise, it will return immediately with no data. If multiple is true (defaults to false), you may trigger the same action multiple times for a single submission.

runAIExtraction

(extractionId: string, options: {waitForCompletion?: boolean, pages?: number[], variantId?: string})

Trigger an AI document extraction. If waitForCompletion is true, the returned Promise will resolve with data from the last action once it completes. Otherwise, it will return immediately with no data. If variantId is specified, the extraction will run with that variant applied.

updateUserId

(userId: string, merge?: boolean) => void

setCalendlyUrl

(url: string) => void

openUrl

async (url: string, target?: string) => void

Flush any pending field updates and then opens up a URL. If target isn't specified, it defaults to _blank and opens in a new tab. To open in the same tab, specify _self for the target.

cart

products

A mapping that contains all fields on any of your forms. Its key is the field ID and value is a object. Use the Field object to read/write a field value, options, error message, etc.

Update the user ID of the current session.

If a scheduling flow is embedded in your form, you can dynamically update the calendar by calling this function and passing in a new Calendly URL.

If the Stripe connector is configured and connected, then the purchase cart is available with a number of properties about the cart and items within it. See for details.

{ [product_id: string]: }

If the Stripe connector is configured and connected, then the purchasable products are available as a hash. See for details.

advanced logic
event handlers
contextRef
event handler
Deprecated Context API
Field
Collaborator
Full reference
Calendly
Cart
here
Products
here