HTML Content Support in the Mobility Project
- Dilanka Wijesekera (Unlicensed)
- Emelie Oskarsson
This page describes how HTML-based content customization is implemented in Mobility web and mobile applications.
What is HTML Content Support?
Feature Overview
In most of the info pages and sections where the user is shown some textual description on both web and mobile applications, the content might get lengthier so that it should be formatted accordingly to enhance the readability.
Mainly the HTML content support for the following pages/sections are considered here;
Messages (
BRP>Settings>Messages)Product descriptions
Description for Web Categories
"Description Internet" for Events
As the approach taken to allow formatting the description text using HTML, from the Back Office, the admin users are given the chance to use HTML tags manually, or import a template.
There are two variations of this, namely,
Simplified Text Rendering
HTML Text Rendering
Simplified Text Rendering
If the text is not handled according to the requirements for HTML formatting, it will be handled as the simplified formatting.
Simplified format means that:
Each line break in the text will become a new paragraph in the text (there will be a small space between two paragraphs).
A line starting with - will be presented with a tick in front of it. If several consecutive lines start with - then a list of ticks will be displayed.
HTML tags can be used, but if a tag is present both at the beginning and at the end of the text, the entire content will be handled as HTML format
HTML Text Rendering
The admin users should use a < at the start and a > at the end of a content block that needs to be configured using HTML while setting up the content from the Back Office. So that, the content marked with a< and a> will be rendered as HTML formatted content on the web and mobile app’s front-ends.
The following HTML tags are supported, and are discussed in further detail below:
Line breaks - <br/>
Bold - <b>
Lists - <li>
Links - <a (will be open via in-app browser)
Italic - <i>
Underlined text - <u>
Cannot provide support for the following HTML elements due to the design and development complexities;
Colors - Due to the conflict with the application’s color scheme
Table - Due to design and development complexitiesÂ
Images - Due to design and development complexitiesÂ
Alignments - Due to design and development complexitiesÂ
Overview of the implementation
Web
Page | Type of content rendering method used | Screenshots |
|---|---|---|
Web categories list | Simple Text |  Â |
Information category detailed view | HTML Text |  Â |
Group activity description | HTML Text |  Â |
Group activity list | Simple Text |  Â |
Group activity detailed view | HTML Text |  Â |
Subscriptions list | Simple Text |  Â |
Subscriptions detailed view | HTML Text |  Â |
Additions list | Simple Text |  Â |
Additions detailed view | HTML Text |  |
Suggested items list | Simple Text |  Â |
Suggested items detailed view | HTML Text | |
Value cards description | HTML Text |  Â |
Value cards list | Simple Text |  Â |
Service description | HTML Text |  Â |
Service list | Simple Text |  Â |
Service detailed view | HTML Text |  Â |
Items description | HTML Text |  Â |
Items list | Simple Text |  Â |
Items detailed view | HTML Text |  Â |
Events description | HTML Text |  Â |
Events detailed view | HTML Text |  Â |
Entrances description | HTML Text |  Â |
Entrances list | Simple Text |  Â |
Entrances detailed view | HTML Text |  Â |
My subscription detailed view | HTML Text |  Â |
My value cards list | Simple Text |  Â |
My value cards detailed view | HTML Text |  |
My bookings | Simple Text |  Â |
App
Screen | Type of content rendering method used | Screenshots |
|---|---|---|
Web categories list | Simple Text |  Â |
Web category detailed view | HTML Text |  Â |
Information category detailed view | HTML Text |  |
Group activity detailed view | HTML Text |  Â |
Subscriptions list | Simple Text |   |
Subscriptions detailed view | HTML Text |  Â |
Additions list  | Simple Text |   |
Additions detailed view | HTML Text |  Â |
Value cards list | Simple Text |  Â |
Value cards detailed view | HTML Text |  |
Value cards facility select screen | HTML Text |  Â |
Service description screen | HTML Text | Â |
Service detail view | HTML Text |  |
Cart items list | Simple Text |  Â |
Booking information | HTML Text |  Â |
Consents and Terms and Conditions Modals and pages | HTML Text |  Â |