Try It Out

This very quick quickstart is going to help you design a simple form to collect customer information and email it to yourself using a flow

Prerequisites

You will require a user id with either Admin or Developer role. If you don’t have one please check with your Administrator.

Form Design

Customer Information Form

To start with we are going to create a customer information form and collect the following details:

• First Name
• Last Name
• Phone Number
• Email
• Opt-in permission to send them a news letter

Designing the Form

Access the URL for Turbo Apps Development (or sandbox) system and login to the app. If you are logging into the Turbo Apps after initial setup you will see an empty list. If others have created forms you will see those.

1. Visit the Turbo Apps URL
   • If you are accessing the cloud this is usually https://.sbox.turboapps.io where domain is your company specific tenant name such as “unvired” or “acmecorp” etc
   • If you are accessing an on-premise system the domain is usually preconfigured by your administrator, if its not enter the domain
2. Login using the configured auth provider (EMail, SSO etc)
3. Click on Forms in the sidebar
4. Click on Create button on the top and select Form
5. The form designer is now displayed and we will now be adding a few controls to collect the required information. Note that a Submit button is already added for you
6. The form component bar is displayed on top. From the Basic set you can drag and drop components to your form
   • Drag and drop a Text Field to the form. If the properties are not already displayed, click on the edit :fontawesome-solid-gear: icon
   • Change the label to First Name. Under the API tab the Property Name should be set to firstName, if not change it. Since First Name is a required field, now click on the Validation Tab and select the Required checkbox
   • Now drag and drop another Text Field and set the label to Last Name. The Property Name should be lastName and the Required checkbox should be selected
   • Now from the Advanced set, drag and drop a Phone Number field. The label should be preset to Phone Number and the property name to phoneNumber. We will not choose the Required field as phone number is an optional field in our example
   • Next from the Advanced set, drag and drop an Email field. The label should be preset to email. You can also select the Required checkbox under validation to make it a mandatory field
7. Last, from the Basic set drag and drop a Checkbox on to the form. Change the label to “Send me your newsletter” and change the Property Name to optIn. Click on the Validate tab and select the Required check box also.
8. Now click on the Save button. You will now be prompted for the following:
   • Title: Enter “Customer Info” as the title
   • Description: This is an optional field but we will provide one. Enter “This form collects customer information to onboard them”
   • Category: You can leave it at Default
   • Click on Create
   • Your brand new form is now created. Now click on the Preview button to preview how the form looks like to the user
9. There is one more step to do. To make this form available to users we need to Publish it. Click on the Publish button and enter “Initial version” as the comments and click on Publish
10. Now click on “Forms” in the breadcrumb on to navigate back to the list of forms
11. Your brand new “Customer Info” form is now listed. Its now time to design a Flow to send the data as an email to yourself

Flow Design

Customer Information Mail Flow

1. In the “Customer Info” form row, select the More button and select the Flows option
2. A popup is displayed with the list of flows. Since we just designed this form it will be empty
3. Now click on the Create button and select the Form Action Flow option
4. You will now be prompted for some additional details:
   • Title: Enter “EMail Customer Info”
   • Description; “EMail the customer information to the onboarding team”
   • Form Action: Select the “On Complete” option
5. The flow builder is now displayed with three nodes:
   • Manual Flow
   • Success
   • Error
6. Now click on the Form Action Flow node. A :fontawesome-solid-circle-plus: icon is displayed below allowing you to add more nodes
7. Click on the :fontawesome-solid-circle-plus: icon to display the node list
8. Type in “mail” in the search field under the All category and selct the Email node
9. The email node is added as a step in the flow now
   • Enter the name of the step as “mailonboarding”
   • Enter the Email Subject as “Onboarding mail”
   • In the Email Message field, click on the :fontawesome-solid-wrench: icon to display the Expression Builder
     • In the Expression field enter the text “Onboarding data submitted: ” and then from Form Fields above select Form Data. The text displayed in the Expression field will now be: Onboarding data submitted: ${formdata}
     • Click on Save
   • In the Recipients choice select Emails
   • Under Recipient Emails enter your email, for eg. me@example.com
   • Click on the :fontawesone-solid-floppy-disk: icon to save the step
10. Make sure the nodes are all connected. Manual Flow should be connected to mailonboarding. Similarly the success path of mailonboarding should be connected to “Success” and error path to “Error” step.
11. Now Save the flow

That’s it. Whenever a form is filled and submitted an email will be sent to the mail id you entered above.

Test

Run the flow

We hear you! The Turbo Apps Flow Builder includes a built in debugger that helps you run your flows and test them. This allows you to not just build the flows and look at results from intermediate steps but also to test it.

• In the “Flow Builder” screen, click on the Run button
• A Run dialog is now displayed. Click on the Form Data button. The form you designed is now displayed
  • Enter First Name: John
  • Enter Last Name: Doe
  • Enter Email: john.doe@example.com
  • We want to receive the newsletter, select it
• Now click on Submit to save the test data. In actual use the data entered by the user is sent but in our test case the entered here is used
• Now the Run button is enabled. Click on it
• If all goes well, the runner will display a trace of the different steps in the flow. In our example there is only a single step mailonboarding which will display a final result of “1 Emails sent”
• Check your Inbox to see if the mail with the submitted data is received

That brings us to the end of this very quick quickstart :fontawesome-regular-thumbs-up: