Markup Formats

The Mobile Application Builder for Zimbra Community 8 uses a set of common HTML markup formats to define UI. These formats can be used for development of new user experiences or as a basis for customizing styling.

General
- Anchors
- User generated content
Links
Post
Post List
Banner
Navigation
- Navigation headers
- Navigation Links
User Profile

General

General purpose markup that applies to multiple parent formats.

Anchors

Anchors behave as on web with two enhancements:

Click handlers are bound to the tap gesture in stead of click.
Anchors defining the attribute data-messagename raise the defined message with the tapped link as a handler. Works with dynamically-added links as well.

<a href="#" data-messagename="someMessage">Raise a Message</a>

$.telligent.evolution.messaging.subscribe('someMessage', function(data) {
    console.log(data.target);
});

User generated content

The user generated content class should wrap any content provided by users (as opposed to markup/content that is part of the system). Basic HTML formatting (lists, headers, etc) and content adjustments (tables, video, etc) is applied only to user-generated content.

<div class="user-generated-content">Content<div>

User-generated content is often identified in addition to content on the Post format.

Links

Links refers to lists of links for purposes of a set of available actions to take, list of filters, or list of applications. Links are rendered horizontally using the ui-links component.

Actions

Actions should typically show as many links as possible horizontally, and collapse remaining links behind a more link

<div class="ui-links actions" data-minlinks="1" data-maxlinks="100">
    <ul>
        <li><a href="#">Add as Friend</a></li>
        <li><a href="#">Bookmark</a></li>
        <li><a href="#">Flag</a></li>
        <!-- More is shown when links can't fit horizontallly -->
        <li><a href="#" data-more">More</a></li>
        <!-- Cancel is shown within a sheet of links displayed when tapping 'more' -->
        <li><a href="#" data-cancel">Cancel</a></li>
    </ul>
</div>

Applications

An application tray should not collapse behind 'more', and should instead show all, horizontally scrolling.

<div class="ui-links applications" data-minlinks="100">
    <ul>
        <li><a href="#">Test App 1</a></li>
        <li><a href="#">Test App 2</a></li>
        <li><a href="#">Test App 3</a></li>
        <li><a href="#">Test App 4</a></li>
        <li><a href="#">Test App 5</a></li>
        <li><a href="#">Test App 6</a></li>
    </ul>
</div>

Filters

Filters should not collapse and should instead horizontally scroll. A currently-selected filter should be identified in order for it to be scrolled into view.

<div class="ui-links filters" data-minlinks="100">
    <ul>
        <li><a href="#">Filter 1</a></li>
        <li><a href="#">Filter 2</a></li>
        <!-- selected filter -->
        <li><a href="#" data-selected>Filter 3</a></li>
        <li><a href="#">Filter 4</a></li>
    </ul>
</div>

Post

Post details are free-form, but specific portions should be given specific classes

<div class="post">
    <div class="avatar">
        <!-- resized image html -->
    </div>
    <div class="details">
        <h2>Post Title</h2>
        <span class="author"><a href="#">Display Name</a></span> in
        <span class="location"><a href="#">Group A</a></span> on
        <span class="date">Date</span>
    </div>
    <div class="content">
        <!-- content -->
    </div>
    <div class="ui-links actions">
        <!-- action links -->
    </div>
</div>

Post List

data-targeturl is optional. When providing, tapping the item will highlight the entire row and navigate to the URL.

<div class="post-list">
    <div class="post-list-item" data-targeturl="">
        <!-- post -->
    </div>
</div>

Banners are used on group and user homepages.

<div class="banner">
    <div class="avatar">
        <!-- resized image html 96x96 ZoomAndCrop -->
    </div>
    <h1>Name</h1>
    <div class="description">description</div>
    <!-- ui-links actions -->
    <!-- ui-links applications -->
</div>

Navigation lists are primarily used within the navigation bar.

Navigation headers

<div class="navigation-item header [with-label]">
  [Label]
</div>

If the header is just a separator, omit with-label and the label.

Navigation Links

<div class="navigation-item [with-avatar"]>
  <a href="...">
    [<span class="avatar"><img /></span>]
    Label
  </a>
</div>

User Profile

Field lists on the user's profile.

<div class="profile">
  <div class="profile-field-list">
    <div class="profile-field">
      <div class="label">Label</div>
      <div class="value">Value</div>
    </div>
  </div>
</div>

Recommended