EngageOne Digital Self Service Branding Guide...This document provides information specific to branding, localization, and e-mail templates. 2 Branding Branding allows you to customize

EngageOne Digital Self Service

US English Edition

Branding Guide

Document Version 602-0009-001

ii

____________________________________________________________________________________

Copyright ©2016 Pitney Bowes All rights reserved.

This publication and the software described in its supplied under license and may only be used or copied in accordance with the terms of such license. The information in this publication is provided for information only, is subject to change without notice, and should not be construed as a commitment by Pitney Bowes Software. Inc. (PB). To the fullest extent permitted by applicable laws PB excludes all warranties, representations and undertakings (express or implied) in relation to this publication and assumes no liability or responsibility for any errors or inaccuracies that may appear in this publication and shall not be liable for loss or damage of any kind arising from its use.

Except as permitted by such license, reproduction or any part of this publication by mechanical, electronic, recording means or otherwise, including fax transmission, without the express permission of PB is prohibited to the fullest extent permitted by applicable laws.

Nothing in this notice shall limit or exclude PB liability in respect of fraud or for death or personal injury arising from its negligence. Statutory rights of the user, if any, are unaffected.

*TALO Hyphenators and Spellers are used. Developed by TALO B.V., Bussum, Netherlands

Copyright © 1998 * TALO B.V., Bussum, NL

*TALO is a registered trademark ®

Encryption algorithms licensed from Unisys Corp. under U.S. Patent No. 4, 558,302 and foreign counterparts

Security algorithms Copyright ©

1991 – 1992 RSA Data Security Inc.

Copyright © DL Technology Ltd 1992-2010

Barcode fonts Copyright © 1997 Terrapin Solutions Ltd. with NRB Systems Ltd.

This product includes software developed by the Apache Software Foundation (http://www.apache.org/).

Artifex and the Ghostscript logo are registered trademarks and the Artifex logo and Ghostscript are trademarks of Artifex Software, Inc.

Copyright (c) 2000 - 2015 The Legion of the Bouncy Castle Inc. (http://www.bouncycastle.org

This product contains the Regex++ library. Copyright © 1998-2000 by Dr. John Maddock

PostScript is a trademark of Adobe Systems Incorporated.

PCL is a trademark of Hewlett Packard Company.

ICU License - ICU 1.8.1 and later Copyright (c) 1995-2006 International Business Machines Corporation and others. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, provided that the above copyright notice(s) and this permission notice appear in all copies of the Software and that both the above copyright notice(s) and this permission notice appear in supporting documentation.

Matra 0.8b (http://matra.sourceforge.net/) The contents of this documentation are subject to the Mozilla Public License Version 1.1 (the "License"); you may not use this documentation except in compliance with the License. You may obtain a copy of the License at http://www.mozilla.org/MPL/. Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language governing rights and limitations under the License.

Otherwise all product names are trademarks or registered trademarks of their respective holders.

iii

Table of Contents 1 Introduction ........................................................................................................................................ 5

2 Branding .............................................................................................................................................. 5

2.1 app.css ........................................................................................................................................ 6

2.1.1 Body .................................................................................................................................... 6

2.1.2 Header ................................................................................................................................. 6

2.1.3 Navigation ........................................................................................................................... 6

2.1.4 Footer .................................................................................................................................. 7

2.1.5 Tabs ..................................................................................................................................... 7

2.1.6 Links and Buttons ................................................................................................................ 8

2.2 brand.css ..................................................................................................................................... 8

2.2.1 Fonts ................................................................................................................................... 8

2.2.2 Page Branding ..................................................................................................................... 8

2.2.3 Header ................................................................................................................................. 9

2.2.4 Navigation ........................................................................................................................... 9

2.2.5 Main Area ............................................................................................................................ 9

2.2.6 Footer Area ....................................................................................................................... 10

2.2.7 Generic Branding ............................................................................................................... 10

2.2.8 Modal Pop-Ins ................................................................................................................... 11

2.2.9 Tables ................................................................................................................................ 12

2.2.10 Forms ................................................................................................................................ 12

2.2.11 Drop Downs....................................................................................................................... 13

2.2.12 Date Fields ......................................................................................................................... 13

2.2.13 Tab Elements ..................................................................................................................... 14

2.2.14 Toggles .............................................................................................................................. 14

2.2.15 Checkboxes and Radio Buttons ......................................................................................... 15

2.2.16 Buttons .............................................................................................................................. 15

2.2.17 Alerts ................................................................................................................................. 16

2.2.18 Login .................................................................................................................................. 16

2.2.19 Formatting Classes ............................................................................................................ 17

2.3 customizations.css .................................................................................................................... 17

2.4 Settings.xml ............................................................................................................................... 18

2.4.1 Header (config/header/banner) ........................................................................................ 18

iv

2.4.2 Header (config/footer) ...................................................................................................... 19

2.4.3 Additional Web Resources (config/header/common) ....................................................... 19

2.4.4 XSLT Template Properties (config/props) .......................................................................... 20

3 Localization ....................................................................................................................................... 21

3.1 Download American English Property Files ............................................................................... 21

3.2 Copy Property Files and Adjust File Names ............................................................................... 22

3.3 Edit and Translate Text.............................................................................................................. 23

3.4 Configure the Language Links and Languages Supported ......................................................... 24

3.4.1 Language Links .................................................................................................................. 24

3.4.2 Languages Supported ........................................................................................................ 25

3.5 Test and Adjust Localization Files .............................................................................................. 25

3.5.1 Install and Configure a Test System................................................................................... 26

3.5.2 Zip and Upload Localization Files ...................................................................................... 26

3.6 Test Language(s) and Adjust Localization Files .......................................................................... 27

3.6.1 Identify Missing Localization Strings or Files ..................................................................... 27

3.6.2 Determine (and Resolve) Incorrect or Missed Translations .............................................. 27

3.6.3 Adjust Translations That Impact Page Display ................................................................... 28

3.6.4 Perform Re-testing To Ensure Proper Localization ............................................................ 28

3.6.5 Disable Debugging and Perform Final Validation .............................................................. 28

3.7 Deploy to Production ................................................................................................................ 28

4 E-mail Templates .............................................................................................................................. 30

4.1 Download Default Templates .................................................................................................... 30

4.2 Modify Templates ..................................................................................................................... 31

4.2.1 Common Properties .......................................................................................................... 34

4.2.2 Additional Properties ........................................................................................................ 36

4.3 Save, Zip, Upload, Publish ......................................................................................................... 45

Appendix A Appendix ........................................................................................................................... 47

Appendix A.1 Settings.xml ............................................................................................................... 47

Appendix A.1.1 Logo ...................................................................................................................... 47

Appendix A.1.2 Class ...................................................................................................................... 47

5

1 Introduction This document provides information specific to branding, localization, and e-mail templates.

2 Branding Branding allows you to customize EngageOne Digital Self Service (Smart View, Smart Bill, Smart Pay, and

Smart Bill Business Edition), adjusting the look and feel of the Customer and Agent portals. This

customization allows you to incorporate your company name, messaging, and theme throughout the

application - reinforcing your brand while adding familiarity to your loyal client base.

Prior to implementing your brand, you previously must have downloaded brand files using the Load

Custom Brand wizard via the Configure Application tab in the Agent portal. After you create a new file

to store your branding updates (per the reference information below), you must upload this new file

(now customized with your corporate branding) to complete this segment of the configuration process.

This section describes the branding component and provides detailed information to guide you as you

customize your Smart Pay environment. Individuals with a web developer background and a solid

knowledge of Bootstrap, HTML, and CSS have the capacity to implement brands based on the

information provided below.

Bootstrap tools (such as buttons, forms, and tables) allow you to create websites and web applications.

A Bootstrap CSS is a response-driven design technique which can be implemented on a computer,

mobile device, or tablet. Bootstrap CSS allows an application to be partially loaded onto a device and -

based on user keystrokes/input - loads the remaining application, organizing the pages and screen

layout to fit appropriately on the specific device. A Bootstrap CSS, for example, ensures that a page that

displays on a computer screen is organized and fits differently than a page that displays on a mobile

device screen.

You will use three primary .css files to implement your brand:

app.css - Provides basic color changes to the application.

brand.css - Allows you to define formatting such as spacing, fonts, and horizontal bars.

customizations.css - Applies specific non-generic changes to handle special situations.

Most of the CSS/branding uses existing Bootstrap classes http://getbootstrap.com/). This CSS

implements changes to the existing Bootstrap layout. As such, specific classes are available in the CSS

and markup; these classes begin with the characters "st-". For example, a group of checkboxes will be

enclosed in a DIV with an "st-checkbox-field" class. Each checkbox item will be enclosed in a DIV with an

"st-checkbox-item" class.

The remainder of this section provides reference information to assist you in using the app.css,

brand.css, and customizations.css files. While the app.css file contains about 200 lines, the brand.css file

contains approximately 1,000 lines; therefore, the code (or CSS) below displays - in many cases - mere

snippets of these files. This information serves as a guide, allowing you to know where to look for

specific file information and various rules.

http://getbootstrap.com/

6

2.1 app.css If you want to perform quick color changes to the application, app.css is the only file you need to

modify. This file has six parts (or sections).

2.1.1 Body This section establishes the background color.

/******************************************** * Body ********************************************/ body { background-color: #88B65B; }

2.1.2 Header This section establishes the link colors; yet, can be extended to apply colors to the header on all pages.

/******************************************* * Header *******************************************/ header .st-logout { color: #88B65B; } header .st-logout:hover { color: #546D36; background-color: #FFFFFF; }

2.1.3 Navigation The Navigation section (fairly large in size) specifies the colors to use in the menu.

/********************************************* * Navigation *********************************************/ .navbar-default .navbar-collapse { background-color: #f3f3f3; border-bottom: 1px solid #c0c0c0; }

7

2.1.4 Footer

Similar to the Header section, the Footer section provides colors for the links in the footer; yet, can be

extended to provide new colors for the footer on each page.

/********************************************* * Footer *********************************************/ footer .st-copyright { color: #4E4E4E; } footer .st-copyright a { color: #337ab7; }

2.1.5 Tabs This section provides colors for the tabbed modules in the application. You can view these tabs on the

My Profile page (Profile tab) when changing a user's personal image.

/********************************************** * Tabs **********************************************/ .tabs a.selected, .tabs a:hover { color:white; background: #0170bb; } .tabs a { border-top: 1px solid #0170bb; border-left: 1px solid #0170bb; border-right: 1px solid #0170bb; }

8

2.1.6 Links and Buttons This section (fairly large in size) provides the colors for the links and buttons that appear in the

application.

/******************************************** * Links & Buttons ********************************************/ a, a:active { color: #337ab7; } a:focus, a:hover { color: #23527c; }

2.2 brand.css The brand.css file contains several sections, each specific to a certain area of the page.

2.2.1 Fonts The first section of this file defines the application fonts.

/********************************************* * Fonts *********************************************/ @font-face { font-family: 'Precision Sans Lt'; src: url("../webfonts/PrecisionSans_W_Lt.eot"); src: local("Precision Sans"), local("Precision Sans"), url("../webfonts/PrecisionSans_W_Lt.eot") format("embedded-opentype"), url("../webfonts/PrecisionSans_W_Lt.otf") format("opentype"), url("../webfonts/PrecisionSans_W_Lt.ttf") format("truetype"), url("../webfonts/PrecisionSans_W_Lt.woff") format("woff"); font-weight: 300; font-style: normal; }

2.2.2 Page Branding This section designates the lowest level of CSS. The CSS specific to "body" (referenced below) provides

the base for all other branding.

9

/******************************************** * Page Branding ********************************************/ body { font-family: "Precision Sans Rg", CenturyGothic, AppleGothic, sans-serif; font-size: 14px; color: #424242; letter-spacing: -0.14px; }

2.2.3 Header

The Header section controls the layout of the header at the top of each page.

/********************************************* * The Header *********************************************/ header { background-color: #ffffff; border-bottom: 1px solid #c0c0c0; width: 100%; height: 80px; }

2.2.4 Navigation

This section controls the layout of the menu that appears on each page (once the user has logged into

the application). The Registration and Login pages, however, do not include a menu.

/********************************************* * The menu *********************************************/ .navbar-header { background-color: #ffffff; width: 100%; }

2.2.5 Main Area This section provides the general layout for the main content area of the page.

10

/********************************************* * Branding for the main area *********************************************/ main { width: 100%; background: #fff; padding-bottom: 30px; float: left; } .container-fluid { max-width: 1275px; margin: 0 auto; }

2.2.6 Footer Area

This section provides the formatting for the footer that appears on each page.

/********************************************** * The Footer **********************************************/ footer { padding-top: 25px; width: 100%; height: 180px; float: left; } footer .st-copyright { padding-top: 5px; float: right; font-size: 12px; line-height: 18px; }

2.2.7 Generic Branding This section provides high-level layout CSS to modify the base Bootstrap CSS.

11

/********************************************* * Generic text branding. *********************************************/ h1 { font-family: "Precision Sans Bd", CenturyGothic, AppleGothic, sans-serif; font-size: 40px; letter-spacing: -0.4px; padding-bottom: 30px; margin: 0; border-bottom: 1px solid #c0c0c0; margin-bottom: 30px; }

2.2.8 Modal Pop-Ins

This section provides minor adjustments to the Modal Bootstrap pop-ins. You can view these changes on

the My Profile page (Profile tab), when modifying any of the user profile settings.

12

/********************************************** * Branding for the Bootstrap modal pop-ins. **********************************************/ .modal-header { padding: 0; } .modal-header h3 { font-family: "Precision Sans Md", CenturyGothic, AppleGothic, sans-serif; font-size: 16px; margin-top: 0; } .modal-content { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; padding: 20px; }

2.2.9 Tables

This section provides the branding for the tables that appear in the application.

/********************************************** * Branding for tables. **********************************************/ .table { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 14px; }

2.2.10 Forms The Forms section provides simple modifications to the Bootstrap form CSS.

13

/********************************************* * Generic branding for forms. *********************************************/ .form-control, .input-group .form-control { width: 230px; }

2.2.11 Drop Downs

This section describes how to brand drop-down list box form elements.

/********************************************** * Branding for drop-down list box elements. **********************************************/ .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-horizontal .checkbox { padding: 0; } .form-control.st-dropdown-control { width: 340px; } .st-dropdown-field .form-control{ min-width: 340px; }

2.2.12 Date Fields

14

This section (fairly large in size) provides branding information specific to the calendar date picker form elements.

/********************************************* * Branding for date fields. *********************************************/ ul[uib-datepicker-popup-wrap] .btn-default, ul[uib-datepicker-popup-wrap] .btn-info, ul[uib-datepicker-popup-wrap] .btn-danger, ul[uib-datepicker-popup-wrap] .btn-success { background: none; border: 0; box-shadow: none; -webkit-box-shadow: none; text-shadow: none; }

2.2.13 Tab Elements

This section provides the bulk of the layout for the Bootstrap tab element. You can view this element on the My Profile page (Profile tab), when choosing a personal image.

/******************************************** * Branding for the tab elements. ********************************************/ .tabs { margin-top:10px; margin-bottom: 10px; border-bottom: 1px solid #c0c0c0; }

2.2.14 Toggles

Toggles are Yes/No or On/Off slider controls. You can view toggles on the Notifications tab. This section builds those elements.

15

/********************************************** * Toggles **********************************************/ .toggle.sorriso, .toggle-on.sorriso, .toggle-off.sorriso { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border: 0; box-shadow: none; -webkit-box-shadow: none; }

2.2.15 Checkboxes and Radio Buttons

This section provides a custom brand on top of the browser checkboxes and radio buttons.

/********************************************* * Branding for checkboxes and radio buttons. *********************************************/ label input[type="checkbox"] { /*display: none;*/ position: absolute; left: -99999px; display: block; }

2.2.16 Buttons This section (fairly large in size) controls the layout and style of the application buttons.

/********************************************** * Branding for buttons. **********************************************/ .st-buttons { margin-top: 70px; margin-bottom: 70px; } .st-buttons-tight { margin-top: 30px; margin-bottom: 30px; }

16

2.2.17 Alerts

This section formats the Bootstrap alert elements. Alerts are warnings or informational messages that appear on the page. These alerts may appear at the top of a page, notifying a user that settings could not be changed. These alerts also may be specific to input validation issues (for example, when a value is not valid).

/********************************************** * Branding for the Bootstrap alerts module. ***********************************************/ .alert { margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }

2.2.18 Login

This section provides the layout for the Login and Registration pages. These pages are significantly different from the rest of the application; therefore, they use the “st-login” class designation to indicate that they are displayed differently than standard pages.

17

/********************************************* * Special classes for the login flows. *********************************************/ .st-login h1 { font-family: "Precision Sans Bd", CenturyGothic, AppleGothic, sans-serif; font-size: 40px; letter-spacing: -0.4px; padding-top: 60px; padding-bottom: 30px; color: #424242; border-bottom: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 30px; }

2.2.19 Formatting Classes This section defines custom “st-” classes that are added by use cases to perform a specific custom task; for example, adding a border to the top or bottom of an element or, perhaps, increasing the spacing around an element.

/*********************************************** * Formatting Classes ***********************************************/ /* --------------------------------------------------------------------------------------------- */ /* st-field-row adjust links & buttons on the same row as input fields so everything lines up. */ .st-field-row .btn-primary { margin-top: 17px; } .st-field-row a { display: inline-block; margin-top: 20px; }

2.3 customizations.css This file contains specific (non-generic) modifications to pages that certain use cases require. Each

section identifies which use cases access these classes.

The code below shows how the login.uc uses the “st-login-usename-link” class. Only some of the use

cases require special classes.

18

/* * login.uc */ .st-login-username-link { font-size: 16px; }

2.4 Settings.xml You can access the settings.xml file during the brand file download process, which you perform when

configuring your application via the Agent portal. The settings.xml file allows you to configure the XSLT

templates that generate the application pages. You also can use this file content to make high-level

branding changes to these application pages.

Note: Although you will not make frequent changes to the settings.xml file, it is - in fact -

common to edit header and footer information. When modifying headers and footers (or any

other information in this file), you must use an XML text editor to make your updates.

The following sections comprise the settings.xml file:

Section Description

props Contains configuration settings, which allow you to change the global behavior of the XSLT templates.

header Contains both the HTML to insert into the <head> element of the HTML as well as the HTML to add to the top of each application page. The header typically contains the company logo and a link to the company website.

footer Contains the HTML to add to the bottom of each page. The footer typically contains the copyright notice.

logo Allows for the placement of the logo and link to the company website in the menu rather than above the menu.

class Defines the classes for each HTML element that is created by the XSLT.

The content below provides details specific to the Header, Footer, and Props sections of the settings.xml

file. These are the primary sections which you may have an occasion to edit. The remaining sections -

Logo and Class - though important, are infrequently edited and, as such, are explained in detail in

Appendix A - SettingsXML

2.4.1 Header (config/header/banner) The header banner is included at the beginning of each application page. Typically, you use the header

banner to add both a logo and a link to the company website. Since the HTML is in an XML file, it must

be surrounded by a CDATA element in order for the XSLT templates to extract it correctly.

19

Header

2.4.2 Header (config/footer) The footer is included at the end of each application page. Typically, the footer contains the copyright

notice for the application. Similar to the header, the footer must be enclosed in a CDATA element in

order for the XSLT templates to extract it correctly.

Footer

2.4.3 Additional Web Resources (config/header/common) The config/header/common section of the settings.xml file is inserted into the <head> element on each

HTML page. You can use this settings.xml file information to include additional web resources such as

analytics, JavaScript files, 3rd-party CSS files, and special web font files.

20

Additional Web Resources

2.4.4 XSLT Template Properties (config/props) The <props> element in the settings.xml file contains generic settings that you may choose to modify

during the branding process.

Props

Setting Value(s) Description

disable_submit_on_invalid true/false You may choose not to edit this setting, as it disables the Submit button on the page if the form values are not valid. If you change this setting value to false, then users will be able to submit invalid data to the server. In this case, the server simply will redisplay the page with the errors.

table_nav_before true/false Setting this value to true puts the page navigation elements before the tabular data; this value (or table_nav_after) should be set to true to allow users to page through their data. If both values are true, then the paging controls will be both before and after the table.

table_nav_after true/false Setting this value to true puts the page navigation elements after the tabular data; this value (or table_nav_before) should be set to true to allow users to page through their data. If both values are true, then the paging controls will be both before and after the table.

default_app This value sets (or determines) the AngularJS application to use (by default) and should not be changed unless you have rewritten the JavaScript files to use a different AngularJS application.

21

Setting Value(s) Description

default_controller This value sets (or determines) the AngularJS controller to use (by default) and should not be changed unless you have rewritten the JavaScript files to use a different AngularJS controller.

i18n_keys top/bottom/left/right If this element is defined, then all translatable text on the page will be highlighted with a red border and include a hover tooltip that displays the ID for the text. The orientation of the tooltip can be top/bottom/left/right.

3 Localization Before launching Smart Pay, you must perform localization - a process that involves adjusting the

application text to align with your natural language requirements and terminologies. American English is

the default language for Smart Pay; the application also supports the ISO 639-1 language code and the

ISO 3166-1 alpha-2 country code standards. If you use the default American English, you must localize

(or customize) messages such as your business contact information; these and similar requirements will

be described further in this section.

The Smart Pay Customer and Agent portals can support multiple languages, simultaneously. If you load

more than one set of language files, for example, the system detects each language then adds a

language selection drop-down list box to the application. This language selection drop-down list box will

be available (and visible) the next time you launch Smart Pay.

The localization process consists of six primary steps:

Download the American English property files.

Copy the property files and adjust their file names for the languages and countries you want to

support.

Edit and translate the text to match your language requirements and terminologies.

Configure the language links and list of languages you are supporting.

Test and adjust the new localization files in a test portal.

Deploy the finalized language files to your production server.

3.1 Download American English Property Files As noted above, the first step of the localization process involves downloading the American English

property files.

1. To download the American English property files, log into the Agent portal as a system

administrator and click the Configure Application tab.

2. From the Configure Application window, click the Configure Language Support link.

3. From the Configure Language Support window, click the Download default localization link.

4. Access the now downloaded i18n.zip file.

This file, which contains the American English property files for the Customer portal, downloads

to your local machine.

5. Unzip this file into a directory.

22

6. Name this file (original-text for example) to distinguish this file from the directories for your

other languages.

Smart Pay includes more than 50 files. Do not get alarmed, as these files are well-organized. You

will learn how to associate each file with its appropriate application window during the editing

and testing processes, which will be described further in this section.

3.2 Copy Property Files and Adjust File Names The second step of the localization process involves copying the property files and adjusting the file

names.

1. To copy property files and adjust the file names, create a directory for each language you want

to support.

2. Name the directories such that you can distinguish them.

3. Copy the American English property files into each of your new directories.

Smart Pay employs the following naming convention for the localization property files:

<basename>_<language><_optional-country>.properties

where:

basename - Denotes the name of the file and window where you place the text.

language - Denotes the ISO 639-1 language code for the language this file supports.

https://en.wikipedia.org/wiki/List of ISO 639-1 codes provides a list of ISO 639-1 language codes.

optional-country - Denotes the ISO 3166-1 alpha-2 country code for the locale supported.

https://en.wikipedia.org/wiki/ISO 3166-1 alpha-2 provides a list of ISO 3166-1 alpha-2 codes.

If you want to use the same property files for all locales for a given language, then you can

delete (or remove) the optional-country segment; this step is optional. basename, language, and

optional-country must be separated by an underscore (_).

example:

login_en.properties is the default American English file name. If you accept this default, it would be

used for all instances of the English language.

If you wanted to support both American and British English with separate translations (or separate

customized template files), you would name the files as follows:

login_en_us.properties - American English.

login_en_gb.properties - United Kingdom of Great Britain English. ISO 3166-1 alpha-2 also

reserves "uk" by request of the United Kingdom but is not formally included in the specification.

As such, Smart Pay does not recognize it.

Smart Pay uses a fallback approach to find a reasonable language/locale fit by looking for the selected

locale first then using the (generic) language-only file if the more specific file cannot be found. For

example, suppose you have the English files login_en.properties and login_en_gb.properties. The

en_gb file would be used for British English and the en file would be used for all other English languages,

even if the language selection specifies a locale.

23

In each directory, rename your files to follow this convention. You might want to perform this renaming

just before you edit each file so you can distinguish between the files you have translated and those you

have not.

3.3 Edit and Translate Text The third step of the localization process involves editing and translating text.

Each property file contains the text for a specific activity in the Customer portal; in addition, each is

named sequentially (based on the activity order), making it easy for you to locate the page or activity

that corresponds to the file. The current Smart Pay version categorizes the files using the following

prefixes:

dashboard - the landing page

error - login error messages

impersonation - user impersonation by an agent

login - login pages

logout - logout errors

menu - menus across the application, including language links

notifications - manage notifications page

profile - profile page

reg - registration pages

You must modify several property files, even if you are using the American English text provided with

the product. These property files are as follows:

File Content

errorAuthCodeFailureLockout This file includes e-mail and telephone contact information for your company.

errorPwdFailureLockout This file includes e-mail and telephone contact information for your company.

errorSecretQuestionLockout This file includes e-mail and telephone contact information for your company.

loginSecretQuestion This file includes telephone contact information for your company.

regBillingInfo This file includes e-mail and telephone contact information for your company.

Edit each property file using a text editor, changing the text after the equal (=) sign. The text must

remain on a single line. Below is an example of the login_en.properties file; some of the text has been

truncated to fit this format.

############################################################ # Use Case: login ############################################################ ############################################################ # Data Objects login_sPageName = Log Into Your Account login_sTitle = To continue, please enter your login information below. login_fUserName.sLabel = User name: login_fUserName.sRequired = Please provide the user name login_fUserName.sValidation = User name must be 6-12 characters in length, begin with … login_msgDisabledUser.sBody = The user name you have provided has been deactivated. … login_msgDisabledUser.sTitle = Disabled user name

24

login_msgGenericError.sBody = An error occurred while trying to fulfill your request. login_msgGenericError.sTitle = Something wrong happened login_msgInvalidUser.sBody = The user name you have provided does not belong to any … login_msgInvalidUser.sTitle = Incorrect user name login_msgUserExpired.sBody = User name has expired. login_msgUserExpired.sTitle = Expired user name ############################################################ # Screens ############################################################ ############################################################ # Screen: loginScreen login_forgotUsernameLink = Forgot your user name? login_page.title.loginScreen = Log Into Your Account login_usernameSignup = SIGNUP login_usernameSubmit = NEXT

With some languages, the localization process can result in longer phrases. Try to keep your translated

text about the same length as the English text. When you complete the file translation, save your

changes with the appropriate file name as described previously.

Note: Localization is not necessarily a literal sentence-for-sentence language conversion;

instead, it is heavily dependent on context and local business terminology. As such, it is

important that a language-fluent, business-knowledgeable individual be involved in the

localization process (or your results may be less than desirable).

If you are having difficulty understanding (or determining) the location of certain text, you can configure

the application such that it highlights text that needs to be translated and indicates where to find that

text. This feature is used commonly when testing, and these details are described further in this section.

3.4 Configure the Language Links and Languages Supported The fourth step of the localization process involves configuring the language links and the languages

supported.

Once you have finished creating your localized files, you must edit the menus and the list of languages

you are supporting.

3.4.1 Language Links Language links are links that appear at the bottom of Customer portal pages designating the languages

the application supports. Language links are contained in the menu_en.properties file. Like all property

files, you must create one of these for each language you are supporting; however, this file contains the

descriptions used for the language links that appear at the bottom of the window. The naming

convention for the links that appear dynamically on each window is as follows:

system.language.<language-locale-code> = language-description

where:

language-locale-code - Denotes the appropriate ISO language or local code where language and

locale are separated by an underscore (_).

language-description - Denotes the description that you want to appear at the bottom of the

window.

25

In the example below, language links have been included for several languages. Each language (visible as

a link at the bottom of each window) appears - not in English - but in the natural language (though this is

the menu_en.properties file). For example, "French" will appear as Francais - making it possible for a

non-English reader to choose his natural language without an understanding of the English translation.

Create a language link for each language you are supporting. Next, save a menu file for each language

with the menus, themselves, translated into the appropriate natural language.

############################################################ # Application Menus ############################################################ ############################################################ # Change language links system.language.de = Deutsch system.language.en = English system.language.en_ca = Canadian English system.language.fr = Francais system.language.fr_ca = Canadien Francais ############################################################ # Menu: main appDashboard = Overview appNotifications = Notifications appProfile = Profile

3.4.2 Languages Supported This process involves configuring the initial language and languages supported. These parameters are

specified in the i18n.properties file. Unlike the other property files which allow you to create a copy for

each language and locale supported, there is only a single instance of this file for your application.

In the example below, there is a property for the initial language. This example indicates when the

application starts, and it provides a list of languages supported and the order in which the links will

appear. If a single link (i.e. language.1) is configured, then the links will not appear on the bottom of the

application window.

Note: While the actual text properties use an underscore to separate the language and locale,

this file uses a dash (-) to separate the language and locale.

# Languages are presented in the order they are numbered. # Numbers must be contiguous. Any languages after a break # in the numbering will be ignored. initial.language = en language.1 = en language.2 = fr language.3 = de language.4 = en-ca language.5 = fr-ca

3.5 Test and Adjust Localization Files The fifth step of the localization process involves testing and adjusting the localization files, which

consists of multiple steps:

Install and configure a test system with your application, enabling localization debugging.

Zip your localization files and upload them via the Agent portal.

Access each language, testing and adjusting the localization files as appropriate.

Repeat step 2 and 3 (as needed).

Disable localization debugging and validate your final version.

26

3.5.1 Install and Configure a Test System After system installation and configuration, you can configure a localization debugging capability. To

configure this capability, you will need system administrator privileges.

1. Configure the capability by navigating to the layout-pages directory (in the directory where the

user application is deployed).

In that directory, you will find the settings.xml file. As shown below, near the top of this file, you

will find a setting for i18n_keys that is commented out.

2. Remove the comments, save the file, and restart the application.

The application highlights text to be translated and includes a tooltip that indicates the name of

the appropriate properties file.

3. To change the positioning of the tooltips, you can designate the setting to the top, left, right, or

bottom. <config> <props> <disable_submit_on_invalid>true</disable_submit_on_invalid> <table_nav_before>true</table_nav_before> <table_nav_after>false</table_nav_after> <table_page_size>10</table_page_size> <default_app>app</default_app> <default_controller>DefaultCtrl</default_controller>  </props>

3.5.2 Zip and Upload Localization Files 1. To zip and upload your localization files, copy your localization files (including the

i18n.properties file) into a single directory.

2. Create a .zip file containing them, organized at the root of that .zip file.

The .zip file does not include the containing directory name.

Note: As a best practice, provide a unique name for the .zip file and use the version number or

date and time stamp to identify it. When you place the file into the production environment,

you can associate this file with the “source” of the changes - should additional adjustments be

required.

3. Log into the Agent portal as a system administrator.

4. Click the Configure Application tab.


6. From the Configure Language Support window, click the Browse button to navigate to your .zip

file.

7. To retrieve this file, click the Upload button.

8. To designate your selection as the active file, click the Publish button.

Your new .zip file will be used for translations.

27

Configure Language Support

3.6 Test Language(s) and Adjust Localization Files In the Customer portal, choose the appropriate language link and view each application page. If you

notice an issue with the text, you must open the localization file and adjust the related text. Periodically,

you must zip and upload the localization files to test your adjustments.

Potential issues may fall into three categories:

A missing localization string or file for the specified language.

An incorrect or missed translation given the context.

A translation that is too long and causes the page to display poorly.

3.6.1 Identify Missing Localization Strings or Files If a string is missing, the text string will appear in American English enclosed in braces ({}). You can hover

over the string to determine which property is missing in your file.

If there is just a single string on a page, you may have accidently changed the property name or removed

it. If several strings are missing on a page, you may have failed to copy and translate the file, or you may

have set the wrong name for one of the translation files. In this circumstance, review the property

names for the missing strings to determine if the first part of the name (before the underscore) is the

same. This segment is the base component of the missing or misnamed localization file.

3.6.2 Determine (and Resolve) Incorrect or Missed Translations You will need to determine incorrect translations. Review the context of the current page and determine

if the phrasing makes sense - given the context of the activity that the user will perform.

28

Missed translations will appear in American English without braces. Locate the property in the correct

language file and translate it for the language you are testing.

3.6.3 Adjust Translations That Impact Page Display Some languages can cause lines to wrap when a page displays. You must adjust these lines to fit

appropriately.

Since the application is responsive (adjusts to different screen sizes), you will want to validate the

language text layout on PC, tablet, and smartphone-sized screens. There are browser plug-ins that allow

you to test this application responsiveness without having to perform this testing on each physical

device. For example, the Google Chrome Web Store has several browser plug-ins available. Typing

“responsive test” in the Search field of the Google Chrome Web Store reveals several applications and

extensions.

3.6.4 Perform Re-testing To Ensure Proper Localization You should initiate an upload and publish operation for each individual change and may need to perform

several passes before all text is adjusted appropriately.

3.6.5 Disable Debugging and Perform Final Validation Add comments (or comment out) the i18n_keys setting in the settings.xml file before restarting the

portal and performing a final review. The content that you review should appear as expected.

3.7 Deploy to Production The final step of the localization process involves deploying the configured files into the production

environment (or onto the production server).

When you are satisfied with final testing and debugging, you must load your language settings onto your

production system.

1. Log into the Agent portal as a system administrator.



4. From the Configure Language Support window, click the Browse button to navigate to your .zip

file.

5. To retrieve this file, click the Upload button.

6. To designate your selection as the active file, click the Publish button.

Your new file will be used for translations, as this is your newly customized localization file.

If you have uploaded translation (or customized template) files, a previous translation file will be

available as a rollback file. Clicking the Rollback button in the Configure Language Support window

automatically moves this file from the Localization available for rollback field to the Currently

published localization field. The rollback feature, therefore, allows you to retrieve a recently published

file - making this file the active document. This action is helpful if, for example, you publish a file (whose

file name would then populate the Currently published localization field) but need to revert to (and

use) a previously published document.

You must view the changes in your production environment before activating the system. If there are

any issues, you can rollback the changes to the previous production file version by clicking the Rollback

29

button in the Configure Language Support window. You must ensure that the file you want to make

active currently appears in the Localization available for rollback field.

30

4 E-mail Templates Branding e-mail templates involves the following:

Download Default Templates

Modify Templates

Save Template Updates/Zip Notification Folder/Upload/Publish

Use the default e-mail template as a best practice guide (in general and in terms of how templates

should appear) - as it provides insight into how your templates should look and the high-level

information they should contain. The default e-mail template contains a URL (or link). You must modify

this link, replacing it such that it points to the location where your application will be deployed. It is

imperative that you update the hard-coded (and static) link before you deploy the application.

Next, you must add CSS and branding to these notification e-mail templates; thus, incorporating your

company style and theme.

You can rewrite the e-mail template content (and add/remove variables) or use the existing text. At

minimum, you must validate all e-mail text to ensure content accuracy and clarity. Once you are

satisfied with your e-mail template updates, you must save all changes (to notification.zip) and upload

this file before publishing this information (thus, incorporating your brand throughout the application).

Note: notification.zip is the default template folder. This folder contains the config.xml file and the

email folder. The config.xml file contains a list of e-mail template names; there is no need to modify this

file. The email folder contains the e-mail templates. You must modify the contents in this file (applying

your company brand and reviewing content for accuracy) before saving changes and uploading the now

customized notification.zip for publication.

4.1 Download Default Templates To begin this process, you must access the Agent portal to download the default templates.

1. Log into the Agent portal.


3. From the list of options on the left side of this window, click Configure e-mail.

The Configure E-mail window appears.

4. Click the Download default templates link on the right side of the window.

This process downloads notification.zip to your designated location.

31

Download Default Templates

4.2 Modify Templates To begin the template modification process, you must add/edit the HTML as required.

1. Add HTML to each of the e-mail template <body> sections (to include the company

logo). More specifically, add content beginning with <div class=”block”> through

</div><<div class=”block”> as noted below – modifying your HTML similarly.

32

HTML Table Example

Header Example

33

2. Replace the Login page href URLs in the templates – modifying your HTML similarly.

Login Page Example

Based on these HTML modifications, e-mails will have a logo as depicted in the image

below.

E-mail Template with Company Logo

34

4.2.1 Common Properties The table below contains "common variables" that you can use for all Smart Suite applications. More specifically, you will use these variables

when modifying your e-mail templates:

Variable Values Portal Description

accountStatus disabledByAdmin lockedAuthCodeFailure lockedPasswordFailure lockedSecretQuestionFailure open

Agent/Customer Identifies the state of the account; for example, if it is normal "open", or if it has been locked because of failures (or locked by an administrator).

active true false

Agent TRUE if the user is enabled; FALSE if the account has been disabled.

appName telco_b2c Customer The configurable name of the application.

appType csr b2c

Agent/Customer Identifies the application for which the account was created.

authCodeFailTime milliseconds since Jan 1st, 1970 Agent/Customer The time of the last incorrect password entry.

authCodeRetryCount 0 - max retry Agent/Customer The number of consecutive times a user has failed to provide the correct password.

authcookie Agent/Customer The cookie value used to recall a user's machine.

defaultEmailFrom Agent/Customer The default "From" address to use for e-mails.

defaultSmsFrom Agent/Customer The default "From" address to use for SMS notifications.

description Agent A custom description associated with the account set when the Admin is enrolled (by the enrolling Admin).

emailAddress Agent/Customer The default e-mail address for the user.

35


firstName Agent/Customer The first name of the user.

lastName Agent/Customer The last name of the user.

lockoutTime milliseconds since Jan 1st, 1970 Agent/Customer If not 0, contains the time when the user can access the system again after being locked out.

mobileNumber Customer The mobile telephone number for the user.

phoneNumber Agent/Customer The configured telephone number for the user.

registrationStatus firstLogin complete pending

Agent/Customer Identifies the registration status for the user.

firstLogin - The administrator has enrolled but has not logged in.

complete - The user has logged into the system at least once.

pending - The user has enrollment but has not completed the enrollment process by entering the validation code.

role ROLE_SAAS_USER_B2B_ORG_ADMIN ROLE_SAAS_USER_B2B_ADMIN ROLE_SAAS_USER_B2B_NORMAL

Agent/Customer Identifies the role of the user:

ROLE_SAAS_USER_B2B_ORG_ADMIN - System Administrator in the Admin Portal

ROLE_SAAS_USER_B2B_ADMIN - Business Unit Administrator in the Admin Portal

ROLE_SAAS_USER_B2B_NORMAL - Business Unit User in the Admin Portal

secretQuestion1 1 - 10 Agent/Customer This value identifies the index of the secret question for the user; this maps to the auth_secret_questions table.




36


secretQuestionAnswer1 Agent/Customer The user's answer to the first secret question.

secretQuestionAnswer2 Agent/Customer The user's answer to the second secret question.

secretQuestionAnswer3 Agent/Customer The user's answer to the third secret question.

secretQuestionAnswer4 Agent/Customer The user's answer to the fourth secret question.

secretQuestionFailTime milliseconds since Jan 1st, 1970 Agent/Customer The time of the last incorrect secret question answer entry.

secretQuestionRetryCount 0 - max retry Agent/Customer The number of consecutive times a user has failed to provide the correct secret question answer.

securityImage 1 - 37 Agent/Customer Maps to the user's security image defined in auth_security_images.

Customername Agent/Customer The user name.

Common Properties

4.2.2 Additional Properties The tables below contain the Variable, Values, Portal, and Description of additional properties that comprise the e-mail templates.

4.2.2.1 batch_failure

An e-mail containing the following property may be sent when a batch job fails.


jobName Batch The name of the batch job.

4.2.2.2 batch_noop

An e-mail containing the following property may be sent when a batch job runs successfully but performs no actual operation.

37



4.2.2.3 batch_success

An e-mail containing the following property may be sent when a batch job has completed successfully.



4.2.2.4 bill_new_doc_one_account

An e-mail containing the following properties may be sent to the customer when the bill is ready.


ACCOUNT Customer The internal account number for the new document.

AMOUNT_DUE Customer The amount due for the new document.

CURRENCY_ID Customer Maps to a currency identified in the PMT_CURRENCY table.

DUE_DATE YYYYMMDD Customer The due date of the payment in the YYYYMMDD format.

ACCOUNTLIST Customer Empty; used for the bill_new_doc_few_accounts e-mail.

NUMACCOUNTS 0 Customer Not used for this e-mail; instead, used for the bill_new_doc_few_accounts and bill_new_doc_many_accounts.

BILL_DATE YYYYMMDD Customer The document date in the YYYYMMDD format.

38


USER_ROLE ROLE_SAAS_USER_B2C_NORMAL

Customer The role for the user being notified. (This is a duplicate of user role above and should be removed in the future).

BILL_AMOUNT Customer The total amount of the document.

DISPLAY_NAME Customer The external account number for the new document.

4.2.2.5 enroll_csr

An e-mail containing the following properties may be sent when a new Admin is enrolled in the Agent Portal.


password Agent The password chosen by the admin when the account was created.

secret_answer 111111 Agent The default response to secret question.

4.2.2.6 enroll_user_complete

An e-mail containing the following properties may be sent when a user completes enrollment, logging in for the first time.

4.2.2.7 enroll_validation

An e-mail containing the following properties may be sent after a user enrolls and provides the validation code such that they can complete the

enrollment.


authCode Customer The validation code that must be entered to complete enrollment.

authCodeCreationTimestamp Milliseconds since Jan 1st, 1970 Customer The time when the code was generated. (The code is only available for a configurable amount of time; this is the date/time it was created.)

39

4.2.2.8 login_forgot_password

An e-mail containing the following properties may be sent when a user follows the Forgot Password flow.


passwordAuthCode Agent/Customer The authentication code the user needs to enter to get his/her password.

passwordAuthCodeTimestamp Agent/Customer The time when the authentication code was created (in milliseconds since Jan 1st, 1970). The authentication code is only valid for a limited time; this value indicates when that time started.

4.2.2.9 login_forgot_username

An e-mail containing the following properties may be sent when a user follows the forgot username flow.


authCode Agent/Customer The authentication code the user needs to enter to get his/her user name.

authCodeCreationTimestamp Agent/Customer The time when the authentication code was created (in milliseconds since Jan 1st, 1970). The authentication code is only valid for a limited time; this value indicates when that time started.)

4.2.2.10 login_secret_question_reset

An e-mail containing the following property may be sent when an agent administrator resets a user's password and secret questions.


temp_password Agent/Customer The temporary password created by the system.

All secret questions are reset to the same value as to display the user's secret question, using secretQuestionAnswer1.

4.2.2.11 login_temporary_password

An e-mail containing the following properties may be sent when a user completes the Forgot Password flow.

40


temp_password Agent/Customer The temporary password created by the system.

4.2.2.12 org_admin_enroll_validation

An e-mail containing the following properties may be sent after an admin enrolls in the application and provides the password/validation code

to complete the enrollment.


password Agent The password chosen by the admin when the account was created.

authCode Agent The validation code that must be entered to complete enrollment.

4.2.2.13 payment_automatic_create_success

An e-mail containing the following property may be sent when an automatic payment is created successfully.


display_name Customer The account number.

4.2.2.14 payment_automatic_delete_success

An e-mail containing the following property may be sent when an automatic payment is deleted successfully.



4.2.2.15 payment_automatic_edit_success

An e-mail containing the following property may be sent when an automatic payment is edited successfully.

41



4.2.2.16 payment_make_payment_failure

An e-mail containing the following property may be sent when a payment has failed.


display_name Batch The account number.

transactionId Batch The payment transaction ID.

amount Batch The payment amount.

paymentDate Batch The payment date.

4.2.2.17 payment_make_payment_success

An e-mail containing the following properties may be sent when a payment is made successfully.


display_name Customer/Batch The account number.

transactionId Customer/Batch The payment transaction ID.

amount Customer/Batch The payment amount.

paymentDate Customer/Batch The payment date.

42

4.2.2.18 payment_onetime_scheduled_success

An e-mail containing the following properties may be sent when a one-time payment is scheduled successfully.



transactionId Customer The payment transaction ID.

amount Customer The payment amount.

paymentDate Customer The payment date.

4.2.2.19 payment_schedule_batch_message

An e-mail containing the following properties may be sent after a payment schedule batch job has completed successfully.


caseId Batch The case ID.

display_name Batch The account number.

amount Batch The payment amount.

payUpto Batch The pay up to amount.

minAmount Batch The minimum due amount.

balAmount Batch The statement balance amount.

sourceName Batch The payment source name.

walletExpiry Batch The wallet expiration date.

43


payDate Batch The payment date.

4.2.2.20 payment_wallet_create_success

An e-mail containing the following property may be sent when a payment wallet is created successfully:



4.2.2.21 payment_wallet_delete_success

An e-mail containing the following property may be sent when a payment wallet is deleted successfully.



4.2.2.22 payment_wallet_edit_success

An e-mail containing the following property may be sent when a payment wallet is edited successfully.



4.2.2.23 profile_email_change_confirm

An e-mail containing the following property may be sent when a user wants to change his/her password.

44


VALIDATION_CODE Agent/Customer The validation code the user must enter to finish their password change.

4.2.2.24 profile_updated

An e-mail containing this property may be sent when a user has changed a profile or notifications setting.

45

4.3 Save, Zip, Upload, Publish After you have completed modification of the e-mail templates, you must save your changes and zip the

notification.zip folder. The notification.zip folder must contain the config.xml file and the e-mail folder

containing all customized templates.

config.xml and email

notification.zip

Next, you must upload this file via the Configure e-mail option in the Configure Application window

before publishing this file. Once this file is published, your brand becomes active and available

throughout the application.

46

Configure E-mail

47

Appendix A Appendix

Appendix A.1 Settings.xml As noted in the Settings.xml section of this document, you can access the settings.xml file during the

brand download process which you perform when configuring your application via the Agent portal. The

settings.xml file allows you to configure the XSLT templates that generate the application pages; in

addition, you can use the content of this file to make high-level branding changes to these application

pages.

Note: Although you will not make frequent changes to the settings.xml file, it is - in fact -

common to edit header and footer information. When modifying headers and footers (or any

other information in this file), you must use an XML text editor to make your updates.

The following sections comprise the settings.xml file:

Section Description

props Contains configuration settings, which allow you to change the global behavior of the XSLT templates.

header Contains both the HTML to insert into the <head> element of the HTML as well as the HTML to add to the top of each application page. The header typically contains the company logo and a link to the company website.

footer Contains the HTML to add to the bottom of each page. The footer typically contains the copyright notice.

logo Allows for the placement of the logo and link to the company's website in the menu rather than above the menu.

class Defines the classes for each HTML element that is created by the XSLT.

While the Settings.xml section of this document focuses on the Props, Header, and Footer (sections

which you may edit more commonly), this Appendix concentrates on the Logo and Class settings.xml

sections (which you may edit more infrequently).

Appendix A.1.1 Logo You can use the elements that comprise the Logo section to add a logo image inside the menu. The table

below includes the Logo elements, values (if any), and the associated descriptions.

Element Values Description

enabled true/false This flag enables/disables the logo inside the menu area.

url URL URL that opens if the user clicks on the logo.

class Classes to add to the logo element.

image URL URL that opens for logo display.

Appendix A.1.2 Class This section defines the classes you can add to the HTML elements created by the XSLT templates.

a

Defines classes to add to any link (<a>) elements in the application. The <a> element is an "HTML

anchor" (or link you click to move to another page). This section of the settings.xml defines optional

classes to add to those elements so they can be branded if they are internal links, external links, links

48

that displays a pop-in, or links to cancel a user's actions. The table below includes the <a> elements,

values (if any), and the associated descriptions.


internal Contains the classes to add to any <a> elements that move between pages inside the application.

external Contains the classes to add to any <a> elements that move to pages outside of the application.

popin Contains the classes to add to any <a> elements that open a popin inside the application.

cancel Contains the classes to add to any <a> elements that cancel the current operation.

body

Contains any additional classes to add to the <body> HTML element for each page.

checkbox

Defines the classes for the HTML elements that form a set of checkboxes that are stacked vertically. The

table below includes the checkbox elements, values (if any), and the associated descriptions.


parent Contains the classes to add to the <div> around the whole element.

label Contains the classes to add to the <label> element for the set of checkboxes.

field Contains the classes to add to the <div> that holds all the checkboxes.

item Contains the classes to add to the individual <div> elements around each checkbox.

itemLabel Contains the classes to add to the <label> element around each checkbox.

control Contains the classes to add to the actual <input> element for checkboxes.

text Contains the classes to add to the <span> element that contains the text for a single checkbox.

checkboxInline

Defines the classes for the HTML elements that form a set of checkboxes that are listed horizontally. The

table below includes the checkboxInline elements, values (if any), and the associated descriptions.







control Contains the classes to add to the actual <input> element for checkboxes.


checkboxToggle

49

Defines the classes for the HTML elements that form a checkbox designated by a Yes/No toggle. The

table below includes the checkboxToggle elements, values (if any), and the associated descriptions.







control Contains the classes to add to the actual <input> element for the checkboxes.


date

Defines the classes for the HTML elements that form a date input field. The table below includes the

date elements, values (if any), and the associated descriptions.



label Contains the classes to add to the <label> element for the field.

field Contains the classes to add to the <div> that holds the <input> element.

input_group Contains the classes to add to the <div> element that groups the input field and the button to display the calendar popin.

control Contains the classes to add to the actual <input> element for the field.

button_group Contains the classes to add to the <span> element that contains the button to display the calendar popin.

button Contains the classes to add to the <button> element that displays the calendar popin.

glyph Contains the classes to use on the <span> element inside the button, which is usually "glyphicon glyphicon-calendar" so it shows the calendar icon from the bootstrap UI.

dropdown

Defines the classes for the HTML elements that form a dropdown field. The table below includes the

dropdown elements, values (if any), and the associated descriptions.




field Contains the classes to add to the <div> that holds the <select> element.

control Contains the classes to add to the actual <select> element for the field.

option Contains the classes to add to the <option> elements in the dropdown.

group

50

Defines the classes for grouping HTML elements used by the use cases. If you add classes here, you

should check the string section and add the same classes - as strings can be displayed with the same

grouping identifiers. The table below includes the group elements, values (if any), and the associated

descriptions.


blockquote Contains the classes to add to a <blockquote> element.

div Contains the classes to add to a <div> element.

footer Contains the classes to add to a <footer> element.

form Contains the classes to add to a <form> element.

h1 Contains the classes to add to an <h1> element.






li Contains the classes to add to an <li> element.

p Contains the classes to add to a <p> element.

ul Contains the classes to add to a <ul> element.

image

Defines the classes for the <img> elements.

input

Defines the classes for the HTML elements that form an input field. The table below includes the input

elements, values (if any), and the associated descriptions.




field Contains the classes to add to the <div> that holds the <input> element.

control Contains the classes to add to the actual <input> element for the field.

linkField

Defines the classes on a link inside of a form element. The table below includes the linkField elements,



external Classes to add if the link is to an external page.

internal Classes to add if the link is to an internal page in the application.

51

menu

Defines the classes for the menu components.

header

Defines the classes for the HTML elements that designate the menu bar. The table below includes the

header elements, values (if any), and the associated descriptions.


navbar Contains the classes to add to the <nav> around the whole main menu.

container Contains the classes to add to the <div> inside the <nav> element.

header Contains the classes to add to the <div> that holds the menu button that displays on small devices. This element also contains the logo (if configured to be inside the menu).

button Contains the classes to add to the <button> element that is used to access the menu on small devices.

item

Defines the classes used for the elements that form a menu item. The table below includes the item



class Contains the classes to add to the <li> element for each menu item.

active Contains additional classes to add to the <li> element if the menu item is active.

dropdown Contains additional classes to add to the <li> element if the menu item contains a submenu.

activeDropdown Contains additional classes to add to the <li> element if the menu item contains a submenu that is active.

link Contains the classes to add to the <a> link element for the menu item.

dropdownLink Contains the classes to add to the <a> link element for the menu item (if it is a dropdown menu).

dropdownSpan Contains the classes to add to the <span> element that is used to display the submenu.

dropdownMenu Contains the classes to add to the <ul> element when the menu item is a dropdown menu.

msg

Defines the classes for the message bodies. The table below includes the msg elements, values (if any),

and the associated descriptions.


header The classes to add to the header (h4) of a message.

body The classes to add to the body (p) of the message.

msgData

52

Defines the classes for message display in response to data errors, such as validation. These messages

display at the top of the page. The table below includes the msgData elements, values (if any), and the

associated descriptions.


class Contains the base classes on the <div> element.

baseType Messages that display will have one of four levels:

success

info

warning

danger

This string is appended to the baseType and added as a class to the message's <div> element. Therefore, if the baseType is "alert-" and the message is the danger level, then the class "alert-danger" will be added to the <div> element.

msgScreen

Defines the classes for message display in response to process actions, such as operation failed. These

messages display at the top of the page. The table below includes the msgScreen elements, values (if

any), and the associated descriptions.


class Contains the base classes on the <div> element.

baseType Messages that display will have one of four levels:

success

info

warning

danger

This string is appended to the baseType and added as a class to the message's <div> element. Therefore, if the baseType is "alert-" and the message is the danger level, then the class "alert-danger" will be added to the <div> element.

positive In addition to the four levels used in the baseType, legacy messages may have a "positive" or "negative" type. This element maps the positive legacy type to the correct class. Most often, this means this value would be the value of baseType plus success. Therefore, if the baseType value is "alert-", then the value would translate to "alert-success".

negative In addition to the four levels used in the baseType, legacy messages may have a "positive" or "negative" type. This element maps the negative legacy type to the correct class. Most often, this means this value would be the value of baseType plus danger. Therefore, if the baseType value is "alert-", then the value would translate to "alert-danger".

orderedList

Defines the classes to add to the elements of an ordered list. The table below includes the orderedList



group Contains the classes to add to the <ol> element.

item Contains the classes to add to the <li> element.

53

radioset

Defines the classes for the HTML elements that form a set of radio buttons that are stacked vertically.

The table below includes the radioset elements, values (if any), and the associated descriptions.



label Contains the classes to add to the <label> element for the set of radio buttons.

field Contains the classes to add to the <div> that holds the radio buttons.

Item Contains the classes to add to the individual <div> elements around each radio button.

itemLabel Contains the classes to add to the <label> element around each radio button.

control Contains the classes to add to the actual <input> element for the radio buttons.

text Contains the classes to add to the <span> element that contains the text for a single radio button.

submit

Define the classes to add to the Submit buttons in the HTML. The table below includes the submit



normal Contains the default classes to add to the <input> element.

button Contains the classes to add if the submit displays as a <button> element.

reset Contains the classes to add if the submit button is used for reset. Contains the classes to add to the <button> element.

string

Defines the classes for various groupings in which a string can be enclosed. If you add classes here,

check the group element; you might want to add classes there as well. The table below includes the

string elements, values (if any), and the associated descriptions.


cite Contains the classes to add to a <cite> element.

del Contains the classes to add to a <del> element.

em Contains the classes to add to an <em> element.

footer Contains the classes to add to a <footer> element.







ins Contains the classes to add to an <ins> element.

54


p Contains the classes to add to a <p> element.

pre Contains the classes to add to a <pre> element.

s Contains the classes to add to a <s> element.

small Contains the classes to add to a <small> element.

span Contains the classes to add to a <span> element.

strong Contains the classes to add to a <strong> element.

u Contains the classes to add to a <u> element.

stringField

Defines the classes to add to the div when a read-only string displays as a form element. The table below

includes the stringField elements, values (if any), and the associated descriptions.


control Contains the classes to add to the <div> element.

structure

Commonly, you use structures to display form elements. Form elements have a label, an input field, and

help text.

parent

Holds the classes to add to the <div> element surrounding the whole field.

label

Holds the classes to add to the <label> element surrounding the label.

field

Holds the classes to add to the <div> element surrounding the input field.

error

Contains the classes to include on error messages that might be associated with a form field.

generic

Provides the classes for the generic error message. The table below includes the generic elements,



alert The classes to add to the <div> that surrounds the whole error message.

alert_text Contains the classes to add to the <span> element containing the text.

55

required

Provides the classes for the "required" error message. This error displays if the field is required, but the

user has not provided a value. The table below includes the required elements, values (if any), and the

associated descriptions.


alert Classes to add to the <div> that surrounds the whole error message.


validation

Provides the classes for the "validation" error message. This error displays if the field does not conform

to the validation (i.e., too short, too long, not enough unique characters, not a valid e-mail address). The

table below includes the validation elements, values (if any), and the associated descriptions.


alert The classes to add to the <div> that surrounds the whole error message.


help_label

If a help message is defined for a field, two instances are inserted into the HTML: one instance after the

label, and one instance after the input field. This element controls the behavior of the help text that

displays via an icon after the label. To avoid displaying two help icons, the "hidden" class suppresses the

additional icon. The help displays using AngularJS/Bootstrap's tooltip component. The table below

includes the help_label elements, values (if any), and the associated descriptions.


icon The classes to add to the <span> element with which the user interacts to display the help text.

placement top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom

Identifies where the tooltip should display relative to the icon.

open_delay number >= 0 The number of milliseconds to delay the showing of the popin.

close_delay number >=0 The number of milliseconds to delay the closing of the popin.

trigger mouseenter, click, outsideClick, focus, none

Identifies what causes the help text to display.

tooltip_class Contains any additional classes to add to the help text.

help_field

56

If a help message is defined for a field, two instances are inserted into the HTML: one instance after the

label, and one instance after the input field. This element controls the behavior of the help text that

displays using an icon after the label. To avoid displaying two help icons, the "hidden" class suppresses

the additional icon. The help displays using AngularJS/Bootstrap's tooltip component. The table below

includes the help_field elements, values (if any), and the associated descriptions.


icon The classes to add to the <span> element with which the user interacts to display the help text.

placement top, top-left, top-right, bottom, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom

Identifies where the tooltip should display relative to the icon.

open_delay number >= 0 The number of milliseconds to delay the showing of the popin.

close_delay number >=0 The number of milliseconds to delay the closing of the popin.

trigger mouseenter, click, outsideClick, focus, none

Identifies what causes the help text display.

tooltip_class Contains any additional classes to add to the help text.

table

Defines classes and icons used by the XSLT templates to generate a table. Below are the table elements,



parent Classes to add to the <div> element that surrounds the table and paging elements.

paging_nav Classes to add around the paging <nav> element.

paging_nav_list Classes to add to the <ul> element for the paging.

paging_item_first Classes to add to the <li> element to jump the user to the top of the table.

paging_item Classes to add to all the <li> elements for the pages.

paging_item_last Classes to add to the <li> element to jump the user to the bottom of the table.

paging_link_first Classes to add to the <a> element to jump the user to the top of the table.

paging_link_first_icon Character(s) to display in the link to jump to the top of the table.

paging_link Classes to add to all <a> elements for all page links.

paging_link_last Classes to add to the <a> element to jump the user to the bottom of the table.

paging_link_last_icon Character(s) to display in the link to jump to the bottom of the table.

element Classes to add to the <table> element.

header Classes to add to the <head> element of the table.

header_row Classes to add to the <tr> elements inside the <head> element.

header_column Classes to add to the <td> elements for the header.

body Classes to add to the <tbody> element of the table.

row Classes to add to the <tr> elements inside the <tbody> element.

57


column Classes to add to the <td> elements inside the <tbody> element.

footer Classes to add to the <tfoot> element at the bottom of the table.

empty_table Classes to add to the <table> element when the table is empty.

empty_table_msg Classes to add to the <div> element that surrounds the empty table message.

empty_table_msg_body Classes to add to the <span> element that contains the empty table message.

sort_num_ascending Classes to add to the <span> element before the link text when the column is numeric and sorted in ascending order.

sort_num_descending Classes to add to the <span> element before the link text when the column is numeric and sorted in descending order.

sort_alpha_ascending Classes to add to the <span> element before the link text when the column is alphanumeric and sorted in ascending order.

sort_alpha_descending Classes to add to the <span> element before the link text when the column is alphanumeric and sorted in descending order.

sortable Classes to add to the <span> element before the link text when the column is sortable, but not currently being sorted.

unorderedList

Defines the classes to add to the elements of an ordered list. The table below includes the unorderedList



group Contains the classes to add to the <ul> element.

item Contains the classes to add to the <li> element.

Documents

EngageOne Digital Self Service Branding Guide...This document provides information specific to branding, localization, and e-mail templates. 2 Branding Branding allows you to customize