View source for Zimbra 9/Modern Web App

{{BC|Certified}}
__FORCETOC__
<div class="col-md-12 ibox-content">
<div class='col-md-9'>
=Introducing the Modern Web Application=
{{KB|{{ZC}}|{{ZCS 9.0}}|||}}
== Overview ==
'''Zimbra's Modern Web Application''' is a new client for Zimbra Collaboration, built from the ground up to provide a clean and simple user experience on any device.

It offers a responsive user interface that is easy to use across devices, has intuitive navigation, supports customizations, is secure and accessible.

The Modern Web Client has been built for '''Zimbra X''' but is offered with '''Zimbra Collaboration Release 9.0.0''' to all customers who have a Network Edition license.


== Responsive Design ==
[[File:MWA Screens.png|none|600px|right|Sceen views|]]
By following Responsive Web Design principles, Zimbra's Modern Web Application ensures that users get a consistent experience and full functionality across all their devices.
Instead of forcing users to adapt to completely different interfaces, the Modern Web App lets them engage with the same interface everywhere while '''''it''' adapts for them''.

== Current Technology ==
The Modern Web Application incorporates a leading-edge technology stack focused on speed, scalability, and reliability, including:

* [[File:Preact.jpg|x50px|PreactJS|]] - [https://preactjs.com/about/we-are-using PreactJS], a component-based UI framework.
* [[File:GraphQL.png|x50px|GraphQL|]] - [https://graphql.org/ GraphQL], an extensible data API language based on datagraphs.
* [[File:Apollo.png|x50px|GraphQL|]] - [https://www.apollographql.com/ Apollo], a GraphQL implementation with advanced cache management capabilities.

== Supports Modern Browsers ==

The following operating system/browser combinations are supported:

{| class="wikitable" style="text-align: center;"
|-
!OS
!Versions
!Google Chrome
!Firefox
!Microsoft Edge
!Safari
|-
!Windows
| 8.1 or 10
| ✓
| ✓
| ✓
| 
|-
!MacOS
| 10.13 or newer
| ✓
| ✓
|
| ✓
|-
!Linux
| Red Hat, Ubuntu, Fedora, or SUSE
| ✓
| ✓
|
|
|-
!Android phone or tablet
|Latest still supported by Google
| ✓
|
|
|
|-
!iOS
|Latest
| ✓
|
|
| ✓
|}

In all cases, it is expected that OS updates are current and that the browser software is the latest stable release.

Reference: This information is derived from the [https://zimbra.github.io/zimbra-9/single-server-install.html#System_Requirements System Requirements] section of the Zimbra 9 Installation Guide.

== Customization and Extensible User Interface ==
[[FIle:Modern-zimlet-deploy.png|none|800px|left|]]
<br/>
Like the Zimbra Web Client (ZWC, or the '''Classic Web Application''' in Zimbra 9), Zimbra's Modern Web Application supports branding and customization of colors, fonts, logos,
and external site navigation - but unlike Classic, Modern Zimlets can be supported across all devices.

Exclusive and custom features can be delivered using the new Zimlet framework.
In Zimbra 9, there is no change to the administration of Modern Zimlets; they can be managed by Domain, COS, or per-user, exactly like Classic Zimlets.

Within this framework, Zimlets work consistently across all devices: desktop, tablet, and mobile.

=== Zimlet Sideloader ===

The security model of the Modern Zimlet Framework requires Zimlets to integrate with the UI code through an API that bridges Preact components and the GraphQL interface to them.

To support running Zimlets-under-development, the Admin must deploy a special Sideloader Zimlet and enable it for the test account.
Use this command as the <code>zimbra</code> user to deploy it:

<pre>zmzimletctl deploy zm-x-zimlet-sideloader.zip</pre>

[https://zimbra.github.io/zimbra-9/zimbra-preact-zimlet-readme.pdf Here] is a practical guide to writing Preact Zimlets for Zimbra 9 and above.

== Zimlet Integrations ==

'''"Zimbra Modern Zimlets"''' provide access to the best of collaboration applications with out-of-the-box integrations for:

[[File:Slack_RGB.png|x100px|Slack instant messaging|link=https://zimbra.github.io/zimbra-9/single-server-install.html#_slack]]
[[File:Zoom_-_Blue.png|x40px|Zoom meetings|link=https://zimbra.github.io/zimbra-9/single-server-install.html#_zoom]]
[[File:Dropbox.png|x150px|Dropbox cloud file management|link=https://zimbra.github.io/zimbra-9/single-server-install.html#_dropbox]]
[[File:Google-Drive-icon.png|x80px|Google Drive|link=https://zimbra.github.io/zimbra-9/single-server-install.html#_google_drive]] <br>
[[File:onedrive.png|x60px|Onde Drive|link=https://zimbra.github.io/zimbra-9/single-server-install.html#_onedrive]]

...and more on the way!'

==Co-Existence with Classic Web Application==

In Zimbra 9, the Modern Web Application coexists with the '''''Classic Web Application''''' (formerly Zimbra Web Client / ZWC), which provides the user experience that Zimbra 8 users are familiar with, and all the same features and Zimlets.

Users can choose either Web Application during login when using desktop browsers in Windows or macOS, and can easily switch between them if needed, for example, to utilize a Zimlet in Classic that is not yet available in Modern.

==Exclusive Features==
A number of features are unique to the Modern Web App and are not available in the Classic Web App.

* Installable as a [https://en.wikipedia.org/wiki/Progressive_web_application Progressive Web App].
* QR Code for easier configuration of two-factor authentication.
* User Session Management (Standard Zimlet) - Users can view all their active sessions, and terminate any they don't recognize or want.
* User preference for Date and Time formats.
* Unified calendar & tasks
* Special-purpose calendars, e.g. Holiday Calendars (Standard Zimlet)
* Basic & Advanced Filters in Settings

==User Documentation==

The user guide is available in HTML format: [https://zimbra.github.io/zimbra-9/user-guide.html Zimbra 9 User Guide]

The documentation has been initially published in English, with additional languages to come.

==Fixed Issues==
This section lists the issues which are now fixed and hence no longer a part of [[#Known Issues|known issues]].

<table class='table table-striped table-condensed' style='margin-top: 0px><tr><td class='col-md-1'><strong>Area</strong></td><td class='col-md-10'><strong>Description</strong></td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> Users can now create a nested folder by dragging and dropping it into another folder. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> Folders nested deeper than 5 levels do not appear in the folder list pane. </td></tr>

</table>

==Known Issues==

The Modern Web Application is being actively developed and does not yet support all features that are available through the Classic Web Application; remember that it is easy to switch between the Applications in desktop browsers to use features that aren't yet available in the Modern Web Application. You can identify such roadmap features in the [https://zimbra.github.io/zimbra-9/adminguide.html Zimbra 9 Admin Guide]; look for the notes highlighting them.

The following list summarizes issues known to the Zimbra developers that are anticipated to be impactful to users, and are planned for resolution in future patch releases.

<table class='table table-striped table-condensed' style='margin-top: 0px><tr><td class='col-md-1'><strong>Area</strong></td><td class='col-md-10'><strong>Description</strong></td></tr>
   <tr><td class='col-md-1'>General</td><td class='col-md-10'> A subset of Zimbra languages are supported, limited to:
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* Chinese (China) - 中文 (中国)
* Chinese (Hong Kong SAR China) - 中文 (香港){{beta}}
* Chinese (Taiwan) - 中文 (台灣){{beta}}
* Dutch - Nederlands{{beta}}
* English (United States) - English (United States)
* French (France) - français (France)
* German - Deutsch
* Hindi - हिंदी
* Indonesian - Bahasa Indonesia
* Italian - italiano
* Japanese - 日本語
* Korean - 한국어{{beta}}
* Polish - polski{{beta}}
* Portuguese - português{{beta}}
* Portuguese (Brazil) - português (Brasil)
* Russian - русский{{beta}}
* Spanish - español
* Thai - ไทย
* Vietnamese - Tiếng Việt
</div>

   </td></tr>
   <tr><td class='col-md-1'>General</td><td class='col-md-10'> After upgrading to the latest version of the web app, intermittently, some components of the app do not load.<br>Workaround – Users may reload the web app. </td></tr>
   <tr><td class='col-md-1'>General</td><td class='col-md-10'> Messages from the search list or tag folder cannot be moved using Drag and Drop. </td></tr>
   <tr><td class='col-md-1'>Calendar</td><td class='col-md-10'> When organizers delete an event and later restore it using undo-event-deletion (click Undo on event Deleted notification), the event restores in the organizers' Calendar but not in invitees' Calendar.<br>Workaround - Organizer may forward the event to all invitees. </td></tr>
   <tr><td class='col-md-1'>Calendar</td><td class='col-md-10'> When editing events in shared calendars, if users add a recipient and save the event to send it, the invitation is not sent to the added user.<br>Workaround – The organizer may add the new recipients. </td></tr>
   <tr><td class='col-md-1'>Calendar</td><td class='col-md-10'> Declined events are never shown in the calendar, as the "Show declined event" preference is not supported.<br>Workaround - Users may locate the invitation email in Trash to change their original event response. </td></tr>
   <tr><td class='col-md-1'>Calendar</td><td class='col-md-10'> When the Calendar Feature is disabled for a COS (Class of Service) or a user, i.e. <code>ZimbraFeatureCalendarEnabled = FALSE</code>, then if such a user receives an event invitation, the event invitation is displayed with calendar event icon in the mail list. </td></tr>
   <tr><td class='col-md-1'>Calendar</td><td class='col-md-10'> When a user who has selected 24-hour time format is creating new events, the 24-hour time format is not displayed for English (US) language.<br>Workaround – Users may choose to create the event in the 12-hour format. </td></tr>
   <tr><td class='col-md-1'>Contacts</td><td class='col-md-10'> When sharing is disabled for a user, i.e. <code>zimbraFeatureSharingEnabled = FALSE</code>, the GAL folder is not visible in Contacts vertical for that user. Users can still search for GAL contacts in search bar, and GAL contacts are auto-completed in To/CC/BCC fields when composing a mail. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> For some messages, the HTML content of a message that contains links for external images is only partially displayed. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> In Conversation View, users cannot move multiple emails between folders if one of the email threads contains a draft.<br>Workaround – When selecting multiple messages to move, users may avoid selecting the conversations which contain a draft. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> Users' Drafts folder (under the external IMAP account configured with the application) does not synchronize with its respective account on external domains (e.g., Gmail, Yahoo). </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> When the user has set the Preview pane to ''Bottom of the screen'', and tries to preview an email attachment, it results in an inconsistent user interface and blank email list<br>Workaround - Use right-side preview pane to preview attachments.page. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> In Message view, if the user selects a message and clicks Reply/ReplyAll/Forward, then closes the tab, they will land in the mail list with the same email selected. If the user again clicks Reply/ReplyAll/Forward, it does not work.<br>Workaround - The user may select another message and then re-select the previous message for Reply/ReplyAll/Forward. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> If users type a subject while the attachment upload is in progress, the typed subject clears after the upload process completes.<br>Workaround - Users can wait to update the subject until the attachment upload completes. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> In Message View, Standard Signature set by the user is not populated when performing Reply/Reply All/Forward actions.<br>Workaround – The signature will populate if users have set their “Reply or forward signature” under Settings → Signatures. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> The application marks the entire conversation thread as read if users have read just the latest message. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> When a user selects read emails and then uses right-click, the context menu displays the "Mark as Read" option enabled, although it will do nothing. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> Users cannot create a nested folder by dragging and dropping it into another folder. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> When user selects all messages in a folder and moves or delete them, the first message remains open in the preview pane. </td></tr>
   <tr><td class='col-md-1'>Mail</td><td class='col-md-10'> In Message view, if the user selects a message and clicks Reply/ReplyAll/Forward, then closes the tab, he will land in the mail list with the same email selected. If the user again clicks Reply/ReplyAll/Forward, it does not work.<br>Workaround - The user may select another message and then re-select the previous message for Reply/ReplyAll/Forward. </td></tr>
   <tr><td class='col-md-1'>Search</td><td class='col-md-10'> If users try to preview an attachment through search results, the search results hide.<br>Workaround – Users may download the attachment to view it. </td></tr>
   <tr><td class='col-md-1'>Settings</td><td class='col-md-10'> Users can’t configure another Zimbra mail account as a secondary IMAP/POP3 account. <br>Workaround - Users can do this setup in Preferences > Accounts in the Classic Web App, and still use the account in Modern. </td></tr>
   <tr><td class='col-md-1'>Settings</td><td class='col-md-10'> User is able to save invalid dates while configuring out of office response. </td></tr>
</table>

=== Browser- or Platform-Specific issues ===

<table class='table table-striped table-condensed' style='margin-top: 0px><tr><td class='col-md-1'><strong>Browser</strong></td><td class='col-md-10'><strong>Description</strong></td></tr>
   <tr><td class='col-md-1'>Internet Explorer</td><td class='col-md-10'> Internet Explorer cannot support the Modern Web App. Please upgrade your browser to the latest version of MS Edge, Chrome, Firefox or Safari. </td></tr>
   <tr><td class='col-md-1'>Safari</td><td class='col-md-10'> Safari users do not see the contents of the Mail and Calendar tab until they clear Safari’s cache. </td></tr>
   <tr><td class='col-md-1'>Safari</td><td class='col-md-10'> When using the web app in Safari, if there are any events in users' Calendars that were created through CalDav, right-clicking them leaves the user interface distorted. The user has to reload the browser to use the app again. </td></tr>
   <tr><td class='col-md-1'>Safari</td><td class='col-md-10'> In the Safari browser for macOS, users are not able to use the horizontal scrollbar in the message-reading pane to view the complete message. </td></tr>
   <tr><td class='col-md-1'>MS Edge</td><td class='col-md-10'> When users try to drag-and-drop filters in the MS Edge or Mozilla Firefox browser, the web application stops responding. Reloading helps recover the web application. </td></tr>
   <tr><td class='col-md-1'>MS Edge</td><td class='col-md-10'> In the MS Edge browser, dragging or resizing the left navigation panel results in a distorted UI. Reloading helps restore the web application. Workaround – Users may use Chrome or Firefox browser to avoid these browser-specific issues. </td></tr>
   <tr><td class='col-md-1'>Mobile and Tablet</td><td class='col-md-10'> In the Mobile view, when users tap on the extreme right side of the email in the list view, emails get deleted or starred. Users may use the ‘Undo Delete’ functionality or navigate to the Trash folder to recover the deleted email. </td></tr>
   <tr><td class='col-md-1'>Mobile and Tablet</td><td class='col-md-10'> iPad users are unable to open the web application when using Safari (version 9). </td></tr>
   <tr><td class='col-md-1'>Mobile and Tablet</td><td class='col-md-10'> iOS users have to double-tap an email to view it in the reading pane. Single-tap only highlights the email and does not open it in the reading pane. </td></tr>
   <tr><td class='col-md-1'>Mobile and Tablet</td><td class='col-md-10'> When user changes the date format in mobile from Settings→General, the changed date format is not used when creating a new event. Instead, Mobile OS date format is used. </td></tr>
</table>

</div><div class='col-md-3'>{{GuidePosts}}</div>
</div>
{{Article Footer|Zimbra 9|04/07/2020}}
[[Category:ZCS 9.0]]