Skip to content

Create a custom Step template

In most cases, the Flows are built with Library Step templates to which OneReach.ai provides updates and improvements regularly. Should you feel that the needed Step template is not available in the Library, you can create one yourself (programming skills required). The guidelines below provide high-level information on how to do that. OneReach.ai is currently working on a new solution for creating Step templates.

Note

We always recommend downloading Step templates from the Library over creating custom ones, as the Step templates in the Library are designed to conform to the best UX practices and latest industry standards, and are maintained and regularly updated by OneReach.ai.

To create a new Step template, either:

  • Go to the Templates tab, scroll down and click Or create a new step template
  • Or click the Plus sign on the Canvas and then click +Create a new step template from the Library iFrame

On clicking either of the two options a Step template details pop-up will appear. This is where you enter the necessary data for your new Step template. Each of the tabs is described below.

General tab

  • Name of a Step: specify the name of the Step template.
  • Description: provide a brief and clear explanation of what the Step does and can be used for.
  • Categories: select an existing category the new Step will refer to or create a new category. You will see categories available for Step templates downloaded to the current Flow. The list will be empty for a new Flow with no templates.
  • Tags: specify the tag to identify, sort, and fetch any needed information in the logs by that tag.
  • Related Steps: specify any related Steps, if applicable.
  • Design: choose between a default or a custom icon for your Step.
  • Shape: specify the shape of the Step as it will appear in the Flow.
  • Size: specify the Step size (Gateway Steps have their predefined shape).
  • Gateway step: specify whether this is a Gateway Step.

Design tab

Here, you can specify the way the Step user interface (UI) will appear in the sidebar. There are two ways to create this design:

  • Use the existing components available on the panel to the right (this is the default and recommended mode).
  • Scroll down and click the Switch to raw edit mode link at the end of this form to hard-code your step UI.

If you choose to use the existing components, simply click or drag and drop them onto the Input area to add to the Step UI. You can also drag and drop any component to change the order of the elements.

  • Output: click the toggle if your Step has output data. Then specify the Merge field name and type.
  • Error handling: click the toggle to Allow error processing and enable the fetching of error details. If the switch is off, the Flow will stop on the current Step in case an error happened, and the Flow does not contain the Handle flow error Step.
  • Output exits: define the Step exit label and provide the conditional rendering rule based on Step data variables. Click + Add dynamic exit if you would like to allow the user to add dynamic branches manually from Step logic. To change the default position of dynamic exits, use the drag and drop function to rearrange. By default, all exits are sorted the following way: static exits, dynamic exits, and error exits.
  • Reporting: here you can add reporting tags that can help you identify, sort, and fetch any needed information in the logs by the unique custom tag.

Logic tab

This is where you can use JavaScript to define the behavior of the Step and create custom logic to accomplish any task you choose. The tabs to the right contain helper/validator/provide property/utility/etc functions that can help you simplify defining your Step logic.

Test tab

Here you can set conditions to preview and test what you have built and verify the JavaScript the Step will generate.

Help tab

This is where you can edit your Step information (aka help text). Feel free to provide as much exhaustive information as possible, tweak the look (font size, formatting, etc.), as well as edit inputs.

Source tab

Your step code is available here. Through this tab, you can share your Step with other accounts within your organization. Copy the code displayed and share it with your colleagues so they can create the same Step.

Versions tab

Allows comparing your Step's versions. To update a Step from the Library, the Library Step version has to be greater than the Flow Step version.

Submit tab

If you would like to share the template you have created with OneReach.ai and make it available in the OneReach.ai Library, submit it, and our Acceptance team will review it. To submit your Step, you first need to make sure it follows all prerequisites. Go through the listed conditions and tick the My step template follows all rules box if your Step meets all conditions.

Hooks tab

Write and execute JavaScript code on events selected. On selecting the needed event, all available variables with descriptions will be displayed in the comments.

The current Flow is where your new Step template will be stored. You can use it in other Flows by downloading the Step template from the Another Flow tab in the Library iFrame, or by cloning it to another Flow (Edit > Clone > Clone to another flow), or by copying its source file.