Feathery

https://docs.feathery.io/
Admin
Feathery is a no-code workflow automation platform that helps teams automate data intake workflows...
Tokens:68,651
Snippets:772
Trust Score:9.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Expression Operator Syntax Examples

Source: https://docs.feathery.io/platform/build-forms/advanced-logic/visual-rule-builder/set-field-value-action

Examples of how to use various operators within the Feathery expression builder. These demonstrate arithmetic, string concatenation, and comparison logic.

```text
Addition: a + b
Subtraction: a - b
Multiplication: a * b
Division: a / b
Concatenation: firstName + " " + lastName
Equality: a == b
Inequality: a !== b
Comparison: a > b
Comparison: a <= b
```

--------------------------------

### Install Feathery React SDK

Source: https://docs.feathery.io/develop/react

Commands to install the @feathery/react package using common Node.js package managers. Ensure you have a React project set up before running these commands.

```bash
npm install @feathery/react
```

```bash
yarn add @feathery/react
```

--------------------------------

### Implement LoginForm with Routing

Source: https://docs.feathery.io/develop/react/api-guide/login-api/login-form

This example demonstrates how to wrap a React Router application with the LoginForm component. It configures form properties, defines login/logout callbacks, and ensures protected routes are only accessible after successful authentication.

```jsx
<LoginForm
  formProps={{
    formId: 'aBcDeF',
    onSubmit,
    onSkip
  }}
  loginPath='/'
  onLogin={fetchBackendResources}
  onLogout={() => (window.location.href = window.location.origin)}
  >
    <Router>
      <Switch key={window.location.href}>
        <Route exact path='/'>
          <RootPage />
        </Route>
        <Route exact path='/your/path'>
          <YourComponent />
        </Route>
      </Switch>
    </Router>
</LoginForm>
```

--------------------------------

### JavaScript Shared Code Module Example

Source: https://docs.feathery.io/platform/build-forms/advanced-logic/javascript-rule-builder/sharing-code

An example of a JavaScript Shared Code module exporting named constants and functions for colors and fruits. This module can be imported into Logic Rules to access utility functions like randomColor, randomFruit, and chooseColor.

```javascript
// Exports a few helpers for colors and fruits.

const favoriteColors = ['red', 'orange', 'green', 'blue'];
const fruit = ['apple', 'blueberry', 'cherry', 'strawberry'];

export function randomColor() {
  const index = Math.floor(Math.random() * favoriteColors.length);
  return favoriteColors[index];
}

export const randomFruit = () => {
  const index = Math.floor(Math.random() * fruit.length);
  return fruit[index];
};

export function chooseColor(value) {
  const colorIndex = Number(value);

  if (!value || colorIndex < 0 || colorIndex > favoriteColors.length - 1) {
    return '?';
  }

  return favoriteColors[colorIndex];
}
```

--------------------------------

### Initialize and Render Feathery Form (Javascript)

Source: https://docs.feathery.io/develop/javascript

This snippet shows how to install the Feathery JS library from a CDN and then initialize and render a form into a specified HTML element. It requires your SDK key and form ID. The `loginEnabled` flag can be set to true if your form uses Stytch or Firebase for authentication. The `Feathery` object is globally available after script inclusion.

```javascript
<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
<div id='container'></div>
<script>
(() => {
    Feathery.init('<SDKKey>');
    // Change to true if your form uses Stytch or Firebase for login.
    const loginEnabled = false;
    Feathery.renderAt('container', { formId: '<formId>' }, loginEnabled);
})();
</script>
```

--------------------------------

### Initialize Feathery and Render Form with onAction

Source: https://docs.feathery.io/develop/react/api-guide/form/event-handlers/onaction

This snippet demonstrates how to initialize the Feathery SDK and render a form component. It includes an example of using the onAction prop to navigate to a custom step within the form based on user interaction.

```javascript
import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', 'bob@feathery.io');

  // Show the `aBcDeF` Feathery form
  return <Form
    formId='aBcDeF'
    // Route to a specific step
    onAction={(context) => {
      context.goToStep("Custom Step");
    }}
  />
}
```

--------------------------------

### Implement a Complex Color Picker Custom Field

Source: https://docs.feathery.io/platform/build-forms/elements/custom-fields/react-fields

An advanced component example that integrates an external NPM package ('react-colorful'). It showcases how to handle complex state and perform logic within a custom field.

```jsx
import React from 'react';
import { HexColorPicker } from 'react-colorful';

const ColorPicker = ({ value = '#4287f5', onChange }) => {
  function getContrastTextColor(hexBackground) {
    const hex = hexBackground.replace('#', '');
    const r = parseInt(hex.slice(0, 2), 16);
    const g = parseInt(hex.slice(2, 4), 16);
    const b = parseInt(hex.slice(4, 6), 16);
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return luminance > 0.5 ? '#000000' : '#ffffff';
  }

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
        padding: '20px',
        maxWidth: '400px',
        margin: '0 auto'
      }}
    >
      <HexColorPicker color={value} onChange={onChange} />
      <div
        style={{
          padding: '20px',
          borderRadius: '8px',
          backgroundColor: value,
          color: getContrastTextColor(value),
          textAlign: 'center',
          transition: 'all 0.3s ease'
        }}
      >
        {value}
      </div>
    </div>
  );
};

export default ColorPicker;
```

--------------------------------

### POST Request Body Example - Feathery

Source: https://docs.feathery.io/platform/build-forms/advanced-logic/visual-rule-builder/connect-to-api-action

Demonstrates how to define a JSON request body for a POST request in Feathery's API Connector. It shows how to include static string values and dynamically reference form field values using the {{field_name}} syntax.

```json
{ "sample_key" : "{{sample_field_id}}" }
```

--------------------------------

### Field Data Structure Example (JSON)

Source: https://docs.feathery.io/develop/react/api-guide/form/event-handlers/onsubmit

This snippet demonstrates the structure of 'fieldData', a JSON object used to represent form fields. It includes properties like 'displayText', 'type', and 'value', showcasing different field types such as 'integer_field' and 'rich_file_upload'. The 'value' for file uploads is represented as a Promise.

```json
{
  "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>"
  }
}
```

--------------------------------

### Handling Integration Dependencies

Source: https://docs.feathery.io/platform/build-forms/advanced-logic/javascript-rule-builder/trigger-integrations-from-logic

This section explains how to set up dependencies between integration actions, allowing subsequent actions to reference data (like IDs) from previously executed actions. This is particularly useful for creating related records, such as a contact linked to a newly created account.

```APIDOC
## Handling Integration Dependencies

### Description
Set up dependencies between integration actions to ensure data flows correctly. For example, you can link a newly created contact to a previously created Salesforce account by referencing the account's ID.

### Method
Configuration within Feathery's Integration Action setup

### Endpoint
N/A (within Feathery's Integration tab)

### Parameters
#### Linked Object Fields
- **Field Dropdown**: Select fields that link to other objects (e.g., 'Account ID' for a Contact).
- **Options**: Choose `ID - Action <Action_ID>` to reference the ID of an object created by a previous integration action.

### Request Example
(Configuration involves selecting fields and referencing previous action IDs in the Feathery UI)

### Response
N/A (handled internally by Feathery)
```

--------------------------------

### Validate Date Range Comparison

Source: https://docs.feathery.io/platform/build-forms/advanced-logic/examples/field-validation/date-and-time-validations

Compares two date-only fields to ensure the start date is not in the past and the end date occurs after the start date. It utilizes the setError method to provide user feedback when validation fails.

```javascript
const today = new Date(new Date().toISOString().slice(0,10));
if (TripStartDate.value && TripEndDate.value) {
  const tripStartDate = new Date(TripStartDate.value);
  const tripEndDate = new Date(TripEndDate.value);
  if (tripStartDate.getTime() < today.getTime()) {
    TripStartDate.setError('Start date must be on or after today');
  }
  if (tripEndDate.getTime() <= tripStartDate.getTime()) {
    TripEndDate.setError('End date must be on or after Start Date');
  }
}
```

--------------------------------

### Data Hub Actions

Source: https://docs.feathery.io/develop/context-api

Perform create, get, update, or delete operations on Data Hub entries.

```APIDOC
## dataHubAction

### Description
Allows performing operations (create, get, update, delete) on Data Hub entries. Requires Data Hubs to be enabled and form authentication to be active.

### Method
Not Applicable (Function Signature)

### Endpoint
Not Applicable (Function Signature)

### Parameters
#### Function Parameters
- **hubId** (string) - Required - The ID of the Data Hub.
- **operation** (string) - Required - The operation to perform. Must be one of "create", "get", "update", or "delete".
- **entryId** (string) - Optional - The ID of the entry to operate on. Required for "update" and "delete" operations.
- **data** (Record<string, string>) - Optional - The data payload for "create" and "update" operations.

### Request Example
```javascript
// Example for creating an entry
dataHubAction('myHubId', 'create', undefined, { key1: 'value1', key2: 'value2' });

// Example for getting a specific entry
dataHubAction('myHubId', 'get', 'entryId123');

// Example for getting all entries
dataHubAction('myHubId', 'get');

// Example for updating an entry
dataHubAction('myHubId', 'update', 'entryId123', { key1: 'newValue1' });

// Example for deleting an entry
dataHubAction('myHubId', 'delete', 'entryId123');
```

### Response
#### Success Response (200)
- **Entry[]** - An array of entry objects upon successful retrieval. The structure of each entry object depends on the Data Hub schema.

#### Response Example
```json
// Example response for 'get' operation returning multiple entries
[
  { "id": "entry1", "field1": "value1", "field2": "value2" },
  { "id": "entry2", "field1": "value3", "field2": "value4" }
]

// Example response for 'get' operation returning a single entry (if entryId was specified)
{
  "id": "entry1",
  "field1": "value1",
  "field2": "value2"
}
```
```

--------------------------------

### onError() Prop Usage

Source: https://docs.feathery.io/develop/react/api-guide/form/event-handlers/onerror

Example of how to use the onError prop within a Feathery Form component to handle errors, such as navigating to a different step.

```APIDOC
## onError() Prop

### Description
The `onError` prop is a callback function provided by the Feathery Form component. It is triggered when an error occurs within the form, such as integration failures or invalid user input. This function can be asynchronous and allows for modification of the form state.

### Method
Callback Function

### Parameters
#### Context API
- **context** (object) - Required - An object containing form state and handlers.
  - **errorFieldId** (string) - The ID of the field that is erroring.
  - **errorFieldType** (string enum) - The type of the field that is erroring.
  - **errorMessage** (string) - The error message.
  - **trigger** (object) - The info of the error trigger.
    - **id** (string) - The ID of the element that triggered the error.
    - **text** (string) - The text displayed on the element that triggered the error.
    - **type** (string enum) - The type of element that triggered the error (`button`, `text`, or `field`).
    - **repeatIndex** (integer) - The 0-indexed repetition number if the element repeats, otherwise 0.

### Request Example
```javascript
import { init, Form } from '@feathery/react';

init('SDKKey', 'bob@feathery.io');

<Form
  formId='aBcDeF'
  onError={(context) => {
    context.setStep('Step 4');
  }}
/>
```

### Response
#### Return Value
- A promise can be optionally returned if the function is asynchronous and you want execution to await.
```

--------------------------------

### Execute Sequential Integration Actions

Source: https://docs.feathery.io/platform/build-forms/advanced-logic/javascript-rule-builder/trigger-integrations-from-logic

This snippet demonstrates how to run multiple integration actions using the Feathery SDK. It ensures that the actions are executed in the provided array order and waits for completion before proceeding.

```javascript
let accountCreation = await feathery.runIntegrationActions(['b1802192-d7be-4432-9916-e62f17d8b23a', '93b378b5-34ec-4ae3-a644-e160a79486c2'], {"waitForCompletion": true, "multiple": false});
```

--------------------------------

### GET /form/submission/payment_method

Source: https://docs.feathery.io/platform/build-forms/elements/fields/payment-method

Retrieves the payment method data captured through a Feathery form field. This field is read-only and populated after a user submits payment information.

```APIDOC
## GET /form/submission/payment_method

### Description
Retrieves the payment method data captured through a Feathery form field. This field is read-only and populated after a user submits payment information.

### Method
GET

### Endpoint
/form/submission/payment_method

### Parameters
#### Path Parameters
- **field_id** (string) - Required - The unique identifier of the payment_method field.

### Response
#### Success Response (200)
- **card_data** (object) - Contains card brand, last4 digits, country, and expiration details.
- **stripe_payment_method_id** (string) - The unique Stripe identifier for the payment method.

#### Response Example
{
    "card_data": {
        "brand": "discover",
        "last4": "1117",
        "country": "US",
        "exp_year": 2029,
        "exp_month": 9
    },
    "stripe_payment_method_id": "pm_aD45hG60f3twY"
}
```

--------------------------------

### Implement onSubmit in Feathery React Form

Source: https://docs.feathery.io/develop/react/api-guide/form/event-handlers/onsubmit

Demonstrates how to initialize the Feathery SDK and use the onSubmit prop to access submitted fields and check for the final form step.

```javascript
import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', 'bob@feathery.io');

  // Show the `aBcDeF` Feathery form
  return <Form
    formId='aBcDeF'
    // Store form data in backend
    onSubmit={(context) => {
      writeToBackend(context.submitFields);
      if (context.lastStep) console.log("User finished form!");
    }}
  />
}
```

--------------------------------

### Implement a Simple Counter Custom Field

Source: https://docs.feathery.io/platform/build-forms/elements/custom-fields/react-fields

A basic example of a custom field component that manages a numeric value. It demonstrates the required 'value' and 'onChange' prop handling for state updates.

```jsx
import React from 'react';

const Counter = ({ value = 0, onChange }) => {
  const handleClick = () => {
    onChange(value + 1); // Increments the current value
  };

  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;
```

--------------------------------

### Map Salesforce Data to Quik using CSV

Source: https://docs.feathery.io/guides/fill-financial-documents-for-account-openings

This functionality allows users to map data from Salesforce objects and fields to Quik fields by providing a CSV file. The CSV must contain 'Salesforce Object', 'Salesforce Field', and 'Quik Field' columns. This mapping is used for automatic pre-population of data when using Salesforce API connectors or dynamic form prefill.

```CSV
"Salesforce Object","Salesforce Field","Quik Field"
"Account","Name","AccountName"
"Contact","Email","ContactEmail"
"Lead","Company","LeadCompany"
```

--------------------------------

### Initialize and Render Feathery Form

Source: https://docs.feathery.io/develop/react

A basic React component implementation showing how to initialize the SDK with an SDK key and render a specific form using the Form component. Requires a valid SDK key and form ID from the Feathery dashboard.

```jsx
import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('<SDKKey>');
  // Show the Feathery form
  return <Form formId='<formId>' />
}
```

--------------------------------

### Configuring initialLoader

Source: https://docs.feathery.io/develop/react/api-guide/form/initialloader

This documentation explains how to use the initialLoader property within the Feathery Form component to manage loading states.

```APIDOC
## initialLoader Configuration

### Description
Configure the loader component and container dimensions displayed while a Feathery form is initializing.

### Properties
- **show** (boolean) - Optional - If true, displays the loader during form initialization. If false, hides the loader.
- **loader** (string | JSX) - Optional - The component or HTML string to display as the loader. Defaults to a grey spinner.
- **initialContainerHeight** (string) - Optional - CSS height value for the loader container. Defaults to 'min-content'.
- **initialContainerWidth** (string) - Optional - CSS width value for the loader container. Defaults to '100%'.

### Request Example
<Form
  formId='aBcDeF'
  initialLoader={{
    show: true,
    loader: <CustomLoader />,
    initialContainerHeight: '300px'
  }}
/>
```

--------------------------------

### Perform Data Hub CRUD Operations

Source: https://docs.feathery.io/develop/context-api

The dataHubAction function supports create, get, update, and delete operations on data hub entries. It requires a hubId and an operation type, with optional entryId and data parameters for specific operations.

```typescript
type DataHubOperation = "create" | "get" | "update" | "delete";

function dataHubAction(
  hubId: string, 
  operation: DataHubOperation, 
  entryId?: string, 
  data?: Record<string, string>
): void {
  // Implementation logic for Feathery Data Hub API
  console.log(`Executing ${operation} on hub ${hubId}`);
}
```

--------------------------------

### Running Integrations via No-Code Logic

Source: https://docs.feathery.io/platform/build-forms/advanced-logic/javascript-rule-builder/trigger-integrations-from-logic

This section details how to use the 'Run Integrations' action within Feathery's no-code logic builder to trigger predefined integration actions. It also explains the 'wait for completion' option.

```APIDOC
## Running Integrations via No-Code Logic

### Description
Use the 'Run Integrations' action in the no-code logic builder to trigger one or more integration actions. You can configure whether the form should wait for the integration to complete before proceeding.

### Method
No-code action

### Endpoint
N/A (within Feathery's Logic Builder)

### Parameters
#### No-Code Action Parameters
- **Integration Actions**: Select one or more integration action IDs to run.
- **Wait for Completion** (boolean) - Optional - If true, the form waits for the integration to finish before moving to the next step in the logic rule. If false, the integration runs asynchronously.

### Request Example
(Visual representation via screenshots in original documentation)

### Response
N/A (handled internally by Feathery)
```

--------------------------------

### Using Configs in a Logic Rule

Source: https://docs.feathery.io/platform/build-forms/advanced-logic/javascript-rule-builder/reusable-logic-configs

This section details how to retrieve configuration data within a logic rule using the `feathery.getConfig` method. It explains the available parameters for filtering and selecting data.

```APIDOC
## Use Configs in a Logic Rule

To use a config in your logic rule, you can leverage the `feathery.getConfig({filter, keys, unique})` method in your rule.

### Method
`feathery.getConfig(options)`

### Parameters
#### Query Parameters
- **options** (object) - Required - An object containing configuration options.
  - **filter** (object) - Optional - A map from spreadsheet headers to the values that rows being returned must contain. If not specified, all config values will be returned.
  - **keys** (array) - Optional - A list of spreadsheet columns to be returned. If not specified, all columns will be returned.
  - **unique** (boolean) - Optional - Only return spreadsheet rows with unique sets of values to be returned.

### Notes
Make sure to `await` the promise returned from the method to get the actual values to use.

### Request Example
```javascript
// Example: Get all data from a config named 'store_data'
const allStores = await feathery.getConfig({ configName: 'store_data' });

// Example: Get only 'name' and 'city' for stores in the 'North' region
const northStores = await feathery.getConfig({
  configName: 'store_data',
  filter: { region: 'North' },
  keys: ['name', 'city']
});

// Example: Get unique store names
const uniqueStoreNames = await feathery.getConfig({
  configName: 'store_data',
  keys: ['name'],
  unique: true
});
```

### Response
#### Success Response (200)
- **data** (array) - An array of objects, where each object represents a row from the config CSV that matches the specified filters and keys.
```

--------------------------------

### openUrl

Source: https://docs.feathery.io/develop/context-api

Flushes pending field updates and navigates to a specified URL.

```APIDOC
## openUrl

### Description
Flush any pending field updates and then opens up a URL. If target isn't specified, it defaults to _blank.

### Method
Async SDK Method

### Parameters
- **url** (string) - Required - The destination URL.
- **target** (string) - Optional - The browser target (e.g., '_blank', '_self').

### Request Example
await openUrl('https://example.com', '_self');
```

--------------------------------

### React: Implement onChange for Custom Form Logic

Source: https://docs.feathery.io/develop/react/api-guide/form/event-handlers/onchange

This snippet demonstrates how to use the onChange prop within a Feathery React Form component. It initializes the Feathery SDK and shows a practical example of the onChange callback, which checks specific field values and triggers custom actions like displaying a birthday surprise. The code utilizes the context object passed to the onChange function to access field states and trigger information.

```javascript
import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', 'bob@feathery.io');

  // Show the `aBcDeF` Feathery form
  return <Form
    formId='aBcDeF'
    // Custom form step onChange logic
    onChange={(context) => {
      if (context.trigger.id === 'is-it-birthday' && context.fields['is-it-birthday']) {
          showBirthdaySurprise();
      }
    }}
  />
}
```

--------------------------------

### Applying Field Errors and Styles

Source: https://docs.feathery.io/develop/context-api/field-object

Shows how to programmatically set error messages and apply dynamic styles to a field to provide user feedback.

```javascript
const field = context.getField('email_field');

// Set a validation error
field.setError('Invalid email address format');

// Apply dynamic styles
field.setStyles({ backgroundColor: '#fee2e2', borderColor: 'red' });
```
Tokens:
Raw