# Finalizing the App

You've created both the UI to collect user information and an AirData App Object to store the information in. Now, let's connect the two.

## Video

\[block:embed] { "html": "\<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FVmge7oNY71E%3Ffeature%3Doembed\&display\_name=YouTube\&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVmge7oNY71E\&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FVmge7oNY71E%2Fhqdefault.jpg\&key=f2aa6fc3595946d0afc3d76cbbd25dc3\&type=text%2Fhtml\&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true">", "url": "https://www.youtube.com/watch?v=Vmge7oNY71E\&feature=youtu.be", "title": "Building your first application: Connections (4/4)", "favicon": "https://www.youtube.com/s/desktop/8d3f0079/img/favicon.ico", "image": "https://i.ytimg.com/vi/Vmge7oNY71E/hqdefault.jpg", "provider": "youtube.com", "href": "https://www.youtube.com/watch?v=Vmge7oNY71E\&feature=youtu.be" } \[/block]

## Tutorial

### Creating the Data Flow to Insert Data

A [Data Flow](../../studio/studio/data-flows) has to be created from [Connections Builder](../../studio/studio/builder-bar/connections-builder) to send the data back to [AirData](../../working-with-data/working-with-data-overview/airdata).

<details>

<summary>What is a Data Flow?</summary>

**Data Flows**

**Data Flows** are custom connections. Conceptually, **Data Flows** work like functions: they take in input, process it, and return the resulting output (if applicable). **Data Flows** are primarily used to connect the front-end of Airkit apps to back-end systems, be they are part of Airkit (such as AirData) or external (such as Salesforce). Any data processing that must occur in order to make these connections smoothly will also be done within a **Data Flow**. For instance, if an API request returns a JSON object from which only a single attribute is worth displaying to the app user, it is within a **Data Flow** that the relevant information will be isolated.

For a deeper discussion on **Data Flows**, see [Data Flows](../../studio/studio/data-flows). For more information on the different kinds of Data Operations available, see the [Data Operations Overview](../../data-operations/data-operation-overview).

</details>

<details>

<summary>Why create a Data Flow to send information to AirData when it has already been bound to a variable?</summary>

**Working with Data**

When a value is bound to a variable, that value is tied to an individual [Session](../../concepts/sessions). This simplifies the process of keeping track of information in the short term. If our contact form becomes published, and both Alice and Bob fill it out at the same time, the value of **name\_input** will be different in Alice's Journey than in Bob's. Airkit will handle the details of keeping them separate.

However, outside of any Session, we, the app builders, might want to access certain information collected from all uses of our application. Upon sending out a Contact Form, for instance, we will likely want to be able to access information submitted by everyone, on every Journey, and thus we want to collect all relevant information in one easily-accessible place: AirData. (Note that while, in the case of creating a simple Contact Form, all bound variables are relevant, this will not always be the case. AirData App Objects are customizable precisely so that builders can store information in the way that is most conducive to their use case, rather than being bogged down by automatically-collected but ultimately cumbersome data.)

For a deeper diving into how data is conceptualized in Airkit as well as the crucial difference between binding data to a variable and saving it to AirData, check out [Working with Data](../../working-with-data/working-with-data-overview/variable-namespaces).

</details>

1. From **Connections Builder**, click on **Data Flow** and then on Create Blank to add a new Data Flow.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-709f170dc9f6fccee02c48774a703421bf4aba5f%2Fbuilding-your-first-app-3-v184-0.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

Once added, double click on it to rename it as "**Insert Content**".

3. In the Inspector section, add the Inputs that will enable you to pass the _Values_ from the Form Inputs to the **Data Flow** and back to **AirData**. When all data types display, select the Text input and rename it to `name`; select the Phone input and rename it to `phone` and do the same with the other two fields.&#x20;

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-988bba8f39cf5fe1b99678b5dcf39eed2d6ee1af%2Fbuilding-your-first-app-3-v184-1.png?alt=media)

4. Add a **Data Requests > AirData Request** operation by clicking on '+' the icon in the Stage.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-5fe7074b5ef725821a14ccb4cf6bb602a03b18af%2Fbuilding-your-first-app-3-v184-2.png?alt=media)

5. Inside the **AirData Request**, choose from the dropdown the App Object (**Contact**) that will save the information and select INSERT as the **Type** of operation to perform since it allows adding an item into AirData. In **Objects to insert or update**, complete the **Value** column with the Input Variables corresponding to each **Key**

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-6b9b9a32bf1c82fc6b288adb6a1a09881bfe5352%2Fbuilding-your-first-app-3-v184-3.png?alt=media)

To test the Data Flow and make sure it is sending the information back to AirData, go to **Run Results** and click on **Run**. Then save the application and go to **AirData Builder** to check if the data was inserted.

### Connecting the Data Flow to the UI

Now that the Data Flow is working and sending data to AirData Builder, go back to Web Flows Builder to connect the operation to the UI. In Web Flows Builder, you can define the Action Chain to be run when the users click on “Submit” once they finish completing their Form. This Action Chain is triggered by the Airkit Event of a user clicking the button.

<details>

<summary>What is an Action Chain?</summary>

**Actions**

An **Action Chain** is a series of **Actions** taken sequentially.

**Actions** are a broad category. They can be do everything from [run a Data Flow](../../actions/the-run-data-flow-action) to [navigate to a specific Web Page](../../actions/navigate-to-web-page-action) to [create a timer](../../actions/the-start-timer-action). There's also the [Condition](../../actions/the-condition-action) Action, which makes it possible to create branching **Action Chains**, where different **Actions** are taken depending on whether or not certain conditions are met.

For more on how to created an **Action Chain**, see documentation on [Action Inspector Tab](../../studio/studio/events/action-chains), which is where \*\*Action Chains \*\*are defined. For more on the different kinds of **Actions** that can be taken, see [the reference documentation](../../actions/analytics-identify-action)

</details>

<details>

<summary>What are Airkit Events?</summary>

**Airkit Events**

In the context of the Airkit platform, **Events** refer to any catalyst that might trigger an [Action Chain](../../studio/studio/events/action-chains). All Action Chains are associated with a particular **Event**. It is when – and only when – an **Event** is fired that its associated Action Chain is performed.

At its core, an Airkit **Event** is a piece of information that tells the platform something happened and might include optional metadata about the Actions that will consequently be taken. Not all **Events** will be associated with an Action Chain. An Event **merely** signals that the platform must check and see if there are any Actions to take. In this way, an **Event** like a letter: it's sent from somewhere, but ultimately once it gets to the recipient, the recipient decides what they do with it. The letter might spur some action, or it might be thrown directly in the trash.

When we say that **Events** tell the platform "something happened," we are being deliberately vague. All kind of things might trigger **Events**. A user clicking a [Button Web Control](../../web-controls/button-web-control) is an **Event**, as is the [instance before sending an SMS message](../../voice-and-chat-controls/decision-menu-control), as is updating a [Web Flow](../../web-controls/web-flow).

There are many different types of Airkit **Events**, including [Starting Events](../../studio/studio/events/starting-events), one of which you've already created in the [Journey Builder](https://github.com/airkit/airkit-docs/blob/master/docs/v18-4/journey-builder.md), and [Control Events](../../studio/studio/events/control-events), including the 'Clicked' Event associated with all [Button Web Controls](../../web-controls/button-web-control).

</details>

1. Click on the “Submit” button and go to the Actions tab in the Inspector.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-341ee15023e9c84c3d24151f5a5efc06aed4465a%2Fbuilding-your-first-app-3-v184-4.png?alt=media)

2. Click on the '+' icon for the Actions menu to display and select Run Data Flow from the Data Options.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-6d8f71505c4c86683f00943971c52e4d300df481%2Fbuilding-your-first-app-3-v184-5.png?alt=media)

3. Pick the previously created Data Flow and complete the displayed Inputs with the Input Variables of the Web Page. They will be suggested as you type, and you can select them by pressiong _Tab_:

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-d8698d20d1c50a5417a068aa716cb90e4bbb50e0%2Fbuilding-your-first-app-3-v184-6.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

4. Save the app and it will be ready to be tested.

### Previewing the App

Once the app is all set, it can be tested in the App Preview.

1. Click on Preview at the right-hand corner of the Studio, which will open a new tab.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-f2a5df2fdce2f6c4b5e994ccbe071b8a1b0a25ee%2Fbuilding-your-first-app-3-v184-7.png?alt=media)

2. Click on the globe icon, which allows the app to be launched from the start.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-7575b320c5a56a29217a3496db1b859b2e771c85%2Fbuilding-your-first-app-3-v184-8.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

3. Complete the fields and click on “Submit”.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-cc11b33f1ae0ecb5def5f6e95b2f063cddd65cc3%2Fbuilding-your-first-app-3-v184-9.png?alt=media)

> 🚧 Phone Input Validation If a value entered into the Phone Input Web Control is not a valid phone number (as defined by the [ISPHONE](../../airscript-expressions/phone-functions/isphone) Airscript function), the phone input value will evaluate to `NULL`.

As expected, it will take the user to the Thank You Web Page.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-bb4bfa888597e88514c3017fa8a14f29edfa0db1%2Fbuilding-your-first-app-3-v184-10.png?alt=media)

4.  Finally, go back to AirData Builder and check if the entered information has been saved into AirData:

    ![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-013bd93c3cd507d65430efcdbbc5976072b20bb9%2Fbuilding-your-first-app-3-v184-11.png?alt=media)

Now the application is ready to be published.
