Broadcom SAP Mobile Design Approach SAPUI5 Development

Guidelines

DS
SAPUI5 Development
Guidelines

Document Control Information Page i DSAM

16-Jul-18 545861702.docx
 Broadcom SAP Mobile Design Approach SAPUI5 Development
Guidelines

Document Control Information

Document Information
Document Identification SAPUI5 Development Guidelines

Document Name SAPUI5 Development Guidelines

Project Name DSAM

Client NA

Document Author NA

Document Version 1.0

Document Status NA

Date Released 12-Jul-2016

Document Edit History

Version Date Additions/Modifications Prepared/Revised by

Document Review/Approval History

Date Name Organization/Title Comments

Distribution of Final Document

The following people are designated recipients of the final version of this document:

Name Organization/Title
<Name> <Organization/Title>

Document Control Information Page ii DSAM

16-Jul-18 545861702.docx
 Broadcom SAP Mobile Design Approach SAPUI5 Development
Guidelines

Table of Contents

1. SAPUI5 for Mobile – Guidelines Introduction...................................................................................4

2. General Practices................................................................................................................................ 5
2.1 Indentation..................................................................................................................................... 5
2.2 Readability vs Compression.......................................................................................................... 5
2.3 HTML5 Guidelines......................................................................................................................... 5
2.4 CSS Guidelines............................................................................................................................. 5
2.5 Javascript Guidelines.................................................................................................................... 6
2.5.1 Javascript Libraries............................................................................................................... 6
2.5.2 General Guidelines................................................................................................................ 6
3. Performance........................................................................................................................................ 8
3.1 Optimize Delivery of CSS and JavaScript.....................................................................................8
3.2 Optimize JavaScript execution...................................................................................................... 8
4. Best Practices – MVC model.............................................................................................................. 9
5. Naming Conventions for Control and Application Development..................................................10
5.1 Control API.................................................................................................................................. 10
5.2 HTML/DOM related (Renderers, Application Development)........................................................10
5.2.1 Reserved Characters for Control IDs..................................................................................10
5.2.2 Reserved IDs for DOM nodes/elements..............................................................................10
5.2.3 Reserved DOM Attributes................................................................................................... 11
5.2.4 Reserved URL Parameters................................................................................................. 11
5.3 Control CSS................................................................................................................................. 11
5.3.1 Styling Contexts.................................................................................................................. 12
6. Code Base Checks............................................................................................................................ 13
7. Reusuability Guideline...................................................................................................................... 14
7.1 Internationalization (i18n)............................................................................................................ 15
7.1.1 Introduction:........................................................................................................................ 15
7.1.2 Overview:............................................................................................................................ 15
7.1.3 Maintaining Property Files:.................................................................................................. 15
Text Type:.................................................................................................................................... 15
Maximum Text Length:................................................................................................................. 16
Additional Context Information:.................................................................................................... 16
7.2 Translation................................................................................................................................... 16
7.3 Scrolling/Pull-to-refresh/Pagination.............................................................................................16
7.3.1 Custom scroll container:...................................................................................................... 17
7.3.2 Pull to Refresh..................................................................................................................... 17
7.3.3 Pagination (Growing List).................................................................................................... 17
7.4 Connectivity with Gateway system.............................................................................................. 17
7.5 Message Handling....................................................................................................................... 17
Message Dialog:.......................................................................................................................... 18
7.6 Common Rejection/Approval Confirmation Message..................................................................18
7.7 Common utility library.................................................................................................................. 18
7.7.1 Date Input:........................................................................................................................... 18
7.7.2 Date formatting:................................................................................................................... 19
7.7.3 Price formatting:.................................................................................................................. 19
7.8 Analytical elements...................................................................................................................... 19
8. Impact on Upgrade for Fiori Apps.................................................................................................... 20

Document Control Information Page iii DSAM

16-Jul-18 545861702.docx
1. SAPUI5 for Mobile – Guidelines Introduction

SAPUI5 for Mobile sap.m SAPUI5 contains a dedicated control library for mobile devices like tablets
and smartphones with the technical name sap.m. Both sap.m and the control libraries for the desktop
are based on the same Runtime which provides a common infrastructure for Data Binding, Model-
View-Controller Concepts, Localization and other topics. In addition, both control sets have a
harmonized API for the common parts.
As SAPUI5 is based on web standards like HTML, CSS and JavaScript you can run the application
on multiple platforms. The SAP Blue Crystal theme is the basis for Fiori applications, supports
desktop browsers, and provides common look and feel across different platforms and browsers.
In this Project, we develop HTML5 mobile applications using SAPUI5 mobile toolkit with bulk of the
code being written in javascript. This document's primary motivation is two- fold: 1) code consistency
and 2) best practices. By maintaining consistency in coding styles and conventions, we can ease the
burden of legacy code maintenance, and mitigate risk of breakage in the future. By adhering to best
practices, we ensure optimized page loading, performance and maintainable code.

Impact on Upgrade for Fiori Apps Page 4 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
2. General Practices

2.1 Indentation

For all code languages, we require indentation to be done via soft tabs (using the space
character). HittingTab in your text editor shall be equivalent to four spaces.
2.2 Readability vs Compression

We prefer readability over file-size savings when it comes to maintaining existing files. Plenty of
whitespace is encouraged, along with ASCII art, where appropriate. There is no need for any
developer to purposefully compress HTML or CSS, nor obfuscate JavaScript.

We will use server-side or build processes to automatically minify and gzip all static client-side
files, such as CSS and JavaScript.
2.3 HTML5 Guidelines

 Place an html comment on some closing div tags to indicate what element you're closing. It
will help when there is lots of nesting and indentation.
 Tables shouldn't be used for page layout.
 Use microformats and/or Microdata where appropriate, specifically hCard and adr.
 Code does not contain inline JavaScript event listeners
 Code does not contain inline style attributes
 Code does not contain deprecated elements & attributes
 Page begins with a valid DTD (HTML5 doctype)
 Code is indented using hard tabs
 Tags and attributes are lowercase
 Tags are closed and nested properly
 Markup is semantic (e.g. class names do not denote presentation, Items in list form are
housed in a UL, OL, or DL)
 Tables(using Div) are only used to display tabular data
 Element IDs are unique
 Code validates against the W3C validator
 DOM nesting depth does not exceed 12 levels
 Total page weight does not exceed client requirements (e.g. 1000kb)
 TItle case is used for headers/titles and forced to all caps using the CSS declaration text-
transform: uppercase;
 Where text is included via images, CSS image replacement is used.

2.4 CSS Guidelines

 Add CSS through external files, minimizing the # of files, if possible. It should always be in
the HEAD of the document.
 Use the LINK tag to include, never the @import.Including a stylesheet
 Don't include styles inline in the document, either in a style tag or on the elements. It's
harder to track down style rules.
 Use normalize.css to make rendering more consistent across browsers.

Impact on Upgrade for Fiori Apps Page 5 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
  Use a font-normalization file like YUI fonts.css
 Elements that occur only once inside a document should use IDs, otherwise, use classes.
 Understand cascading and selector specificity so you can write very terse and effective
code.
 Write selectors that are optimized for speed. Where possible, avoid expensive CSS
selectors. For example, avoid the * wildcard selector and don't qualify ID selectors
(e.g. div#myid) or class selectors (e.g. table.results.) This is especially important with web
applications where speed is paramount and there can be thousands or even tens of
thousands of DOM elements. More on writing efficient CSS on the MDC.
 Consistent naming conventions are used
 CSS validates against the W3C validator
 CSS selectors are only as specific as they need to be; grouped logically
 A print-friendly .css file is included in the page
 A reset.css file is included in the page
 CSS sprites are used to combine images
 CSS selectors gets more specific across files
 CSS shorthand is used for properties that support it
 CSS selectors are not tag qualified
 CSS properties are alphabetical (except for vendor-specific properties) (Why? See:
Parable of the brown M&Ms)

2.5 Javascript Guidelines

2.5.1 Javascript Libraries

 We primarily develop new applications in SAPUI5 (built over JQuery),
though we will be using other js libraries which can be useful for
development.

2.5.2 General Guidelines

 99% of code should be housed in external javascript files. They should be

included at the END of the BODY tag for maximum page performance.
 Don't rely on the user-agent string. Do proper feature detection. (More
at Dive Into HTML5: Detection& jQuery.support docs)
 Don't use document.write().
 All Boolean variables should start with "is".Test for positive conditions
 1.isValid = (test.value >= 4 && test.success);
 Name variables and functions logically: For
example: popUpWindowForAd rather than myWindow.
 Don't manually minify. With the exception of the traditional i, etc. for for loops,
variables should be long enough to be meaningful.
 Documentation should follow NaturalDocs structure.
 Constants or configuration variables (like animation durations, etc.) should be
at the top of the file.
 Strive to create functions which can be generalized, take parameters, and
return values. This allows for substantial code reuse and, when combined

Impact on Upgrade for Fiori Apps Page 6 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
 with includes or external scripts, can reduce the overhead when scripts need
to change. For example, instead of hard coding a pop-window with window
size, options, and url, consider creating a function which takes size, url, and
options as variables.
 Comment your code! It helps reduce time spent troubleshooting JavaScript
functions.
 Don't waste your time with <!-- --> comments surrounding your inline
javascript, unless you care about Netscape 4. :)
 Organize your code as an Object Literal/Singleton, in the Module Pattern, or
as an Object with constructors.
 Minimize global variables - the less globals you create, the better. Generally
one, for your application namespace, is a good number.
 Consistent naming conventions are used
 Code adheres to the K&R style
 Core page features function with JavaScript disabled
 JavaScript belongs to a namespace (no globally scoped code)
 jQuery selectors are performant
 jQuery objects are cached
 Event delegation is used for binding events to 2 or more elements, or ajax'd
elements
 Script blocks are placed before the closing <body> tag
 Code has been run through JSLint (jslint.com) or JSHint (jshint.com)

Impact on Upgrade for Fiori Apps Page 7 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
3. Performance
3.1 Optimize Delivery of CSS and JavaScript

 Consider a cookie-less subdomain for static assets

 Avoid inline <script> blocks.
 CSS should be located in the <head> of the document, Javascript should be right before
the </body>tag.
 Both CSS and JavaScript should be served minified. Most people use the YUI
Compressor for this.
 Both should be served using gzip on the wire
 CSS should be concatenated together. Obviously this can only be done for files that share
the same media type (e.g. screen or print). The general goal here is to reduce the number
of HTTP connections to dependencies during the loading of the page.
 JavaScript should be concatenated. While a ajax script dependency manager would be
ideal (similar to the YUI 3 Loader), it's rather complicated to implement. In its place I'd
recommend a singular download of most of the script used on the site. (Of course, proper
caching should be used to retain the file as long as is reasonable).
 Concatenation and minification typically occur during an automated build process, when
packaging the code for deployment on stage or production. Many use tools
like Ant or Maven for this.
 Avoid inline <script> blocks within the HTML. They block rendering and are quite
devastating to page load time.
 Site uses a cache buster for expiring .js, .css, and images
 JavaScript and CSS is minified and concatenated into logical groupings
 Images have been optimized by ImageOptim (http://imageoptim.com/)

3.2 Optimize JavaScript execution

During a page load, there is typically a lot of script waiting to execute, but you can prioritize it.
This order prioritizes based on user response:

 Script that changes the visible nature of the page needs to fire absolutely first. This
includes any font adjustment, box layout, or IE6 pngfixes.
 Page content initialization
 Page header, topnav and footer initialization
 Attaching event handlers
 Omniture, Doubleclick, and other 3rd party scripts

Impact on Upgrade for Fiori Apps Page 8 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
4. Best Practices – MVC model

In the beginning the browser loads the web applications's index.html which contains itself only
minimal code. The index.html then loads the Application.js which actually launches the application
and instantiates the App View which holds the sap.m.App control that serves as root container for all
UI controls. The application user interface is split into 3 pages: Home, Header Detail, Item Detail.
These pages are represented each by a view containing the sap.m.Page control and a controller
handling the view events. When trigger a navigation to another page an event is send via the
EventBus to the App Controller. There are no direct dependencies between views, and those
EventBus events are only used for navigation and parameter handover between pages. To enable
the back button of Android devices the jQuery.sap.history plugin is used which listens to changes in
the browser history and triggers the App Controller for backward navigation. The InstanceManager
tracks open instances of dialogs and popovers. The App controller checks on backward navigation for
open instances and closes them on demand. There are two data models: The Header model
containing the list of header information. The Item Model contains the item details for a selected
header. In addition there are two models that contain resources used by the application: The Image
Model abstracts from access paths and the i18n Model connects to translated texts.

Application.js
Index.html (Application
Startup)

App View
App Controller
sap.m.App

Header Item
Model Model

Sap.ui.core.EventBus

Header Controller Item Controller

Header View Item View

sap.m.page sap.m.page

Impact on Upgrade for Fiori Apps Page 9 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
5. Naming Conventions for Control and Application Development

5.1 Control API

 A control name should start with an upper case letter and use camel case for concatenated
words (example: MatrixLayout).
 A control property name should start with a lower case letter and use camel case to for
concatenated words (example: colSpan).
 A control event name should start with a lower case letter and use camel case to for
concatenated words (example: press).
 A control method should start with a lower case letter and use camel case to for
concatenated words (example: doSomething).
 A control aggregation should start with a lower case letter and use camel case to for
concatenated words.
 A control association should start with a lower case letter use camel case to for
concatenated words.
 For a control, properties, events and relations should have unique names to avoid name
clashes for generated classes.
 Parameters of control events should start with a lower case letter.
 Tag names should start with a lower case letter, and camel case should be used for
concatenated words. Tag names should match the names of the control except tag names
start in lower case. This establishes a natural relation between the tag and its control
(example: matrixLayout).
 Tag attributes should start with lower case letters, and camel case should be used for
concatenated words (example: colSpan).
 Tag attributes for event handlers should be named on<event-name>, all in lower case
letters (example: onpress).

5.2 HTML/DOM related (Renderers, Application Development)

5.2.1 Reserved Characters for Control IDs

The SAPUI5 framework regards the dash '-' as a forbidden character for control IDs.
Applications must not use this character in their control IDs. Control Renderers however
can and should use the dash to derive synthetic IDs from control Ids (e.g. by appending a
suffix like "-mysuffix" to the control ID). By reserving the '-', naming conflicts with the
application can be avoided.
Characte
Description
r
- The minus is reserved as a separator for synthetic IDs

5.2.2 Reserved IDs for DOM nodes/elements

The following table contains a list with reserved IDs by SAPUI5 Core:
ID Description
sap-ui-bootstrap ID of the bootstrap script tag
sap.ui.core- deprecate
ID of the bootstrap script tag
script d
sap-ui-* Prefix for SAPUI5 Core internal created IDs
*-r Suffix for former UR LightSpeed root areas (similar to UIArea of

Impact on Upgrade for Fiori Apps Page 10 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
 SAPUI5)

Within the sap-ui- namespace the following IDs are currently used:
ID Description
sap-ui-library-* Prefix for UI libraries
script tags
sap-ui-theme-* Prefix for theme
stylesheets link tags
sap-ui-highlightrect ID of the highlight rect for
controls in TestSuite
sap-ui-blindlayer-* ID for BlockLayer
sap-ui-static ID of the static area of
SAPUI5
sap-ui-TraceWindowRoot ID of the
TraceWindowRoot
sap-ui-xmldata ID of the XML Data Island

5.2.3 Reserved DOM Attributes

The following table contains a list of reserved DOM element attributes names:
Attribute Description
data-sap-ui-* Namespace for custom
attibutes of SAPUI5

In general all custom attibutes should be prefixed with data-.

5.2.4 Reserved URL Parameters

The following table contains a list of reserved URL parameter names that should be
avoided by applications (Applications can use these SAPUI5 parameters. However, they
should not use these to name their own parameters):
Attribut
Description
e
sap-* Namespace for URL parameters introduced by SAP AG
sap-ui-* Namespace for URL parameters introduced by SAPUI5

5.3 Control CSS

 To avoid collisions, all CSS classes written to the HTML must start with "sap" if developed
inside SAP, and with "sapUi" or "sapM" if developed inside the UI5 development teams.
Outside the respective groups this prefixes should not be used.
 CSS classes for a certain control should add the control name or an abbreviation of it to
the above prefix. Controls outside the "commons" library may benefit from adding also the
library name in between, especially if developed outside the core UI5 development teams.
o The HTML root element of every control should have this CSS class name written,
any inner HTML elements requiring a class name should use this class name and
add a suffix.
 All CSS selectors written by UI5 control developers must refer to at least one such CSS
class, pure HTML elements should not be styled (to avoid affecting non-owned HTML)
 Inline CSS should only be used for control instance specific style (like the button width)
Impact on Upgrade for Fiori Apps Page 11 of 20 DSAM
16-Jul-18 SAPUI5 Development Guidelines
 5.3.1 Styling Contexts
When the visuals of certain controls are different depending on the context/container
where they are used, the suggested pattern to achieve this is using CSS cascades:

 The area/container shall write a certain marker CSS class to the HTML and
document this CSS class in its JSDoc. The documentation should mention
the purpose and contract/meaning of this class, e.g. that it is meant to modify
the appearance of children in a way that better fits table cells, toolbars or
headers.
 This CSS class may not have any CSS styles attached, it is a pure marker
(such styles would also need to stay stable and might cause trouble for other
containers where these styles are not desired)
 The naming convention for these classes is to have the suffix "-CTX", e.g.
"sapUiTable-CTX" or "sapMList-CTX" or "sapUiBorderless-CTX". This makes
them easily discernible from "normal" CSS class names.
 Controls which want to modify their appearance in such an area shall have
CSS where this marker class is used in a cascade and provides the suitable
style (e.g. .sapUiTable-CTX .myCompanyInputField { border: none; })

Impact on Upgrade for Fiori Apps Page 12 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
6. Code Base Checks

 All code is checked into SVN or other source code repository

 Unused sections of code are removed
 Code is commented where appropriate
 Client-side code is free of any references to development and staging environments, URLs, or
other development settings (e.g. dev Facebook application IDs)
 Any environmental defaults reference production.
 Any dependency definitions use exact versions.

Impact on Upgrade for Fiori Apps Page 13 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
7. Reusuability Guideline

The following are the common UI elements that have been identified as part of separate reusuable
project.
Internationalization
Scrolling/Pull-to-refresh/Pagination
User Authorization
Message Handling
Common Rejection/Approval Confirmation Message
Common Utility Library
Analytical Elements

The above components will be included as part of the reusuable project. All the custom applications
will have a reference to this project to avoid duplicate code repository.

Screenshot for reusuable project

Impact on Upgrade for Fiori Apps Page 14 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
 7.1 Internationalization (i18n)

7.1.1 Introduction:
Texts in SAPUI5 Application can be translated in an ABAP system. It is a requirement
that the name of the file containing the text elements ends with '.properties' and a special
key in the format # SAPUI5 TRANSLATION-KEY <GUID with 32 characters> must be
provided in the first line (Exchange the complete palceholder <GUID with 32 characters>,
including the angle brackets, with a vaild 32char GUID).
In addition, every text element needs a classification such as the text type.

7.1.2 Overview:
The purpose of the text API in the SAPUI5 Repository is to enable an ABAP translation
process for text elements of SAPUI5 applications developed in Eclipse that are stored in
the SAPUI5 Repository.
The text elements are located in a property file (here denoted as a '<name>.properties'
file, where '<name>' stands for an arbitrary identifier).
The text elements stored in '<name>.properties' files are transferred to a database table
when a SAPUI5 application is deployed to a SAPUI5 Repository on an ABAP server.
In addition, these table entries are written to a transport request.
These texts can then be translated in the usual way.
The master language of the SAPUI5 Repository is taken as the master language for the
submitted text elements.
The translated texts can then be accessed during runtime.
The SAPUI5 Text Repository is updated each time the property file is submitted to the
SAPUI5 Repository (creation, update and deletion of texts is supported)

7.1.3 Maintaining Property Files:

Text elements in the '<name>.properties' file are simple value key pairs separated by an
equals sign. However, in order to enable proper translation for these text elements, it is
necessary to classify the texts elements with additional information. This additional
information must be placed in the line directly above the text element and must begin with
the number sign ('#').
The complete line must have one of the following structures:
#<TextType>
#<TextType>,<MaximumLength>
#<TextType>,<MaximumLength>:<AdditionalContextInformation>
#<TextType>:<AdditionalContextInformation>

Text Type:
Each text element must have a text type assignment. Text types can be, for example,
XBUT for button texts, XFLD for field labels, or XTXT for general texts. A list of the
various possible text types is provided below.

Maximum Text Length:

The optional maximum text length information (simple number) can be provided directly
after the text type, separated by a comma.
Impact on Upgrade for Fiori Apps Page 15 of 20 DSAM
16-Jul-18 SAPUI5 Development Guidelines
 The maximum text length must be above the original text length and must never exceed
255.
In order to support a proper translatability of the text, the developer should set an
appropriate maximum text length following these rules:
Source text length < 8 characters : max. text length: multiply by 5, min. 12 characters
Source text length between 8 and 30 characters : max. text length: multiply by 3
Source text length > 31 characters : max. text length: multiply by 1.5

Additional Context Information:

An optional additional comment (a note for the translator) can be provided for text
elements after the text type (or after the length information), separated by a colon.
Although this additional context information is not mandatory, it can help translators to
find the most suitable translation for the text element.

7.2 Translation
SAP Note 1686090 must be implemented in the translation system to enable the translation of
SAPUI5 text elements. SAPUI5 text elements are treated as ABAP short texts with translation
object type: UI5T.
The translation object name is a GUID, which is the key taken from the original property file
containing the text elements (the GUID from the first line) (see under Prerequisites:# SAPUI5
TRANSLATION-KEY <GUID with 32 characters>). Therefore, all text elements from a property
file have the same (translation) object name.
The text key of each text element consists of the text type and an individual GUID, separated
by a blank.
The UI5T texts are stored in the following database tables (all three tables also contain an
indicator for the SAP/customer namespace):
/UI5/TREP_TEXT Master table with the text name, unique text GUID (contained in the text key
displayed in SE63), text type, additional context information, and another GUID that is the
(translation) object name (the GUID from the property file).
/UI5/TREP_TEXT_T Language-dependent table containing the original and translated text; the
key is the text GUID as in table /UI5/TREP_TEXT and the language key.
/UI5/TREP_FILES Another table, which contains the (translation) object name (the GUID from
the property file) and path information for the property file.
The UI5T translation object type needs to be assigned to the respective languages for
translation in table LXE_MASTER (table LXE_LA_OB), otherwise it will not show up in the
translation worklist.

7.3 Scrolling/Pull-to-refresh/Pagination
Because of limited size of mobile devices, scrolling is an essential topic in mobile user
experience. Smooth and easy scrolling is important for user acceptance of mobile applications.

7.3.1 Custom scroll container:

A custom control that needs to provide a scrollable area for its content should implement
the following steps:
 Instantiate a sap.ui.core.delegate.ScrollEnablement delegate, at best in the
.onAfterRendering callback.

Impact on Upgrade for Fiori Apps Page 16 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
  Implement a .getScrollDelegate method that returns the current instance of the
delegate to other controls.
 Destroy the ScrollEnablement delegate on exit.

7.3.2 Pull to Refresh

The SAPUI5 mobile library supports the "pull down to refresh" functionality that allows
users to refresh lists or page content with fresh data from server. To implement it, create
a sap.m.PullToRefresh control and put it as the first control into a page or a scroll
container that contains the list that needs to be refreshed.
The application should request new data on the refresh event and call the hide method
when the data is received and the list is refreshed. You can provide a URL to a custom
logo image with customIcon or switch display of logo of by setting showIcon to false. The
first line of text "Pull to refresh" is standard and cannot be changed. However, you may
set an optional description text to display, for example, the last update time.

7.3.3 Pagination (Growing List)

The Growing feature helps if your content is too big to be loaded/shown at once. It
paginates the content into smaller chunks - aka pages - which are loaded/shown one
after another. Random access to pages further in the end is not possible. Depending on
the model the content is loaded on demand (oData) or shown on demand (JSON).

7.4 Connectivity with Gateway system

User authentication takes place at the server side during login process to gateway system. At
the front end, the user credentials entered by the user is sent to the server for a single sign on.
If successful, the server returns back an authentication token which shall be sent along with all
the data requests made by the user in the current session.

7.5 Message Handling

It is greatly recommended to invest care and energy in good message content:
 Provide short and crisp error messages to the user.
 A message should always contain a 'Call for Action'.
 Map error code/messages from a backend system to UI element.
 Identify the most common error situations and build reusuable component.
 For any 'Backend' or 'Database' error has occurred and the user cannot handle this
anyway, if technically feasible ease the process of receiving support from IT (e.g.
submit issue and related information to support or at least provide contact information).
 It is a must to detect all problems related to network connectivity and indicate them as
such.

Message Dialog:
 A message dialog interrupts the user's workflow by blocking the current page and
needs to be closed by the user.
 Use a message dialog if the message is important and must be acknowledged by the
user.

7.6 Common Rejection/Approval Confirmation Message

Impact on Upgrade for Fiori Apps Page 17 of 20 DSAM
16-Jul-18 SAPUI5 Development Guidelines
 Build common UI component to display Approve/Reject confirmation message box. This
component contains the following elements:
 The generic confirmation message (e.g. Do you want to Reject?) provided by
functional team.
 Two action buttons
o Confirm and Cancel in case of Approval
o Reject and Cancel in case of Reject
 Text input for mandatory reason for rejection
 Text input for optional reason for approval

7.7 Common utility library

Common utility library is responsible to handle common javascript functions like date
formatting, price, amount converstion etc.

7.7.1 Date Input:

Throught the applications dates are handled using Js libraries and sapui5 controls.
SAPUI5 date input displays calender in a popup.

Impact on Upgrade for Fiori Apps Page 18 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
 7.7.2 Date formatting:
All the dates need to be display based on user profile setting in the backend system
accross all the Fiori apps.

7.7.3 Price formatting:

All price/ amount values need to be display based on user profile setting in the backend
system accross all the Fiori apps.

7.8 Analytical elements

Out of Scope

Impact on Upgrade for Fiori Apps Page 19 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines
8. Impact on Upgrade for Fiori Apps

There is no impact on upgrade of a Custom Fiori application.

Note: There is current no SAP standard approach for managing UI conflicts for Firoi applications that
are enhanced.
The following is our approach to mitigate the above.
Following are the steps to incorporate changes on Fiori UI enhancements.
 Download application code to Eclipse
 Compare upgraded version of code with enhanced version of code and classify into the
following categories (Tools like Beyond Comparator can be used for code comparison).
o The component which has been enhanced has not been changed by SAP:
 Resolution : Replace this component by the enhanced version
o The component which has been enhanced has been changed by SAP
 Resolution : Merge enhanced version of code with upgraded version
o The component which has been enhanced has been deleted by SAP
 Resolution : Identify the component where need to incorporate the
enhancement changes
 Test UI modifications as needed
 Create a transport request in the ABAP system
 Use the ABAP report /UI5/UI5_REPOSITORY_LOAD to upload the contents of modified
SAPUI5 project back to the application.

Impact on Upgrade for Fiori Apps Page 20 of 20 DSAM

16-Jul-18 SAPUI5 Development Guidelines