Building an Appointment Tracking App by using Telerik’s WP Cloud Components - Part 2

by Michael Crump on September 03, 2014 | Build Cross-Platform Mobile Applications with Telerik Tools

Hello everyone,

In Part 1 of the series, we’ve started creating an app that uses Everlive as its backend storage mechanism and used our first cloud component control called RadCloudLogin with SocialSharing via Facebook. In Part 2 of the series, we will continue adding several other cloud-powered components such as RadCloudRegistration (in case they choose not to use a social provider) as well as tie in our RadCloudCalendar control.


We are going to begin by editing our Registration.xaml page by replacing the ContentPanel with the following XAML.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

In this sample, we are using our RadCloudRegistration component and have added two methods for a successful registration or a failed registration. Go ahead and resolve the event handlers and look at the Registration.xaml file inside the Visual Studio designer as shown in Figure 1.

Figure 1: The Registration.xaml page showing the RadCloudRegistration Page.

As you can see with just a couple of lines of XAML, we have provided a way for the user to create an account if they choose not to use a social provider (like Facebook). If you were creating this registration screen yourself, then you would have had to of added several TextBlock controls for the titles, TextBox controls for the fields and a button for the user to sign up. Using RadCloudRegistration, it handles this for you.

Let’s go ahead and wrap up this page by adding in the appropriate handlers for the RegistrationSuccess and RegistrationFailed events as shown below.

private void OnRegistrationSuccess(object sender, EventArgs e)
 this.NavigationService.Navigate(new Uri("/Views/Appointment.xaml", UriKind.RelativeOrAbsolute));
private async void OnRegistrationFailed(object sender, RegistrationFailedEventArgs e)
    await RadMessageBox.ShowAsync("Registration failed!");

Please note that you will have to resolve the namespaces for the OnRegistrationFailed event.

Looking at the code snippet, if the registration process is successful, then it will navigate to our Appointment page. If it fails, then simply display a MessageBox informing the user.

Behind the scenes with Everlive

Let’s run our app again and select, “Create an Account”, which takes us to our Registration.xaml page. Go ahead and fill out the data on that page and click “Sign Up”. If everything worked successfully, you should now see the Appointment.xaml page. Navigate to theEverlive site and select your project and look at your users table. We can see our new user has been added with a provider of Everlive as shown in Figure 2 (click to enlarge).


Figure 2: The Registration.xaml page showing the Provider as Everlive.

Everlive also automatically emailed the new user welcoming them to the application and asked to verify their email address.

That was easy!


Time to use yet another new Cloud Component! This time let’s edit our Appointment.xaml page by replacing the ContentPanel with the following XAML.

<Grid x:Name="ContentPanel" Margin="12,0,12,0">
 <telerikCloudControls:RadCloudCalendar Margin="-2,0,-2,0" x:Name="cloudCalendar" />
Take a look at the Appointment.xaml file in the Visual Studio designer as shown in Figure 3.

Figure 3: RadCloudCalendar with the default settings.

Let’s go ahead and wrap up this page by adding in the following code to Appointment.xaml.cs as shown below.

public Appointment()
    Loaded += Appointment_Loaded;
void Appointment_Loaded(object sender, RoutedEventArgs e)
   EverliveAppointmentSource everliveAppointmentSource = new EverliveAppointmentSource();

This code simply adds a Loaded event and initializes the cloud service that handles the appointments and stores them in Everlive.

If we switch back to Everlive, we will need to add the following content type as described in our help documentation located here.

Before we go any further, we will need to add in the ApplicationBar Icons for this control, which can be found here. Simply add a folder called, “Images” to your project and make sure the “BuildAction” is set to Content.

If we run the application, we will first see our calendar. Let’s select a date and press the “new” button to create a new appointment as shown in Figure 4.

Figure 4: Adding a new appointment with the RadCloudCalendar component.

Go ahead and save the record and you will see the “agenda” screen as shown in Figure 5.

Figure 5: The Agenda View is RadCloudCalendar.

If you select that appointment, you will be brought to the details screen where you have the ability to edit or delete the record without writing any additional code as shown in Figure 6.

Figure 6: The Details View in RadCloudCalendar quickly gives you the ability to edit or delete appointments.

Again, if we take a look at Everlive and view our content type called, “EverliveAppointment” then we will see the data the user entered as shown in Figure 7 (click to enlarge).

Figure 7: The Appointment has been added to Everlive in the EverliveAppointment content type.

What’s next?

We’ve extended our app to use other cloud-powered components such as RadCloudRegistration (in case they choose not to use a social provider). We also tied in our new RadCloudCalendar component to make appointment scheduling very easy. But the app is far from being finished, our end-user needs a way to log out, we want to take advantage of some of our design templates as well as other cloud components that will make our app look better in the marketplace. We will also incorporate the new Dev Center Templates to make this application easier for your end-user to send and receive feedback.


Michael Crump

Follow us