TEL KB Header Photo

WebApp Manual

Chapter 2. Basics

In this manual we describe how to use the WebApp.

2.1. What is the WebApp?

In short, the WebApp is a set of collaboration applications which can be accessed through a web browser.
Aimed at (but not limited to!) corporate users, the WebApp has all the major features that users of i.e. Microsoft Outlook use on a daily basis, such as email, calendars, contacts, notes and tasks.
Next to these basic features, the WebApp also offers advanced collaboration features such as instant messaging, presence and integration with telephony (VoIP) and web meeting solutions, social media integration and many more.
Because the WebApp is an open platform, it is very easy for developers to create new features and integrations for  WebApp. More and more of these features and integrations are being developed every day.

The aim is to let WebApp not just match, but also grow more and more beyond Outlook with every new release.

2.2. WebApp Requirements

In order to use the WebApp, a recent version of one of the following browsers is needed:
  • Apple Safari (version 5.1 and up)
  • Google Chrome (version 28) (starting with WebApp 2.0)
  • Microsoft Internet Explorer (version 9 and up)
  • Mozilla Firefox (version 5 or higher, preferred on all platforms)

2.3. Logging in

To login to the WebApp, point the browser to
The login credentials can be obtained from your Administrator. These by default consist of:
  1. A username
  2. A password
As a security measure all characters will be displayed as dots, when the password is entered.

Click Logon to log in to the WebApp.

2.4. WebApp Overview

Currently the Zarafa WebApp supports the most used features of Microsoft Outlook in a fairly comprehensive way. Additional features will be implemented in every new release.
WebApp offers a number of integrated applications, which are:
  • Mail
  • Calendar
  • Contacts
  • Tasks
  • Notes
  • Zarafa “Today”
All applications use the same interface style and elements, so a user will quickly find his or her way around in each of them. Each application will be covered by this manual in it’s own chapter.
After logging in, the user will be presented with the Mail application by default. In the next section we will illustrate the basics of the Zarafa WebApp, using the Mail application as an example. More specific information on the Mail application can be found inChapter 3, The Mail application.
Each application in the Zarafa WebApp can be divided into several main areas, as illustrated in Figure 2.2, “The main areas of WebApp”.
Main areas in WebApp
Figure 2.2. The main areas of WebApp


The main areas are:
Figure 2.3. The Shortcut Bar


As it’s name implies, the Shortcut Bar contains shortcuts; shortcuts to the various applications are located on the left while the Settings screen, Feedback and Logout are on the right side of the Shortcut Bar.
The Shortcut Bar also shows the full name of the currently logged in user.

The currently active application is highlighted in the Shortcut Bar for the convenience of the user.

2.4.2. Main Toolbar (2)

The Main Toolbar contains buttons with the most important functions for each application.
Some of the buttons have a drop-down option on the left side of the button, which allows to quickly access additional items.
The buttons which are available in each application are described in the next sections.
Application specific buttons are described in their respective chapters. New button

New button
Figure 2.4. The New button
The New button allows to create a new email, appointment, contact, task or note.
What will be created when the user clicks the button, depends on the active application. For example in the Mail application, theNew button will create a new email, while in the Calendar application, it will create a new appointment. In the Contacts application, it will create a new contact and so forth.

The drop-down option on the right side of the New button (see Figure 2.5, “The drop-down menu of the New button”) allows to quickly create a different item without having to switch to the needed application.

New button dropdown
Figure 2.5. The drop-down menu of the New button Address Book button

Address Book button
Figure 2.6. The Address Book button
The Address Book button allows the to access address lists such as the Global Address Book and the personal contacts from any application in the Zarafa WebApp.
This allows to quickly look up the details of a coworker or one of his contacts.
For more information on address lists and contacts, please refer to Chapter 5, The Contacts application. Refresh button

Refresh button
Figure 2.7. The Refresh button


The Refresh button forces the WebApp to check for changes and new data on the Zarafa server (i.e. new emails, changes in calendars etc.). This button is in a way comparable to the Send/Receive button that many email applications have.
WebApp will automatically check for changes when interacting with it (i.e. each time the user clicks on a folder or switches between applications). When there is is no interaction with the WebApp, it will automatically check for new emails every 5 minutes and every minute for new reminders.
The Refresh button can be useful for situations like these:
  • if the user wants to make absolutely sure he or she is looking at the latest data.
  • when working with shared resources (a shared email box, shared calendars etc.).
  • if the user is impatiently waiting for that important email he or she know it has been sent to him or her. Print button

Print button
Figure 2.8. The Print button
The Print button allows to print single items and/or overviews of multiple items in WebApp, depending on the application he or she is printing from.
This means that the Print button will behave differently in each application.
As such, if the user wants to print for example an overview of his or her calendar, he or she will have to navigate to the appropriate application (in this case Calendar) first. The user cannot print, for example, emails from the Calendar application or a task list from the Mail application.
At the time of writing, printing functionality has been implemented for the following applications:

Please refer to their respective chapters for more information. Switch View button

2.4.3. Folder Navigation Pane (3)

Archive stores are also shown in the Folder Navigation Pane, including archive stores of opened shared stores.

2.4.4. Main Window (4)

2.4.5. Widget Sidebar (5)

2.5. Changing the column layout

Context menu from a mail view column
Figure 2.9. Context menu form a mail view column

In Zarafa WebApp, each application has a default layout. For example, in the Mail application this is: a list of messages with aFrom and a Received column. However, like in Outlook, it is possible to change the layout by adding or removing columns. To do so, the user has to hover his or her mouse over any of the column headers (for example the From header) and click on the drop-down arrow that appears on the right side of the column header. Now he or sha can select the Columns option from the drop-down menu. A sub menu that looks like Figure 2.10, “Field Chooser” will appear.

Field Chooser

Figure 2.10. Field Chooser


The user can now select additional columns or deselect columns that he or she wants to hide.
Additionally, it is possible to sort the email list by selecting a specific column. By default email is sorted by the Received date column.

2.6. Public Folders

To search the user has to click the Search button in the tool bar. A search bar (see: Figure 2.11, “Searching Options”) will then be added to the WebApp view (to remove the search bar, the user has to click the Search button again).
Searching options
Figure 2.11. Searching Options

The search bar allows a user to enter a search query and choose where to search. For example if a user remembers just a part of a message’s subject he can select Subject from the pull down menu. After the query is keyed in the user should click theSearch button (looking glass icon) on the search bar, or press the enter on the keyboard. As shown in Figure 2.12, “Search Result”, the email list is updated with the results of the search query.
Search Result
Figure 2.12. Search Result

When finished searching press the Clear button (X icon) to return to the normal list view. To remove the search bar click theSearch button in the tool bar again.

2.8. Logging out

Chapter 3. The Mail application

3.1. Mail Overview

The Mail application contains the following elements, of which some are used in all other applications as well:
  1. The Shortcut Bar – Allows to switch between applications, access the Settings screen, provide feedback and log out (used in all other applications as well)
  2. The Main Toolbar – Contains buttons with the most basic functions (used in all other applications as well but provides different buttons depending on the application)
  3. The Folder Navigation Pane – This pane shows all email folders and allows to manage them (used in other applications as well, but provides different folders for each application).
All Outlook folders and the Public folders (the account has access to) can be accessed.


Some functionality is only available in the context menu that appears when right clicking on the folder items.
  1. The Main Window – In the Email application the Main Window consists of a Message Pane and a Preview Pane.
  2. The Widget Sidebar – Can contain user defined Widgets. Examples are the chat Widget, upcoming appointments and unread mail.

3.1.1. Mail: Main Toolbar Mail: New button Mail: Address Book button Mail: Refresh button

The Refresh button allows to force the WebApp to check for any changes on the server, which in the Mail application means that it will check for new emails. Mail: Print button

The Print button allows to print the currently selected message in the Message Pane.
For more information on printing emails, please refer to Section 3.2.5, “Printing emails”. Mail: Switch View button

3.1.2. Mail: Folder Navigation Pane

3.1.3. Mail: Main Window Mail: Message Pane Mail: Reading/Preview Pane

3.2. Working with Mail

3.2.1. Composing a new email

  1. Select the button New in the left corner. This will show a dialog like Figure 3.1, “Create Mail”.
    Create Mail
    Figure 3.1. Create Mail
  2. Attachments can be added to the email by selecting the Attachment button or the Paperclip icon.
  3. The current state of email can be saved by selecting the Floppy disk icon. After an email is saved, it is stored in theDrafts folder.
  4. The email can be marked as high or low priority by clicking on the according symbols or the gear icon next to them.
  5. To add a recipient, either add their email address in the TO, CC, or BCC field manually, or select a person from the Address Book. To access the Address Book, click on the TO, CC or BCC button.
  6. The BCC (as well as the From) field is hidden by default, but can be enabled by clicking the according symbols.
  7. By default the Global Address Book (which contains all internal users, among others) is shown when opening the address book (see: Figure 3.2, “Address Book”). By using the Show names from the: drop-down menu, it is possible to view contacts from either a personal contacts folders or a Public contact folder. Alternatively it is possible to search the current folder using the search field positioned in the top left of the window.
Address Book
Figure 3.2. Address Book Using automatic email address suggestion

When typing an email address or contact information in the TO, CC or BCC fields the WebApp automatically suggests names (a feature often known as auto complete). The suggestions are listed below the input field (see: Figure 3.3, “Automatic Suggestions”) and a suggestion can be selected by both mouse or keyboard. The suggestions are based on email addresses and contact information that have been used before.

Automatic suggestions
Figure 3.3. Automatic Suggestions Adding attachments to an email

Files can be attached to messages by clicking the Attachments button in the Create E-Mail screen. A window will open, which allows files to be uploaded.
If an email is sent before the WebApp has finished uploading the attachment(s), an error appears (see: Figure 3.4, “Attachments upload warning”).
Attachments upload warning
Figure 3.4. Attachments upload warning Message in Message

When you want to add attachments into a message you can chose between ‘File upload’ (1) and ‘Attach item’ (2). For example if you want to add an item from you inbox you should click on ‘Attach item’ from the drop-down menu as shown in Figure 3.5, “Attach item”.
Figure 3.5. Attach item
Figure 3.6. Insert item window
The ‘Insert item’ dialog, as in Figure 3.6, “Insert item window” contains the following elements:
Look in: You can select the appropriate folder from the hierarchy in the ‘Look in:’ window (1). For example you can select Inbox with a left mouse click.
Items: The ‘Items’ window (2) contains the content of the selected folder. By default, the item on top is selected.
Insert as (3): This setting enables the user to add items as ‘attachment’ or ‘text’ only. By default, setting is enabled as insert as attachment.

To add a file you must click on the ‘Ok’ button (4). For cancelling you should click on the ‘Cancel’ button (4). You are able to add only one item each time. Saving a draft an an email

Saving a draft of an email is possible by clicking the Save (a floppy disk) icon. The draft is stored in the Drafts folder.

3.2.2. Managing email

The following screenshot (Figure 3.7, “Context menu from a mail message”) shows the context menu that that gets displayed when clicking with the right mouse button on an email. This menu incorporates the most used functions of the element, like opening, printing, replying or forwarding (as attachment).
Context menu from a mail message
Figure 3.7. Context menu from a mail message Deleting email

There are several ways to delete an email. They are: Moving email

To move a single item it is most convenient to simply drag the item to its new location. Place the mouse cursor over the item to be moved, click and hold the left mouse button. Continue to hold the button down while moving the mouse cursor until it is over the folder the message needs to be placed.
Moving email
Figure 3.8. Moving Email


Notice that the folder names under the mouse cursor are highlighted while moving. This marks the folder where the message will be placed when releasing the button.
It is possible to move multiple items by simply selecting multiple items before moving the selection to the new folder (only items that are currently displayed can be selected, e.g. it is not possible to move items that are spread over multiple views).
This selection can be done in two ways (just like in most file managers):
  • To select a range of items click on the first item and then press and hold the shift button on the keyboard. Before releasing the shift button, use the mouse to click on the last item in the range that needs to be moved. All items between the two clicked items will become highlighted.
  • Items that are not closely spaced can be selected by holding down the control (Ctrl) key on the keyboard while clicking on each item. After selecting all desired items just release the control key and drag on of the selected items to its designated folders.

Instead of using drag and drop, items can also be moved by clicking on the copy/move button as displayed in Figure 3.9, “Copy/Move Button”. Copying email

To copy an item, the drag-and-drop feature can not be used as it does not duplicate items. Instead use the copy/move button as shown in Figure 3.9, “Copy/Move Button”. See the section above about moving multiple items for an explanation concerning how to select multiple items.
Copy/Move button
Figure 3.9. Copy/Move Button

3.2.3. Downloading Attachments from an email

Attachments can be downloaded one by one, by right-clicking the attachment and selecting Download.

3.2.4. Managing email folders

Creating, moving, renaming, copying or deleting (sub) folders is accomplished with the right mouse button in the Folder Navigation Pane. This pops-up a context menu as shown in Figure 3.10, “The context menu of a folder”.
Context menu of a folder
Figure 3.10. The context menu of a folder


It is not possible to delete, move, or rename default folders (like InboxDrafts and Deleted Items). Emptying the Deleted Items folder

The Deleted Items folder can be emptied by using the right mouse button, and selecting option Empty folder from the context menu. This option is only available from the context menu (accessed with the right mouse button) of the Deleted Items folder and the Junk Email folder. Marking all messages in a folder as read

Marking all messages in a folder as “read” is accomplished by the right mouse button menu option Mark All Messages Read. Please note that when this option is selected, no read receipts will be sent when requested by a sender, even if that option is selected in the settings. Using mail Folder Properties

The context menu option Properties shows additional information about a specific folder (like the storage size and the amount of items in the folder). For more details about the storage size, use the button Folder size…. Here a list of all the subfolders of the current folder and their individual sizes can be seen. Soft delete restore

The soft delete function makes the user able to recover an email that is deleted by accident.
Right mouse click on any folder from the hierarchy, for example the ‘Deleted Items’ folder, opens the context menu as shown inFigure 3.11, “The dropdown menu from the hierarchy”.
Figure 3.11. The dropdown menu from the hierarchy


Select the ‘Restore Items’ button from the context menu to open a ‘Restore from (Deleted Items)’ dialog, as shown inFigure 3.12, “Restore items window”.
Figure 3.12. Restore items window


The ‘Restore Items’ dialog contains the following elements:
Messages/ folders list By default the soft deleted ‘messages’ (1) list will be displayed. By selecting ‘folders’ (1) the soft deleted ‘folders’ list will be displayed.
Restore Select a message to restore it from the list. Now press the ‘Restore’ button (2) from the toolbar, the message is restored and can be found in the previous folder. In this case the ‘Deleted Items’ folder. By selecting multiple items (hold ctrl and select multiple items), you are able to restore multiple items. Select multiple items and then press the ‘Restore’ button.
Restore all In case you want to restore all the items from the ‘soft deleted messages’ list, you can use the ‘Restore All’ button (3). A warning appears: ‘Are you sure you want to Restore all items? By pressing the ‘Yes’ button, the entire list is restored and can be found in the previous folders.
Permanent delete Besides restoring messages and folders, you are also able to delete messages and folders permanently. Select an item from the list and then press the ‘Permanent Delete’ button (4). But beware; this item will be removed permanently.
Delete all The ‘Delete All’ button (5) helps the user removing all the items permanently. Use your mouse to press on the ‘Delete all’ button and a warning appears: ‘Are you sure you want to Permanently Delete all items? By pressing the ‘Yes’ button, the entire list is removed permanently.

3.2.5. Printing emails

To print an email:
  1. In the Message Pane of the Mail application, select the email to print. Alternatively the user can double-click the email to open it in it’s own tab.
  2. A click the Print button in the Main Toolbar will open the print preview of the browser.


If you are using a WebApp version older than 1.2, double clicking an email will open it in a popup window. To print the email from there, please use the small Print button which resides in the toolbar of the popup window.
As a quick alternative, the user can also right-click on any email and choose Print from the context menu.
A new browser tab will appear with a preview of the print. At the same time, the printing dialog will show up, allowing select the right printer (if you have more than one) and specify printing options.


Since these printing options are unique to the local environment (OS and manufacturer), describing them is beyond the scope of this manual. Please refer to the documentation of the printer for more information on specific printing options.
Clicking on OK or Print (depening on the local environment) will start the printing job.

3.2.6. Sharing mail folders with coworkers

Just like in Outlook, the WebApp enables users to set permissions on their folders. To do so use the right mouse button to click on a folder and choose the Properties option and select the Permissions tab as shown in Figure 3.13, “Folder Permissions”.
Figure 3.13. Folder Permissions


Click on the Add button under the Permissions tab.
When the Address Book pops up, select the person (or group) to give permissions to and click Ok. This person (or group) will then be added to the permissions list.


As Zarafa does not grant any permissions by default, simply adding a person or group to the permissions list is not enough. Additionally the user will need to specify what permissions each person or group will have. This is described in the next section.
Click Ok to save and close the permissions window. Changing email folder sharing permissions

Click on the person or group whose permission needs to be changed.
Now the permissions can be manually set in the bottom part of the permissions window. Alternatively a predefined profile can be selected from the Profile drop-down menu.
Click Ok to save and close the permissions window. Stop sharing an email folder

  • Click on the person or group who should to be removed from the list.
  • Click the Remove button.
  • Repeat this for any other persons or groups that should no longer has access to this folder.
  • Click Ok to save and close the permissions window.

3.2.7. Opening shared email folders

To open shared folders from the Zarafa WebApp click the Open Shared Folders… Buttom, at the bottom of the folder list. A window as shown in Figure 3.14, “Open Shared Folder” will be presented.


The name of the buttom is spefic for each application. It is for instance labeled Open Shared Mails…” when inside the Mail application, and labeled ‘Open Shared Contacts… when inside the Contact Application.
Open shared folders
Figure 3.14. Open Shared Folder


From the dialog shown in Figure 3.14, “Open Shared Folder” it is possible to either open a single folder (for example the calendar folder), or open a complete folder list of a specific user.
The opened folders are stored in the users’ WebApp profile, so the next time the user logs in to the WebApp the opened folders are directly available.
To remove a shared folder from the view, right-click on the folder you want to remove and choose Close store.


Removing a shared folder from the view will not delete it.

Related Articles

Comments are closed.