An Advanced field editor (AFE) is a user interface available for certain fields where the output is generated using dynamic data such as:

• the data received from an export step.
• contextual data such as the Last Export Date Time timestamp of a flow.
• the encrypted credentials stored in the connection object.

Important: You must switch your account to developer mode to access the Playground.

AFEs are available for export, import, and lookup steps. They take the guesswork out of building a dynamic template for the fields, and allow you to validate the field output without having to run the entire flow. AFEs have syntax highlighting and intelligent code completion capabilities when appropriate. You can launch AFEs in integrator.io wherever they are provided in the context of an integration setting. You can also access AFEs from Playground in the Tools menu of integrator.io.

AFEs provide these advantages:

• Ability to view all the available input data and its structure in one place 
• Ability to view the output data in real time as you build or modify the field template.
• Ability to modify the input data and observe how it affects the output.
• Ability to identify certain errors with the field template, such as syntax or handlebars errors.

Contents

• AFE layouts
• AFE auto-suggestions
• Playground AFEs
  • CSV parser helper
  • CSV generator helper
  • XML parser helper
  • Form builder
  • Handlebars editor
  • SQL query builder
  • Filter editor
  • Script editor
  • Transform editor
• Integration Explorer

AFE layouts

Some AFEs have a layout menu in the upper right corner of the window that allows you to change the way information is presented. You can choose between the following three configurations:

• Three column layout: This layout displays the template field on the left, the resource field in the middle, and the output field on the right.
  
• Hybrid layout: This layout displays the template field in the left half of the window, the resource field in the upper right quadrant, and the output in the lower right quadrant.
  
• Three row layout: This layout displays the template field in the top third of the window, the resource field in the middle, and the output field at the bottom.
  

You can also use the dashed square icon in the menu to enter full screen mode for any of the above layouts. 

AFEs often also have Auto preview checkbox available in the top right corner. If checked, the AFE immediately displays output results as you edit text. If unchecked, a Preview button allows you to generate the output that results from your edited text when clicked.

AFE auto-suggestions

Some AFEs and handlebars-enabled fields offer auto-suggestion functionality to ease your coding experience while building handlebars expressions and referencing fields. When an AFE is open, type two curly braces {{ to see a list of available fields and helpers.

The auto-suggestion menu automatically displays All fields and helpers. Click Fields or Helpers to limit the available suggestions to only fields or only helpers.

The Fields section of the auto-suggestion menu will automatically include any fields available in the sample data you are using to build handlebars expressions. Each field's data type displays to the right of the field name, and you can expand any top level field to select any subfield as needed during your edits.  

The Helpers section of the auto-suggestion menu includes all possible handlebars you could use to build expressions.

The helpers are divided into the following subsections: 

• Numeric: for numeric values
• String: for string values
• Aggregate: for calculating sums and averages of numeric values
• List: for sorting and splitting arrays
• Date/Time: for timestamps, date formats, and time calculations
• Miscellaneous: for generating AWS signatures, returning field values, and referencing lookups 
• Block helpers: for advanced calculations that reference multiple fields to generate template values
• Data variable: for positional references

Hover over any helper in the auto-suggest menu to see a brief description of the helper's functionality.

Once you have selected the helper you want to use in your template, you can find additional information by clicking the expression in the editor and expanding the bold text in the auto-suggestion menu. 

You can then review an EXAMPLE of the expression, a sample the CONTEXT that the expression would use as input data, and the OUTPUT that would be generated were the example run against the sample context.

Scroll down further in the menu to see a description ABOUT the helper, and descriptions of any parameters the helper accepts.

Description ABOUT helper

Parameter descriptions

Click Learn more at the bottom of the auto-suggestion entry to see more detailed information about the handlebar helper.

You can also use keyboard shortcuts to navigate the auto-suggestion menu. 

Playground AFEs

Most integrator.io AFEs are available from the Playground in the Tools menu.

You can select any of the following tools from the Editor Examples menu:

When you open an AFE in the Playground, sample data is automatically provided, but you can also paste or modify the sample data you would like to use.

Note: AFEs that you access from the Playground do not store data, so save any data you want to keep in another location.

CSV parser helper

This processor converts comma separated values into JSON.

In the Editor Examples section, expand the CSV parser helper menu, and select either Simple CSV or Multiline order sample data to open the CSV parser helper.

Column delimiter: Enter the character that delimits the CSV file you are parsing. You can also select one of the following common delimiters from the drop-down menu that displays when you click the field:

• Comma (,) - default
• Pipe (|)
• Semicolon (;)
• Asterisk (*)
• Space
• Tab

Note: The column delimiter can be multiple characters (double pipes || for example).

Row delimiter: Select one of the following row delimiters from the drop-down menu:

• CR (\r): Carriage return
• CRLF (\n\r): Carriage return line feed
• LF (\n): Line feed

Trim spaces: Check this box to eliminate whitespace characters from the parsed output.

Number of rows to skip: Enter the number of rows you want to be left out of your parsed output if your CSV file begins with one or more rows that you want to exclude.

File has header: Check this box if the CSV file has a header that you want excluded from the parsed output.

Disable quote validation and strip enclosing quotes: Use this field to disable the automatic detection and validation of enclosing quotes around CSV column values. If any starting and ending quotes are found in the CSV file, they will be removed.

CSV generator helper

This AFE is not available in the Playground, but you can navigate to it from within an FTP transfer import flow step. Click Launch under CSV generator helper in the How would you like to generate files? section of the FTP transfer import.

The CSV generator helper allows you to visualize and experiment when building customized CSV files (or any other delimited text files) from the JSON records/rows being processed by your flow. All of the settings in the CSV generator helper are also available from the import panel (above).

Column delimiter: Enter the character that delimits the CSV file you are parsing. You can also select one of the following common delimiters from the drop-down menu that displays when you click the field:

• Comma (,) - default
• Pipe (|)
• Semicolon (;)
• Asterisk (*)
• Space
• Tab

Note: The column delimiter can be multiple characters (double pipes || for example).

Row delimiter: Select one of the following row delimiters from the drop-down menu:

• CR (\r): Carriage return
• CRLF (\n\r): Carriage return line feed
• LF (\n): Line feed

Include header: Check this box to include a top level header row in your CSV file (the very first row in your CSV file will be a set of column names so that anyone reading the CSV file can quickly understand what each column represents).

Truncate last row delimiter: Check this box to prevent errors that may occur if a string value in the CSV file exceeds the maximum allowed length.

Wrap with quotes: Check this box to wrap all values in quotes. 

Note: This setting wraps all values in quotes. If you want to only wrap certain values in quotes while leaving others without quotes, you must build a generic definition file.

Replace tab with space: Check this box to replace tabs in the content of the data (except column delimiters) with a space.

Replace new line with space: Check this box to replace new lines in the content of the data (except row delimiters) with a space.

XML parser helper

This processor converts XML to JSON controlled by a set of parse options.

In the Editor Examples section, expand the XML parser helper menu, and select XML parser.

Resource path: Enter a resource path (xpath) in this field to select or filter specific nodes in the XML block to parse. For more information on Resource paths, see w3schools.org.

Automatic: Click this radio button for simple XML that you want to convert directly to JSON format.

Custom: Click the custom radio button to access the following advanced XML parse options:

• Trim leading and trailing spaces: Click this checkbox to remove whitespace characters from the output.
• Strip new line characters: Click this checkbox to remove all new line characters from the output.
• Character to prepend on attribute names: Enter a prefix that you would like to append to the beginning of the XML node in the parsed JSON output.
• Text node name: Enter the name of the XML text node that you would like to target in the output.
• List Nodes: Enter the list nodes you want to include in the JSON parsed output.
• Include only these nodes: Enter all nodes you want to include in the JSON parsed output.
• Exclude any of these nodes: Enter all the nodes you want to exclude from the JSON parsed output.

Note: Transformations created in the legacy UI might not work in the current UI. Use the following steps to fix a transform originally created in the legacy UI to work as expected in the current UI:

1. Edit your source application.
2. In the How would you like to parse files? section, click Launch under the XML parser helper.

3. In the XML parser, set the Resource path to use Automatic parsing.

Form builder

This editor allows you to create custom forms that you can use within the integrator.io user interface.

In the Editor Examples section, expand the Form builder menu, and select one of the following form types:

• Simple form: A custom form definition with three fields and built-in hide/show logic depending on selection.

• Multi-column: A custom form definition that illustrates advanced two-column layout.

• Field containers: A custom form definition that includes examples of three container types (indent, box, and collapse).

• Field dictionary: A lengthy custom form definition with the most common fields and options.

You can modify the JSON to build the form according to your preferences and use the Script toggle to expose a script editor to build scripts that launch when users interact with the form.

See Create forms for more information.

Handlebars editor

This editor lets you create and test handlebars templates against raw data. You can use a URL template to generate unique URIs for each record. 

In the Editor Examples section, expand the Handlebars editor menu, and select one of the following sample data options:

Simple JSON record:

Nested JSON record:

Enter two open curly braces {{ for a list of all fields and functions available for your template.

For a complete list of supported handlebars expressions, see Handlebars helper reference.

SQL query builder

This processor allows you to build SQL queries with handlebars and JSON as input.

In the Editor Examples section, expand the SQL query builder menu, and select Simple SQL query.

Enter the common elements of the SQL query followed by the handlebars expressions that will generate the SQL query for each record in the Template field.

Click the Defaults tab to enter data for empty columns.

Filter editor

This editor allows you to visually define an expression for filtering records. In the Editor Examples section, expand the Filter editor menu, and select Simple JSON record.

You can also access the filter editor when applying a filter on an export, import, or lookup in a flow.

If you apply a filter with the filter icon to the left of a flow step, the filter applies to all incoming data for the flow step. If you apply a filter using the filter icon within the flow step itself (as shown above), the filter applies to all data that passes through that step. 

You can use the filter editor to target the data you want to include or exclude for an import or an export. The Rules section of the editor has the following options:

1. Boolean selector: NOT is deselected by default, meaning that the filter includes any data that meets the criteria you define with the rule(s). If you select NOT, the filter excludes any data that meets your defined rule criteria.

   Example: If you want to exclude all records that have customer IDs generated before a certain date, select NOT. You can also select AND or OR to create filters that combine multiple rules for your filtration criteria. AND filters records that fit all listed rules in the group. OR filters records that fit any listed rules in the group.

2. Field name: Flow Builder allows you to select any field from your data record from this menu. Choose the relevant field for your filter. By default this is a drop-down menu of all available record fields. You can optionally use a value or an expression instead.

   Note: A gear icon appears when you hover over the space to the right of the field name drop-down menu. Click the icon to change the input format to an expression or a specific value.

3. Operator drop-down menu: This menu allows you to apply conditional operators to the filter. This menu has the following operators:
   • equals: equal to specific date or numeric value.
   • not equals: not equal to a specific date or numeric value.
   • is greater-than: greater than a specific date or numeric value.
   • is greater-than or equals: greater than or equal to a specific date or numeric value.
   • is less-than: less than a specific date or numeric value.
   • is less-than or equals: less than or equal to a specific date or numeric value.
   • starts with: begins with a specific string of characters.
   • ends with: ends with a specific string of characters.
   • contains: has a specific string of characters at any point in the field value.
   • does not contain: does not have a specific string of characters at any point in the field value.
   • is empty: has no value in the field.
   • is not empty: has any value in the field.
   • matches: has a specific value in the field.
4. Value: Enter the appropriate value according to the selected operator.

   Note: A gear icon appears when you hover over the space to the right of the field name drop-down menu. Click the icon to change the input format to an expression or a specific value.

5. Add rule: You can add as many rules to a filter as you need. After you’ve defined one or more rules for your filter and are ready to add another for another field, click Add rule.
6. Add group: Click Add group to create filters with a set of rules that use multiple boolean conditions. Groups allow you to segment your filtration logic for complex circumstances. For example, you could use one rule group that uses the NOT boolean operator to exclude records that were created before a certain date, then create another rule group to include records that use the AND or OR operator.

Script editor

This processor allows you to run JavaScript safely in the integrator.io secure JavaScript runtime environment.

In the Editor Examples section, expand the JavaScript editor menu, and select Simple JSON record.

Script: Use this drop-down menu to select JavaScript that already exists in your integrator.io account.

Function: Enter the function that you want to test with the JavaScript editor.

JavaScript error correction

This editor indicates bad JavaScript syntax in the left margin. Hover over the alert to see hints regarding what's wrong with the JavaScript. 

You can also use the black triangles to collapse or expand portions of the code that you do not want to modify.

Transform editor

This processor allows you to reshape a JSON object with simple {extract/generate} pairs. You can use this editor to extract names from JSON code and generate preferred names in the output.

In the Editor Examples section, expand the Transform editor menu, and select Simple JSON record.

In the Transform rules section you can select the node from the incoming data in the left column and define its name and location for the output in the right column.

By providing transform rules, you can select which record values to keep and which to drop. Only properties that are specified in a transform rule will be part of the output or export record. You can also promote parent properties to child items.

extract: Enter the JSON key that you would like to transform (or rename). Click the field for a drop-down list of all JSON keys available in your sample data.

generate: Enter the JSON key that you want to replace the extracted name in the output.You can access the transform editor when applying transforms to a step in a flow with the transform icon.

For more information on transform rules, see Apply transform rules.

Integration Explorer

The Integration Explorer allows you to quickly navigate to any resource throughout your integrator.io account so that you can copy and paste testing data as needed. From the Integration Explorer menu, expand the integration that contains the resource you want to access.

The example image above shows an expanded integration named 3dCart - FTP. The integration contains three flows: 3dCart customers to FTP, 3dCart orders to FTP, and 3dCart producst to FTP. You can click Open in Flow Builder to open the flow, but you can also navigate to any specific resource within the flow. The 3dCart orders to FTP flow has one export (Get 3dCart orders) and one import (Import FTP files). Expanding the import reveals the following options:

• View Import: This opens the Edit import pane.
• View Connection: This opens the Edit connection pane.

You can use this navigation strategy to copy tested data into a specific field for a resource or to copy accurate sample data into one of the Playground tools.