Styling Connected Portal

Styling WebUI for Connected Portal

Since Connected Portals are often accessed by a customer, it is sometimes valuable to have the UI/UX/look and feel of the Connected Portal reflect the UI/UX/look and feel of the customer organization. Even more so, a customer app which is entirely branded and has the look and feel of the customer's organization can be created in Mobileforce.

Styling Customer Apps with CSS

To achieve this, Mobileforce provides the following CSS based styling capabilities for the connected portal customer app using the following prop:

Code snippet

<prop key="adlwebui-css"> https://apps.mobileforcesoftware.com/customers/customer/style.css
</prop>

In the above example, CSS files are kept under /ebs/www/html/customers where a file called style.css can be created and used to customize this app’s styling.

Styling Configuration

Customer Home URL specification

Location : applet->data->prop

<prop key="customhomeurl">http://apps.fonemine.com/adlwebui/navscreen.php?path=companyName&amp;initialbgcolor=0096d6</prop>

The URL can take following style parameter which controls the style before ADL is loaded. When mobile client loads the above URL, the initial page gets loaded with header bar, background color with loading indicator. Then the ADL gets read and the view is rendered. The following GET parameters control the style of the initial page:

Component Style Control

The following controls can be specified to control the WebUI:

Code snippet

<prop key="style#header-bar#color">#FFFFFF</prop>
<prop key="style-ios#header-bar#color">#FFFFFF</prop>
<prop key="style-ios#phone-header-bar#color">#FFFFFF</prop>
<prop key="style-ios-tablet#header-bar#color">#FFFFFF</prop>
<prop key="style-android#header-bar#color">#FFFFFF</prop>
<prop key="style-andorid-phone#header-bar#color">#FFFFFF</prop>
<prop key="style-andorid-tablet#header-bar#color">#FFFFFF</prop>

Components Styles

Gradient CSS Format

For gradient color specification we have to follow the special format:

Code snippet

<prop key="style#<component-prefix>#gradient">style, start hex color, end hex color</prop>

For example:

Code snippet

<prop key="style#banner#gradient">top,#0E4ED0,#3BBCF9</prop>

Header Bar Style

Code snippet

<prop key="style#header-bar#color">#FFFFFF</prop>
<prop key="style#header-bar#background-color">#0096d6</prop>

Banner Style

Code snippet

<prop key="style#banner#gradient">top,#0E4ED0,#3BBCF9</prop>

Tool Bar Style

Code snippet

<prop key="style#toolbar#background-color">#FFFFFF</prop>
<prop key="style#toolbar#border-top-color">#0096d6</prop>
<prop key="style#toolbar#border-top-width">1px</prop>
<prop key="style#toolbar#border-top-style">solid</prop>

Search Bar Style

Code snippet

<prop key="style#search-bar#background-color">#0096d6</prop>

Segment Bar Style

Code snippet

<prop key="style#segment-bar#background-color">#0096d6</prop>
<prop key="style#segment-bar#border-color">#FFFFFF</prop>
<prop key="style#segment-bar#color">#FFFFFF</prop>
<prop key="style#segment-bar-selected#background-color">#FFFFFF</prop>
<prop key="style#segment-bar-selected#color">#0096d6</prop>

Screen List Style

Code snippet

<prop key="style#screen-list-container#gradient">top,#FFFFFF,#FFFFFF</prop>
<prop key="style-android#screen-list#background-color">#e9e9e9</prop>
<prop key="style-android#screen-list#color">#2a2a2a</prop>
<prop key="style-android#screen-list-border#border-color">#d3d3d3</prop>

Screen List Section Style

Code snippet

<prop key="style#screen-list-section#background-color">#e9e9FF</prop>
<prop key="style#screen-list-section#color">#2a2aFF</prop>
<prop key="style#screen-list-border-section#border-color">#d3d3FF</prop>

Screen Grid Style

Code snippet

<prop key="style#screen#gradient">top,#0E4ED0,#3BBCF9</prop>
<prop key="style#screen#background-color">#0E4ED0</prop>

Slider Buttons

Slider buttons are present in RSS, CMS, and Binder screen.

Code snippet

<prop key="style#slider-buttons#background-color">#0096d6</prop>