Collecting Contact Information
In Part I, we established a Capture Customer Info Web Flow. Now, we're going to build out the UI associated with that flow so that users can submit their information, and then apply that information so that we can send users outgoing messages later on.
Building the Capture Customer Info Form
The Capture Customer Info Web Flow comes with a Web Page already nested underneath. Rename this Web Page "Collect Info Capture Form":
Add the following Web Controls to the Contact Info Capture Form, in this order:
Label Control (Variant: headerMedium)
Change text to: "Please provide your contact information"
Label Control (Variant: inputLabel)
Change text to: "First Name"
Text Input Control
Change data binding to:
first_name_input
Label Control (Variant: inputLabel)
Change text to: "Last Name"
Text Input Control
Change data binding to:
last_name_input
Label Control (Variant: inputLabel)
Change text to: "Email Address"
Email Input Control
Keep data binding as
email_input
Label Control (Variant: inputLabel)
Change text to: "Phone Number"
Phone Input Control
Keep data binding as
phone_input
The end result should look as follows:
[block:callout] { "type": "info", "body": "If you want review the fundamentals of Web Controls or Variants, check out the Appendix or FAQ associated with Your First App (A Simple Form)." } [/block]
To enforce TCPA compliance when we send text messages to users later on, we're going to need to collect information on what state the user lives in. Add two more Web Controls:
Label Control (Variant: inputLabel)
Change text to: "State"
Dropdown List Control
Change data binding to
state_input
With the State Dropdown List still selected, go to the General tab. In Type of List, choose Custom Expression. Under Data, paste the following List to populate the dropdown options:
Each item in the List represents a state in the US and will be available for selection in the associated dropdown menu.
Add one more Web Control to the bottom of your Contact Info Form Captured Web Page:
Button Control (Variant: default)
Change text to: "Continue"
Save the app.
Creating the App Object
Go to AirData Builder and create a User Info App Object with the following fields to store the captured information:
first_name
Variable of TypeText
last_name
Variable of TypeText
email
Variable of TypeEmail
phone
Variable of TypePhone
state
Variable of TypeText
timezone
Variable of TypeText
Then save the app and confirm all changes this will make to the Datastore.
Creating the Data Flow
In order to save information into the AirData Object we just made, the next step is to create a Data Flow that can save information to AirData.
Go to Connections Builder and create a Data Flow from scratch. Rename it to “Save Contact Info”.
Then, in Start, add the following:
first_name
Variable of TypeText
last_name
Variable of TypeText
email
Variable of TypeEmail
phone
Variable of TypePhone
state
Variable of TypeText
timezone
Variable of TypeText
Click on the ‘+’ icon between the Start and End sections of the Stage and add an AirData Request Data Operation.
In App Object, select the User Info App Object we have just created
For Type select INSERT
In Objects to Insert or Update, enter the Keys one by one by clicking on the ‘+’ icon and match each Key with their corresponding Variable:
In Run Results, click on the Run button to ensure that your Data Flow runs.
Save the app.
Saving Input and Initializing the Actor
Return to the Web Flows Builder and Inspect the Continue Button in the Contact Info Capture Form Web Page. In the Actions tab of the Inspector, add a Run Data Flow Action and select the Save Contact Info Data Flow to run. Use the variables given to the Contact Info Captured Event as Web Flow input.
first_name
=first_name_input
last_name
=last_name_input
email
=email_input
phone
=phone_input
state
=state_input
timezone
=session.Timezone
In order to send Notifications to users, we need to initialize the Actor.
To begin the process of Actor initialization, let’s set a few Variables with the data from the form into the actor
namespace.
Staying in the Actions tab associated with the Contact Info Captured Event, add six Set Variable Actions:
actor.first_name
as Variable andfirst_name_input
as Valueactor.last_name
as Variable andlast_name_input
as Valueactor.phone
as Variable andphone_input
as Valueactor.email
as Variable andemail_input
as Valueactor.region
as Variable andstate_input
as Valueactor.time_zone
as Variable andsession.Timezone
as Value
Add an Initialize Actor Action.
You've now finished building the first Web Flow of your Journey. Not only does it collect contact information from users and save it to AirData, this Web Flow also uses the collected information to initialize the Actor. This will have powerful implications later on, when we program our application to send automated messages.
Save your progress and get ready build out the appointment-scheduling portion of your application.
Last updated