Customizing Input Fields

Trigger and Action Input Fields can be disabled or hidden for cases when there user is not expected to provide a value for the field (e.g. if this value is always prefilled by the partner). For Action Input Fields, it is also possible to disable variable referencing for cases where the trigger payload does not contain any data that the user is likely to want to map to a given field.

Hiding Input Fields#

Input fields can be hidden by passing false to the input's key in the inputParams object of the trigger or action renderFields object.

Alternatively, when overriding the Trigger or Action UI entirely, you can selectively render just the fields you'd like to display.

Example: Hiding an Input Field#

<AutomationsManager
  renderFields={{
    action: {
      inputParams: {
        fieldToHide: false,
      },
    },
  }}
/>

Example: Selectively Rendering Fields When Overriding the Trigger or Action UI#

<AutomationsManager
  renderFields={{
    trigger: ({ Card, TriggerAppKeyField, TriggerKeyField }) => (
      <Card>
        Select trigger:
        <TriggerAppKeyField />
        <TriggerKeyField />
        <TriggerCredentialKeyField />
        {/* Render just the fields you want to display, ommitting fieldToHide
            (don't forget to check triggerInputFields is not null) */}
        {triggerInputFields && (
          <Card>
            <triggerInputFields.firstFieldToRender />
            <triggerInputFields.secondFieldToRender />
          </Card>
        )}
      </Card>
    ),
  }}
/>

Disabling Input Fields#

Input Fields can be disabled with the disabled prop, which accepts a boolean. This prop can be passed to the Input Field from the either the renderFields object or from within the renderFields function if you are completely overriding the Trigger or Action UI.

Example: Disabling a Single Input Field#

<AutomationsManager
  renderFields={{
    action: {
      inputParams: {
        fieldToDisable: ({ InputParamField }) => <InputParamField disabled />,
      },
    },
  }}
/>

Overriding Label, Description or Placeholder values#

Input fields can also have their label, description and placeholder values overwritten. Currently supported are the <AutomationsManager />, <MyAutomations />, <AutomationCreator /> and <AutomationEditor /> components.

Example: Overwriting default input fields#

<AutomationsManager
  renderFields={{
    action: {
      inputParams: {
        fieldToCustomize: ({ InputParamField }) => (
          <InputParamField
            label="Custom Label"
            description="Custom description"
          />
        ),
      },
    },
  }}
/>

Example: Disabling All Fields When Overriding the Trigger or Action UI#

<AutomationsManager
  renderFields={{
    action: ({ Card, ActionAppKeyField, ActionKeyField, ActionCredentialKeyField, ActionInputFields }) => (
      <Card>
        Select trigger:
        <ActionAppKeyField />
        <ActionKeyField />
        <ActionCredentialKeyField />
        {/* Render all action inputs fields as disabled:
            (don't forget to check ActionInputFields is not null) */}
        {ActionInputFields && <ActionInputFields disabled />}
      </Card>
    ),
  }}

Example: Disabling Certain Fields When Overriding the Trigger or Action UI#

function renderActionInputFields(actionInputFields) {
  const toDisableInputKeys = ["input1", "input2"];
  const inputFieldEntries = Object.entries(actionInputFields);
  return inputFieldEntries.map(([inputKey, InputField]) => {
    const disabled = toDisableInputKeys.includes(inputKey)
    return <InputField disabled={disabled} />
  });
}

<AutomationsManager
  renderFields={{
    action: ({ Card, ActionAppKeyField, ActionKeyField, ActionCredentialKeyField, actionInputFields }) => (
      <Card>
        Select action:
        <ActionAppKeyField />
        <ActionKeyField />
        <ActionCredentialKeyField />
        {actionInputFields && renderActionInputFields(actionInputFields)}
      </Card>
    ),
  }}

Disabling Variable Referencing#

Variable referencing can be disabeld through the variables prop, which can take a boolean, null or GetVariablesFn function as a value.

Variable referencing is disabeld if the variables prop is null or false or if the function prop returns null or false. See below for a defintion of of the GetVariablesFn function.

This prop can be passed to the Input Field from the either the renderFields object or from within the renderFields function if you are completely overriding the Action UI.

Disabling variable referencing for a particular field only prevents the user from referencing variables. The partner is still able to prefill a field with a variable reference for fields that have variable referencing disabled in the UI.

Get Variables Function Definition#

type Variable = {
  id: string;
  label: string;
};

// If return value is null or false, variable referencing is disallowed.
// If return value is true, variable referencing is allowed with all available Variables from the trigger payload.
// If return values is Variable[], variable referencing is allowed, but only for the returned Variables.
type GetVariablesFn = (ctx: {
  variables: readonly Variable[];
}) => readonly Variable[] | boolean | null;

Example: Filtering the Variables Available for Referencing:#

function filterVariables(ctx) {
  const { variables } = ctx;
  return variables.filter((variable) => variable.id != "varToFilterOutId");
}

<AutomationsManager
  renderFields={{
    action: {
      inputParams: {
        fieldWithLimitedVars: ({ InputParamField }) => (
          <InputParamField variables={filterVariables} />
        ),
      },
    },
  }}
/>;

Example: Disabling Variable Referencing When Overriding the Action UI:#

function renderActionInputFields(actionInputFields) {
  const varRefDisabledInputKeys = ["input1", "input2"];
  const inputFieldEntries = Object.entries(actionInputFields);
  return inputFieldEntries.map(([inputKey, InputField]) => {
    const varReferencingEnabled = !varRefDisabledInputKeys.includes(inputKey);
    return <InputField variables={varReferencingEnabled} />
  });
}

<AutomationsManager
  renderFields={{
    action: ({ Card, ActionAppKeyField, ActionKeyField, ActionCredentialKeyField, actionInputFields }) => (
      <Card>
        Select trigger:
        <ActionAppKeyField />
        <ActionKeyField />
        <ActionCredentialKeyField />
        {actionInputFields && renderActionInputFields(actionInputFields)}
      </Card>
    ),
  }}