Customizing the Automation Form

You can customize how individual fields in the Automation Form are rendered. For example, you can hide or disable certain fields, or render something completely different in their place.

The API#

In order to customize how fields are rendered, pass in the renderFields property to the AutomationCreator, AutomationEditor, or other component that renders the Automation Form.

The keys of the renderFields object should follow the shape of the Automation object, where each value is either a boolean indicating whether given field should be rendered, or a callback function.

For more details and concrete examples for customizing input field components using the disabled and variables props referenced below, see Customizing Input Fields.

Callback Functions#

If you provide a callback, it will be called with a context object as a parameter, which contains components that would be rendered by default. The callback should return a React element to be rendered.

Usage with React#

Let's say you wanted to preselect an Automation's Action to Gmail's Send Email and then customize the UI to only show necessary fields:

<AutomationsManager
  prefilled={{
    action: {
      appKey: "gmail",
      actionKey: "send-email",
    },
  }}
  renderFields={{
    action: ({ Card, ActionCredentialKeyField, ActionInputFields }) => (
      <Card>
        The action is preselected to Gmail.
        <br />
        Please select the account and set up the action.
        <ActionCredentialKeyField />
        <ActionInputFields />
      </Card>
    ),
  }}
/>

Usage Outside of React Land#

If you are not using React in your app, you will need to define the content to be rendered with React's createElement API. The createElement function is available in the context object passed in via argument to your render callback.

This is the same example as the above:

renderAutomationsManager(container, {
  prefilled: {
    action: {
      appKey: "gmail",
      actionKey: "send-email",
    },
  },
  renderFields: {
    action: ({
      createElement,
      Card,
      ActionCredentialKeyField,
      ActionInputFields,
    }) =>
      createElement(
        Card,
        null,
        "The action is preselected to Gmail.",
        createElement("br"),
        "Please select the account and set up the action.",
        createElement(ActionCredentialKeyField),
        createElement(ActionInputFields)
      ),
  },
});

Customizing the name Field#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
NameFieldThe default name field. Accepts a disabled prop.
<AutomationsManager
  renderFields={{
    name: ({ NameField }) => (
      <div>
        Enter automation name:
        <NameField />
      </div>
    ),
  }}
/>

Customizing the Trigger UI#

The trigger configuration UI can be customized in 2 ways:

  • override it completely by providing a callback to the trigger property
  • override individual fields by providing an object to the trigger property with properties corresponding to the fields

Completely Overriding the Trigger UI#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
TriggerAppKeyFieldThe default trigger app key field. Accepts a disabled prop.
TriggerKeyFieldThe default trigger key field. Accepts a disabled prop.
TriggerCredentialKeyFieldThe default trigger credential id field. Accepts a disabled prop.
TriggerInputFieldsRenders default fields for all input params. Accepts a disabled prop to disable all fields. Will be null if there are no input params, if the input params have not yet been loaded, or if no credential is selected.
triggerInputFieldsAn object where each property is a default field for corresponding trigger input param. Each input fields accepts a disabled prop. Will be null if there are no input params, if the input params have not yet been loaded, or if no credential is selected.
<AutomationsManager
  renderFields={{
    trigger: ({ Card, TriggerAppKeyField, TriggerKeyField }) => (
      <Card>
        Select trigger:
        <TriggerAppKeyField />
        <TriggerKeyField />
        <TriggerCredentialKeyField />
        {/* Render all trigger inputs fields:
            (don't forget to check TriggerInputFields is not null) */}
        {TriggerInputFields && <TriggerInputFields />}
        {/* Or render individual fields, e.g. for `workspace` input param:
            (don't forget to check triggerInputFields is not null) */}
        {triggerInputFields && <triggerInputFields.workspace />}
      </Card>
    ),
  }}
/>

Customizing the Trigger UI's appKey#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
TriggerAppKeyFieldThe default trigger app key field. Accepts a disabled prop.
<AutomationsManager
  renderFields={{
    trigger: {
      appKey: ({ TriggerAppKeyField }) => (
        <div>
          Select trigger app:
          <TriggerAppKeyField />
        </div>
      ),
    },
  }}
/>

Customizing the Trigger UI's triggerKey Field#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
TriggerKeyFieldThe default trigger app key field. Accepts a disabled prop.
<AutomationsManager
  renderFields={{
    trigger: {
      triggerKey: ({ TriggerKeyField }) => (
        <div>
          Select trigger:
          <TriggerKeyField />
        </div>
      ),
    },
  }}
/>

Customizing the Trigger UI's inputParams Fields#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
InputParamFieldThe default field. Accepts a disabled prop.
<AutomationsManager
  renderFields={{
    trigger: {
      inputParams: {
        someParam: ({ InputParamField }) => (
          <div>
            Enter someParam:
            <InputParamField />
          </div>
        ),
      },
    },
  }}
/>

Customizing the Action UI#

The action configuration UI can be customized in 2 ways:

  • override it completely by providing a callback to the action property
  • override individual fields by providing an object to the action property, with properties corresponding to the fields

Completely Overriding the Action UI#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
ActionAppKeyFieldThe default action app key field. Accepts a disabled prop.
ActionKeyFieldThe default action key field. Accepts a disabled prop.
ActionCredentialKeyFieldThe default action credential id field. Accepts a disabled prop.
ActionInputFieldsRenders default fields for all input params. Accepts a disabled prop to disable all fields. Accepts a variables prop to control the variables avaible for referencing in all fields. Will be null if there are no input params, if the input params have not yet been loaded, or if no credential is selected.
actionInputFieldsAn object where each property is a default field for corresponding action input param. Each input field accepts disabled and variables props. Will be null if there are no input params, if the input params have not yet been loaded, or if no credential is selected.
<AutomationsManager
  renderFields={{
    action: ({
      Card,
      ActionAppKeyField,
      ActionKeyField,
      ActionCredentialKeyField,
      ActionInputFields,
      actionInputFields,
    }) => (
      <Card>
        Select action:
        <ActionAppKeyField />
        <ActionKeyField />
        <ActionCredentialKeyField />
        {/* Render all action inputs fields:
            (don't forget to check ActionInputFields is not null) */}
        {ActionInputFields && <ActionInputFields />}
        {/* Or render individual fields, e.g. for `workspace` input param: 
            (don't forget to check actionInputFields is not null) */}
        {actionInputFields && <actionInputFields.workspace />}
      </Card>
    ),
  }}
/>

Customizing the Action UI's appKey Field#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
ActionAppKeyFieldThe default action app key field. Accepts disabled prop.
<AutomationsManager
  renderFields={{
    action: {
      appKey: ({ ActionAppKeyField }) => (
        <div>
          Select action app:
          <ActionAppKeyField />
        </div>
      ),
    },
  }}
/>

Customizing the Action UI's actionKey field#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
ActionKeyFieldThe default action app key field. Accepts disabled prop.
<AutomationsManager
  renderFields={{
    action: {
      actionKey: ({ ActionKeyField }) => (
        <div>
          Select action:
          <ActionKeyField />
        </div>
      ),
    },
  }}
/>

Customizing the Action UI's inputParams Fields#

Render callback context:

PropertyDescription
automationFormDataThe current state of the automation form.
createElementUseful for non-React users. See Usage outside of React land.
CardA generic Card component used to visually separate UI areas.
InputParamFieldThe default field. Accepts disabled prop.
<AutomationsManager
  renderFields={{
    action: {
      inputParams: {
        someParam: ({ InputParamField }) => (
          <div>
            Enter someParam:
            <InputParamField />
          </div>
        ),
      },
    },
  }}
/>