Form Helper

Include forms to gather user input on Embed (white label integration portal) for use in Flows

Overview

The Form Helper can be used together with the Embed Feature (white label integration portal) to receive custom user input from your users which can then be used in the Embed Flow.

Actions

The Form Helper has only one default action - Create Form. It has only one field, which is used to create the form using the UI Form Schema that is also used to create the input forms for actions within Locoia.

There you can specify all attributes of the field seen by your users - such as if a field is required, what kind of field it is, etc. Learn how to get started with creating UI Form Schemas on this page:

Building Connector Actions

Referencing User Input within Embed Flows

The Form Helper can accept various types of input: select, switch, and nested objects. Use regular Jinja referencing to reference user input within Embed flows. This starts with the Form Helper's reference, followed by referencing the individual fields by their unique reference. Nested properties can also be used.

Example based on the UI Form Schema below:{{ form.contact_info.company }} {{ form.contact_info.email }} {{ form.accept_terms }}

Schema

{
   "contact_info":{
      "title":"Contact information",
      "type":"nested_object",
      "children":{
         "company":{
            "type":"text",
            "title":"Company name",
            "required":false
         },
         "email":{
            "title":"E-Mail",
            "type":"select",
            "enum":[
               ""
            ],
            "allowCreate":true,
            "multiple":true,
            "placeholder":"[e-mail]",
            "required":true
         }
      }
   },
   "accept_terms":{
      "title":"Accept terms",
      "type":"switch",
      "default":true,
      "info":"please accept terms and conditions",
      "required":true
   }
}

Setup Step-by-Step

1. Creating a Flow with a Form Helper

A part of the flow could involve reading an export file from an FTP server, for example. The challenge is that each customer's folder name may vary slightly. Thus, the user needs to specify their folder name in the embed setup.

The UI Form Schema in the form helper could in this case be:

Schema

{
  "folder_name": {
    "title": "Folder Name",
    "type": "text",
    "required": true,
    "placeholder": "external-exports",
    "info": "The folder name used for exporting data"
  }
}

To reference this field later in the Flow, you need to consider the references assigned to the Form Helper itself—in this case, ftp_user_details:

So, you can read the name of the folder entered by user and use it in the next step (here FTP helper step) ftp_user_details.folder_name

Reference to FTP Helper step examlpe

2. User input their details

During the Flow setup, your users will now see your form and can use it to fill in their individual details (or in this case have to, as you marked the field as required):

The Form Helper Step will always be shown as the last step in the Flow setup.

That's it! Now all the created Embed Flows include the user input of your respective end user.