Prefilling Automation Form data

You may want to pre-fill data, for example trigger data, by adding default values.

The prefilled prop can be passed to the components rendering Automation Form in order to specify default values.

For example, this will prefill the automation name:

const prefilled = {
name: "prefilled name",
};
<AutomationCreator prefilled={prefilled} />;

The next example will make user only configure the action. The trigger is preselected to be that of your app. You can find your app key on the Configuration page.

const prefilled = {
trigger: {
appKey: "admin",
triggerKey: "task-completed",
inputParams: {
// Optional input fields for the trigger to prefill
inputField: "testValue",
},
},
};
<AutomationCreator prefilled={prefilled} />;

You could also configure the automations to have a third party trigger:

const prefilled = {
trigger: {
appKey: "asana",
triggerKey: "task-added",
inputParams: {
// Optional input fields for the trigger to prefill
workspace: "some_id",
},
},
};
<AutomationCreator prefilled={prefilled} />;

Prefilling Actions#

In the example below, the AutomationCreator component is configured so that the Asana Create Task action is preselected. You can find a list of all third party actions here.

const prefilled = {
trigger: {
appKey: "admin",
},
action: {
appKey: "asana",
actionKey: "create-task",
},
};
<AutomationCreator prefilled={prefilled} />;

Dynamically Prefilling Actions#

In case the actionKey is not known ahead (prefilled), or you need to compute the default input params dynamically, you can use the getDefaultActionInputParams prop which accepts callback function. The callback is called with the current Automation Form data, so you can access things like currently selected action, or trigger.

The following example does:

  • prefill the trigger to taskCreated in my app
  • prefill Asana as the action app
  • hide the action app input
  • prefill Asana action input params depending on the selected action
import { AutomationCreator } from "@rollout/connect-react";
const prefilledAsanaInputParams = {
createTask: {
// Prefill the `name` param to reference the `name` prop from trigger
name: "{{name}}",
},
updateTask: {
name: "{{name}}",
},
deleteTask: {
// Prefill the `taskId` param to reference the `id` prop from trigger
taskId: "{{id}}",
},
};
<AutomationCreator
prefilled={{
trigger: {
appKey: "myApp",
triggerKey: "task-created",
},
action: {
appKey: "asana",
},
}}
renderFields={{
trigger: false,
action: {
appKey: false,
},
}}
getDefaultActionInputParams={(form) =>
prefilledAsanaInputParams[form.action.actionKey]
}
/>;

Dynamically Prefilling Triggers#

Similarly to getDefaultActionInputParams, the getDefaultTriggerInputParams prop can be used to dynamically prefill trigger input params:

import { AutomationCreator } from "@rollout/connect-react";
const prefilledTriggerInputParams = {
taskAdded: {
workspace: "my-workspace",
},
taskChanged: {
workspace: "my-workspace",
},
};
<AutomationCreator
prefilled={{
trigger: {
appKey: "myApp",
},
}}
renderFields={{
trigger: {
appKey: false,
},
}}
getDefaultActionInputParams={(form) =>
prefilledTriggerInputParams[form.action.actionKey]
}
/>;