Web Mail—A New Demo Application using UI for ASP.NET AJAX

If you use Outlook's Web Access, you know it's convenient to access your email through a web client. With the new "Web Mail" for Telerik UI for ASP.NET AJAX, web access to your mail is now easy. Read on for a quick demo and rundown of the features.

Two weeks ago we covered all the new things we have put up in our latest release of UI for ASP.NET AJAX through a webinar. If you missed that webinar don’t worry, we have you covered. You can watch a recap right here. One of the exciting things in this webinar for me was the new demo application that our team released. We call it "Web Mail" You can take a look at the demo app right now by going here and playing around a bit.

The Plot

You might be thinking “Why Web Mail?” Let me ask you a question: “Do you use Microsoft Outlook?” Dumb question—everybody does. But do you know you can access your Outlook mailbox over web? Microsoft has what is called as Outlook Web Access or OWA—the web access to outlook mailbox which is nothing but a web application.

I work from home. Sometimes I am on my work laptop where I have Outlook Windows client installed and sometimes I am on my personal laptop. On my personal laptop if I have to quickly get to any of my work mail, I just access it through OWA. OWA provides me access to Mail, Calendar, People and Tasks. Here is a screenshot of the OWA interface:

Fig 1: Microsoft Outlook Web Access

What better example than OWA to showcase the potential of our AJAX suite? So let’s take a tour of our Web Mail.

Web Mail Application

If you haven’t taken a look at the demo, this may be a good time to give it a spin and come back. When you access the app you will first land on Mail view. Here's a screenshot of the default look:

 
Fig 2: Web Mail Demo Application

Notice the  icon at the top left hand corner of the page. When clicked this icon will reveal an application-wide menu. The menu will provide links to other views, namely: Contacts, Calendar and Notes. As a user you will be able to easily navigate between any of the views.

Let's continue our tour of the application—just sit back and read on.

Slider Menu

For the web mail demo application, the application-wide navigation is based as a slider. The slider slides in and slides out from the left hand side of the page. You access the slider by clicking the Icon found before the page title. Here is a screenshot of how you access the slider menu:

Fig 3: Slider Menu in Web Mail Application

Let me tell you a secret: There is no RadSlider in our arsenal.

I was amazed when our team crafted this sexy slider with just a div. Yes, when the page first loads the slider div is hidden. When you click on the menu icon, the slider is made to appear with a set width. The menu items themselves are actually our RadMenu control with Vertical flow & LightWeight rendering. A super simple solution that gives a modern look and feel.

This solution is pretty simple indeed, but let us know in the comments below if you need such an app drawer control as part of the Telerik ASP.NET AJAX suite.

Mail Section

This is the first section of the application. As the name indicates, this section mimics your mailbox. Let me list all the salient portions of this section. We have:

1. Mailbox Folder listings
2. Action bar which provides email related actions
3. Email listing grid
4. Email preview area

 Visually, the screenshot below will show you the different areas of this section:

Fig 4: Areas in Mailbox Section

The folder listing is provided using our RadTreeView control. The action bar is made using RadNavigation control. The mail listing is based on our ever popular RadGrid. You can group your emails or sort based on any columns displayed. The preview pane is just a div where we output the mail content. You can change how you preview the email. On the action bar we have two icons which let you change the preview area location—below or to the side of the email listing grid.

Just to give you a quick glance of all the supported features in this section, I have created the following GIF:

Fig 5: Mail Section Features

Contacts Section

This is the second section in the demo application. As the name says—you can manage your contacts in this section. You can see all of your contacts or favorite contacts or friends or work contacts. One of the features available in this section is the ability to create a new folder to store your contacts. You can create new contacts and while creating save them in one of the folders available (i.e. All/Favorites/Friends/Work/etc.). Searching for contacts by using a search box is also possible. If you ever have a need to export your contacts list to Word/CSV/Excel/PDF there is an Export function available on the action bar.

From a controls perspective we have used RadTreeView, RadNavigation, RadListView and RadSearchBox. Here is a quick glance on what features are available in this section:

Fig 6: Contacts Section Features

Calendar Section

The third section in the web mail demo application is the Calendar. I don’t have to explain much here. We make use of our RadCalendar, RadTreeView, RadNavigation, RadScheduler and RadClientExportManager AJAX controls in this section. You can play around to take a look at different features this section provides.

Here is a screenshot of different things you can do in Calendar mode:

Fig 7: Calendar Section Features

Notes Section

This is the last section of the demo application. The Notes section allows you to create quick notes and save them in different categories. You can create different categories to group your notes. You search for notes using the search box. You can select one or more notes and delete them using the delete button available in action bar.

This uses RadTreeView, RadGrid, RadNavigation and RadSearchBox controls. I'll let you play around with Notes yourself to explore these features further.

Get Your Hands Dirty

If you are as excited as I am with this demo application and if you are eager to jump start one of your projects based on this application—you're in luck. We have the complete source code available for this demo application. You can find the download link within the demo application itself, or download it right here. In the demo, look for Download link in the title bar of the app or in the drawer menu:

This was our attempt to showcase how, using UI for ASP.NET AJAX, you can build Modern looking, LightWeight and Responsive Web applications without breaking a sweat. Many of the controls used in this demo now support LightWeight rendering and with this you get to lighten your page size.

We look forward to hearing what you all think of this demo application. If you have any comments for us, please do write them below. We look forward to hearing from you soon.

PS: If you like what you are seeing then stay tuned. We will soon be releasing this as a Visual Studio template for you to use in your projects.