# Saving Appointment Information

In Part III, we built the Availability Schedule designating when appointments were available for selection. Now, we will tie it to the Scheduler Control in order to save the selected appointments and let users know that they were successfully selected.

## Creating the Schedule object

In **AirData** Builder, we will create an object to store the scheduled appointments.

1. Select **Add Schedule** and rename it to “Appointment Information”.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-967a4732a8f0b7694fc1889faf2dfafd26142f48%2Fsaving-appointment-information-v184-0.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

<details>

<summary>What is a Schedule in the context of AirData?</summary>

\


A Schedule Object is a type of App Object with a pre-defined structure intended to capture all relevant information pertaining to a scheduled appointment. Schedule Objects are used in tandem with a [Scheduler Web Control](../../web-controls/scheduler-web-control); when a Schedule Object is associated with a Scheduler, all relevant information collected by users from the Scheduler will be automatically inserted into that Schedule Object in AirData.

A Schedule Object must contain the following six properties:

* **session\_id** (`string`) - indicates the Journey that the appointment is associated with. This corresponds the Session ID (designated **session.id**) automatically assigned as a session-level variable at the start of each Journey
* **start\_time** (`DateTime`) - refers to the beginning date and time of the appointment.
* **end\_time** ( `DateTime`) - refers to the ending date and time of the appointment.
* **recurrence** (`number`)- indexes the block of time selected for the appointment. Count begins at 0 and on the first occurrence of a potential appointment window, as defined by the Time Slots that make up the Availability Schedule tied to the associated Scheduler Web Control.
* **calendar\_event\_id** (`string`) - serves as an identifier for the Time Slot (as defined in the Calendar Builder – note that this is _not_ the same as the selected block of time which is indicated by _**recurrence**_) that defined the selected appointment block.
* **calendar\_id** (`string`) - serves as an identifier for the particular instance of Schedule Web Control used to make the appointment. This becomes particularly relevant in cases a Journey contains multiple schedulers associated with the same Schedule Object.

For more on Schedules Objects, see [Schedule Objects](../../working-with-data/working-with-data-overview/airdata/schedule-objects).

</details>

2. Save the app and confirm all changes this will make to the Datastore.

## Tying the Availability Schedule and Schedule Object to the Scheduler Control

1. Go to **Web Flows** Builder. Navigate to the Schedule Appointment Web Page and add a Label indicating the users that appointments are in PST.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-9162504dc13754a2ae2f8e1495c2ca5f9ecb5083%2Fsaving-appointment-information-v184-1.png?alt=media)

2. Inspect the Scheduler Control. Under in **Control Properties > Calendar Restriction**, add the following Availability Schedule Key:

```javascript
"TCPA-CA-America/Los_Angeles"
```

This references an out-of-the-box Availability Schedule that encompasses all the times that California/Los Angeles TCPA regulations allow automated messages to be sent within. This accounts for local holidays, so when we reference this Availability Schedule as the Calendar Restriction, it prevents appointments from being made on these local holidays (as well as Sundays).

> 📘 Availability Schedule Keys are found the in **Schedules** Builder, when Inspecting the Availability Schedule in question. You actually designated you own Availability Schedule Keys in the Part III of this tutorial!

Also, adjust the Maximum Days Out to fit our 30-day display of the calendar, and change **Minimum Days Out** to 2, preventing anyone from making a same-day or next-day appointment:

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-cbddef843f0fdd891509fd7b3cd24567f92506e8%2Fsaving-appointment-information-v184-2.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

3. Under **Calendar**, select “9 to 5 all days but Friday”. Under **Schedule Data Object**, select “Appointment Information”.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-6309c84574c8aca54ef7be08251c7e78267aaac4%2Fsaving-appointment-information-v184-3.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

## Save appointment information as a local variable

Tying the Scheduler Web Control to a Schedule Object automatically saves the information associated with selected appointments to AirData. Often, however, it is necessary to save this information more locally as well, so as to be able to reference it more seamlessly in the downstream Journey. To this end, we'll create a global variable to store appointment information locally.

<details>

<summary>What is the difference between saving data to AirData and saving data as a global variable?</summary>

\


If you're familiar with the difference between saving data to the back-end and the front-end, that's precisely the difference between saving data to AirData and saving data as a global variable.

Saving data to AirData saves it to a database. This database can be queried, but the information stored within it is not by default available to be called on with the application. There's simply too much information stored in databases, and storing all that information so that it's readily available at all times wouldn't be very secure. To use data from Airdata within an application, you need to query AirData first, then save the returned information to a local variable.

Global variables are a type of local variable. They can be referenced within the application without needing to query anything, because they are stored locally.

</details>

1. Open the **Variables** Tree by clicking the **Variables** button at the bottom left of the Studio. Create a global variable of type `object` that matches the structure of **Appointment Information**. Name this variable `appointment`.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-a08e471e465412abfc0ba4745251cb7f4f197596%2Fsaving-appointment-information-v184-4.png?alt=media)

2. Back In **Web Flows** Builder, with the Scheduler Control selected, go to the **Actions** tab in the Inspector and add a **Set Variable** Action passing defining the newly-made global variable `session.appointment` as `value`.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-68a7d7d34cf4ef03bfbc6ac969d4846599e77204%2Fsaving-appointment-information-v184-5.png?alt=media)

<details>

<summary>Why does this global variable need to be referenced using the Session namespace when most of the previous variables we used could leave their namespace implied?</summary>

\


The Session namespace must be used to reference all global variables. This prevents bugs from arising should a global variable and a smaller-scope variable be assigned the same base name.

</details>

<details>

<summary>What does value refer to?</summary>

\


Some Control Events – such as the **Value Changed** Event associated with the Scheduler Web Control – have associated values. This information can be accessed within the associated Action Chain by referencing `event.value` or simply `value`, as Action Chains within Events implicitly default to referencing the Event namespace.

The format of the information stored in `event.value` changes depending on the nature of the Event, but in the case of the Scheduler Web Controls, its formatted according to the associated Schedule Object.

For more on Control Events, see [Control Events](../../studio/studio/events/control-events).

</details>

3. Add a **Navigate to Web Page** Action so that once an appointment time is selected, users are led to a Web Page the confirms their appointment time. Click on **Add Web Page** to do so:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-49dc5d55ad2e4cd3d451c540664cde8cccd09271%2Fsaving-appointment-information-v184-6.png?alt=media)

## Building the Thank You Web Page

1. Go to the new Web Page and rename it to “Thank You”. Then add two Labels. In the first one, type the message to the user, for example: "Thank you for scheduling your appointment!"
2. In the second one, enter the following appointment confirmation string:

```javascript
"Your appointment is at {{
FORMAT_DATETIME(
session.appointment
 .start_time,
 "h:mm A z on MMMM Do, YYYY",
 "en-US",
 actor.time_zone
 )
}}
."
```

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-92332ac383013611c3d0fa6afd2660c256113faf%2Fsaving-appointment-information-v184-7.png?alt=media)

This string confirms the selected appointment time by referencing the `DateTime` saved as `session.appointment.start_time`. It also utilizes the Airscript function [FORMAT\_DATETIME](../../airscript-expressions/datetime-functions/format_datetime) in tandem with the previously-set variable `actor.time_zone` to display the appointment time in the user's own timezone.

You've now finalized the Scheduler Web Control so that it saves the information associated with each selected appointment, both in AirData and locally. You've also used that information to customize the copy associated with a Label.

Save your progress and get ready to schedule some Notifications to send based on each user's selected appointment time.
