Telerik blogs

It’s time for the fifth and final part of the series of blog posts created to show you how to integrate each of Telerik’s cloud-powered controls for Windows Phone into a single app. This post will show you how you can bring the communication with your users to the next level so that you can easily reach them anywhere at any time.

Recap

The application that we are using to present the controls is called Memories. It allows users to store the most memorable moments in their lives. First we added the user's authentication, then we added the memory items, their galleries and last time we allowed the users to save their preferences as application settings and added error notifications that would help us find any existing issues in our application. This time we will focus on the communication with the user by extending our app with notifications and feedback capabilities.

Notifications

Wouldn’t it be nice if you could promote your new application to your existing user base? Wouldn’t it be nice if you could share your new website with them? Wouldn’t it be nice if you could notify them about the features introduced in the latest update? RadCloudNotificationControl comes to the rescue. 

We are going to use the control to check for new notifications and display the first that has not been shown yet. All we need to do is add an instance of the control where we want to display the notification and call the method ShowFirstNotificationAsync:

Memories.xaml.cs:
private async void CheckForNotifications()
{
    RadCloudNotificationControl notificationControl = new RadCloudNotificationControl(typeof(EverliveNotificationItem));
    await notificationControl.ShowFirstNotificationAsync();
}


You can call the method when you want the notification to be displayed, for example at the end of the page constructor of the Memories page:

Memories.xaml.cs:
public Memories()
{
    InitializeComponent();
    
    this.CheckForNotifications();
}

At this point the application is actually ready to be released, however when we want to send an actual notification, we will need to define it on Everlive.com. If you want to have custom notification type you can easily extend the default EverliveNotificationItem and specify your custom type when you initialize RadCloudNotificationControl. For our application the default notification type will be more than enough. So let’s go to Everlive.com and create the structure of the EverliveNotificationItem type:

See the content type definition of EverliveNotificationItem


Now let’s take a closer look at the fields that we have just added. Title and Message obviously contain the title and the message of our notification. TaskToExecute and TaskToExecuteArgs allow us to execute a specific action if the user is interested in our notification. TaskToExecute is an enumeration with these possible values:

public enum TaskToExecute
{
    None = 0,
    MarketplaceDetail = 1,
    WebBrowser = 2,
    AppNavigation = 3,
}

They relate to the action that will be executed, if the user presses OK, with the arguments defined as TaskToExecuteArgs. If we use MarketplaceDetail, the user will be navigated to an app in the marketplace. If we use WebBrowser, the user will be navigated to a web page. And if we use AppNavigation, the user will be navigated to a page within the application. IsActive allows us to create notifications in advance, but activate them when they become relevant.

Let’s create our first notification. Open the EverliveNotificationItem content type on Everlive.com and choose “add an item”. Create this item:

How to create a new notificaiton through Everlive portal.

Now when our users run the application, they’ll see the notification that we have just created even if they have installed the application long time ago:

How the notificaion looks in the application

Since we chose the WebBrowser task, if the user presses Yes, they will be navigated to the page of Windows Phone at Telerik’s website, because this is the address that we defined in our notification. 

Feedback

The last feature that we will introduce in the Memories application is the ability to get feedback from the users and send them responses within the app. Let’s add a new page that the users will be able to send their feedback. Add a new page in the Views folder and name it SendFeedback and add the telerikPrimitives prefix:

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"

SendFeedback.xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <telerikPrimitives:RadTextBox
        x:Name="feedbackContent"
        TextChanged="OnFeedbackContent_TextChanged"
        AcceptsReturn="True"
        MinHeight="181" />
    <Button
        Grid.Row="1"
        IsEnabled="False"
        x:Name="sendButton"
        Content="send"
        Click="OnSendButton_Click"/>
</Grid>

SendFeedback.xaml.cs:
private async void OnSendButton_Click(object sender, RoutedEventArgs e)
{
    EverliveFeedbackItem feedbackItem = new EverliveFeedbackItem();
    feedbackItem.Message = feedbackContent.Text;
    feedbackItem.CreationDate = DateTime.Now.ToLocalTime();
    await RadCloudFeedbackControl.SendFeedback(feedbackItem);
 
    this.NavigationService.GoBack();
}
 
private void OnFeedbackContent_TextChanged(object sender, TextChangedEventArgs e)
{
    sendButton.IsEnabled = !string.IsNullOrEmpty(feedbackContent.Text);
}

EverliveFeedbackItem is the default value type for items handled by RadCloudFeedbackControl. You can easily extend it, but it won’t be necessary for our app since it already contains all the information that we will need.

Let’s define the EverliveFeedbackItem on Everlive.com as a new content type with the following structure:



We have a page for sending new feedback, but we will also need a page where the feedback history is accessible and where the user will be able to see the developer’s responses. Let add a new page and name it Feedback:

Feedback.xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <telerikCloud:RadCloudFeedbackControl
        x:Name="feedbackControl"
        DeveloperName="Memories Team"
        SendFeedbackNavigationUri="/Views/SendFeedback.xaml" />
</Grid>


Add an application bar to this page that will allow users to navigate to the SendFeedback page:

Feedback.xaml:
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/Add.png" Text="new" Click="OnAdd_Click" />
        </shell:ApplicationBar.Buttons>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>


You need to specify the type of the feedback items that will be used by the control:

Feedback.xaml.cs:
public Feedback()
{
    InitializeComponent();
    InitFeedbackControl();
}
 
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
 
    if (e.NavigationMode == NavigationMode.Back)
    {
        await this.feedbackControl.RefreshFeedbackItemsAsync();
    }
}
 
private void InitFeedbackControl()
{
    this.feedbackControl.ItemsType = typeof(EverliveFeedbackItem);
    this.feedbackControl.UserName = CloudProvider.Current.CurrentUser.Username;
}
 
private void OnAdd_Click(object sender, EventArgs e)
{
    this.feedbackControl.GoToSendFeedbackPage();
}


What’s left is to simply add a link to the Feedback page in the application bar of the Memories page:

Memories.xaml:
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton Text="new" IconUri="/Assets/AppBar/Add.png" Click="OnNewMemoryButton_Click"/>
        </shell:ApplicationBar.Buttons>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="settings" Click="OnSettings_Click"/>
            <shell:ApplicationBarMenuItem Text="feedback" Click="OnFeedback_Click"/>
            <shell:ApplicationBarMenuItem Text="logout" Click="OnLogout_Click"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Memories.xam.csl:
private void OnFeedback_Click(object sender, EventArgs e)
{
    this.NavigationService.Navigate(new Uri("/Views/Feedback.xaml", UriKind.RelativeOrAbsolute));
}

Now here’s the expected flow:

1) User runs the application, goes to the feedback page and send their feedback:

This is how the page of the user will look when they send feedback

2) The developer reads the feedback, which is in the Cloud, and writes the response:

This is how the developer responds to the received feedback

3) The user receives the response on the feedback page in the app:

This is how the page of the user will look when the developer's response is received

Conclusion

And that concludes the series. The application is ready and all of the cloud controls found their spot. You can download the full source code of the Memories application from here.

More about the controls that were included in this post is available in their respective documentation: RadCloudNotificationControl and RadCloudFeedbackControl.

If you still haven’t tried Cloud Controls for Windows Phone, you can go to your Telerik account and download Q2 2013 SP1 which contains the CTP version of these controls. For a better grasp of their capabilities you can download our Examples application which demonstrates their common usages.


TodorPhoto
About the Author

Todor Petrov

Todor Petrov has been with Telerik since 2011, working on the Android and Windows Phone UI suites. He is passionate about technologies, movies and music.

 



Related Posts

Comments

Comments are disabled in preview mode.