Table Of Content
1. Variable And Object Property Names Error! Bookmark not defined.
2. Don’t Use Console.Log(); 3
3. Use Camel Case For Variable And Function Names 4
4. Use Underscore For Private And Protected Object Property Names 4
5. Use Hyphens And Lowercase Letters For Id Names 5
6. i18n Naming Conventions And Utilization 5
7. Use A Base Controller 6
8. Share Common Events of Controllers between Controller with
EventBus 6
9. Use Consistent XML Formatting 8
10. How to Concatenate More than 3 Expressions in a Controller 9
11. Model View Controller 10
12. Avoiding Global Variables 11
13.Using Comments Properly 11
14. Reducing Modules 11
15. Reusing Elements 12
16. Naming Convention 12
17. Don’t Hard Code or Concatenate the Strings that needed to be
translated 13
18. Don’t Use Time-outs Error! Bookmark not defined.
19. Code Formatting 13
20. Creating Classes 14
21. File Names and Encoding 15
22.Routing 16
23. Don’t Override Control class Styling directly 17
24. Don’t Style DOM Element names directly 18
25. Don’t Use generated IDs in CSS Selectors 18
26.Don’t use hard-coded colors,font sizes and images if the app
should be themable 19
27.CSS/Themes Naming Conventions Error! Bookmark not defined.
1. Variable And Object Property Names
Variable/Object Declaration
jQuery Object $Name
Array aName
Date dName
Boolean bName
Float fName
Integer iName
String sName
Object oName
Function fnName
Map mName
Variant Types vName
Regular Expression rName
2. Don’t Use Console.Log();
Because the console object is not available within certain browsers
while the developer tools are not available instead use sap.base.Log.all(); .
There are different Log Levels and they are :
● all
● debug
● error
● fatal
● info
● none
● warning
● trace
3. Use Camel Case For Variable And Function
Names //@saravanan - And Method names also
1. For Variable
sEmployeeGroup = "EmployeeData!";
2. For Function
function sayNow() {
sap.base.Log.info("abc")
};
4. Use Underscore For Private And Protected Object
Property Names
Don’t use or override private and protected functions . Private function are
typically prefixed with “_” where as protected functions are indicated by a
yellow diamond in front of the function name.
1. //private variable in the controller object
_sPrivateVariable = “abc” ;
2. //private function in the controller object
_fnPrivateFunction: function() {
sap.base.Log.info(“abc”);
5. Use Hyphens And Lowercase Letters For Id
Names
<Button id="sap-m-button-id"
press="onButtonPress">
</Button>
6. i18n Naming Conventions And Utilization
#TIT: Application name // # is a Comment Line in i18n
appTitle=Abc
#DES: Application description
appDescription=Abc
i18n can help reduce the number of formatter or utility functions of
your application.Using,i18n can easily build formatted string via parameter
passing.It also keeps the controller clean and the xml file declarative.
7. Use A Base Controller
Create an application as base controller. The base controller extends
all other controllers . In the base controller go methods which are common
in the controllers.
For example,the base controller could contain a method called
getModel.In the method goes this.getView().getModel().Now all controller
can use the shortcut this.getModel() instead of this.getView().getModel().
Move reusable functions to higher scope.The recommended base
controller as follows:
● getRouter
● getResourceBundle
● getModel
● setModel
● onNavback
8. Share Common Events of Controllers between
Controller with EventBus
The sap.ui.core.EventBus in SAP UI5 allows sharing events
application-wide. It is possible to attach or detach events to an
EventBus.One can retrive the global EventBus anywhere in an application .
Therefore one can retrive to an EventBus applied events anywhere in
an application.The primary use case for an EventBus is to enable
communication between controllers.
In EventBus ,it is sufficient to initialize the button press event just in
one controller or in a base controller which extends the view’s controllers.
After the press event is initialized ,it is to attach to the EventBus.Then the
EventBus is to receive in the view’s controllers.
For Example , the 1st xml view’s controller which holds the button
between the controllers of view1 and view2 through the EventBus shared
method called _onButtonPress the controller attaches the method to the
EventBus and consumes it as well
● Controller of View1
return Controller.extend("com.EventBus.EventBus.controller.View1", {
onInit: function () {
var oEventBus = sap.ui.getCore().getEventBus();
oEventBus.subscribe("_onButtonPress",
this._onButtonPress, this);
},
onButtonPress: function () {
var oData = {
message: "View's 1 button was clicked."
};
var oEventBus = sap.ui.getCore().getEventBus();
oEventBus.publish("_onButtonPress", oData);
},
_onButtonPress: function (oChannel, oEvent, oData) {
var sMessage = oData.message;
sap.m.MessageToast.show(sMessage);
}
});
● Controller of View2
sap.ui.controller("com.EventBus.EventBus.controller.View2", {
onButtonPress: function() {
var oData = {
message: "View's 2 button was clicked."
};
var oEventBus = sap.ui.getCore().getEventBus();
oEventBus.publish("_onButtonPress", oData);
}
});
9. Use Consistent XML Formatting
● If an xml element has more than two attributes then do a line
break before the first attribute
<ActionButton
title=”{i18n>employee}”
icon=”sap-icon://add”
press=”onPressButton”/>
● If an Xml has only one attribute then don’t give line break
<ActionButton title=”{i18n>employee}”/>
● If an xml element does not contain any aggregations, then don’t
use a closing tag but a forward slash(/) in order to close the
XML element and no space before the forward slash.
Refer above example
10. How to Concatenate More than 3 Expressions in
a Controller
var oModel=this.getView().getModel(“i18n”);
var oResourceBundle= oModel.getResourceBundle();
var sText=oResourceBundle.getText(“abc”);
11. Model View Controller
● Exhausting Models - Models allow you to write maintainable
code.It allows us to auto update control properties and bindings
all at once. It also decouples the data to the presentation layer.
var oModel=this.getView().getModel();
oModel.setProperty(“/message”,”hello”);
oModel.setProperty(“/alignment”,”End”);
oModel.setProperty(“/busy”,true);
oModel.setProperty(“/message”,”hello”);
//auto update all controls with binding
● Reducing Anonymous Functions - Prefer callbacks as separate
function for readability and extensibility.
fnMyServiceCall: function() {
var oModel=this.getView().getModel(“view”);
oModel.read(“/Orders”,{
success: this.fnSuccessCallback;
error:this.fnErrorCallback;
})
},
fnSuccessCallback: function(oResult,oResponse){
//
},
fnErrorCallback: function(oError){
//
},
12. Avoiding Global Variables
Exposing too many variables to the global scope can result in
unintentional runtime errors.Since members are accessible to the whole
view or module,undeclared variables with the same name can also effect
the value of the globally scoped variable if not handled properly. In order to
reduce the chances of having unwanted access to the variables scope
them to where they belong to.
13.Using Comments Properly
Comments are helpful , not only for us but to any succeeding
developer that will support our application. On the other hand,do not overdo
the documentation . Comment only what is needed.
14. Reducing Modules
There are several ways to load modules.Each method is intended to
reduce response time and performance by using only what is needed by
the application.
● Bootstraps - Modules loaded in manifest.json are the ones used
throughout the application .
● Constructor and Init - Dependencies loaded in the sap.ui.define of the
controller file are used for controller-wide dependencies.
● On-demand - These are inline sap.ui.require for example, Dialogs .
Used them for rarely used elements and libraries in view.
15. Reusing Elements
In relation to having reusable controllers,fragments. Fragments
hilghly increase the reusability and help us to insert controllers even at
runtime.If our application has re-occuring control parts. We can just
declare fragment then reuse them anywhere needed.fragments are also
cached once they are initiated,which will speed up our application response
moving forward.
16. Naming Convention
● Controller name starts with an uppercase letter and use
CamelCase for concatenated words.
● Property,event,aggregation,association,method and parameter
names start with a lowercase letter and also use CamelCase
17. Don’t Hard Code or Concatenate the Strings that
needed to be translated
Hard coding Ui strings will exclude them for translation .In addition ,
concatenating translatable strings in applications might lead to errors in
i18n : the texts in question might have a different translation order in other
languages and will then be syntactically wrong.
18. Don’t Use Time-outs
Executing logic with timeouts is often a work around for faulty
behavior and does not fix the root cause. The timing that work for us may
not work under different circumstances or when the code is changed.Use
callbacks or events instead.
19. Code Formatting
The following list contains the formatting rules:
● Add a semicolon after each statement , even if optional
● No spaces before and after round braces (function
calls,function parameters etc.) and is on the same line
● Use space after conditional statements and exception
handling around curly braces,around operators and after
commas
● Use “===” and “!==” instead of “==” and “!=”
● Indentation must follow
● Do not use oEvent.preventDefault() or
oEvent.stopPropagation() without a good reason and
clear documentation why it is really required
● Make sure not to break data binding
For example,
function outer(c, d) {
var e = c * d;
if (e === 0) {
e++;
}
for (var i = 0; i < e; i++) {
// do nothing
}
function inner(a, b) {
return (e * a) + b;
}
return inner(0, 1);
20. Creating Classes
For the creation of class the rules are :
● Initialize and describe instance fields in constructor function
this._bReady = false;
● Define instance methods as members of the prototype of the
constructor function
MyClass.prototype.doSomething = function() { }
● Define static members(fields and functions) as members of the
constructor function object itself :
MyClass.doSomething = function() { }
● Start the name of private members with an underscore
this._bFinalized
● Combine constructors+methods+static in single JS source file
named and located after the qualified name of the class; this is
precondition for class loading
● Static classes do not have a constructor but an object literal;
there is no pattern for inheritance of such classes. If inheritance
is needed, use a normal class and create a singleton in the
class.
● Do not use SuperClass.extend() for subclasses. If no base
class exists, the prototype is automatically initialized by
JavaScript as empty object literal and must not be assigned
manually. Consider inheriting from sap.ui.base.Object
● Subclasses call the constructor of their base class
SuperClass.apply(this, arguments);
21. File Names and Encoding
When developing content for SAPUI5 ,the following rules are :
● Folder names must not contain spaces
● To avoid issues with SAPUI5 module loading and with URL
handling in general , resource names should not contain
spaces.
● Single folder names must not be longer than 40 Characters
● Two resource names must not only differ in case
● Avoid non-ASCII characters in resource names.
22.Routing and Navigation
If we try to work with navigation using component based routing then
further if an application requires more navigation with split apps like a
double master or double detail,use the event bus mechanism.The
navigation handling of the event bus should be specific to that split app
controller and named uniquely to avoid multiple listeners of the same
navigation bus.
1. Naming Targets
Targets and routes should match view file to easily track the flow of
the navigation. Also provide the following minimal settings for targets :
● viewLevel - sets hierarchy to the application views
● viewName
● viewType
● transition - the default transition behavior for the current target
● bypass - fail safe target for unmatched routes
2. Creating Patterns
Route name should be descriptive by itself .Prefer plural form of
routes if applicable.
3. Naming URL Parameters
Routing parameter should be url safe.Routing parameters
should be singular form
CSS Styling Issues
23. Don’t Override Control class Styling directly
If the naming of style classes is changed in future versions,styling
rules will no longer be applied to targeted elements. In addition , overriding
control class styles directly might lead to style clashes when applications
are run in shared runtime environment.
For example, Add a custom CSS class to the control in those
situation were we want additional styling :
oButton.addStyleClass(“abcAppError”);
Then provide the style for this class will be :
.abcAppError {
Font-weight: bold;
}
24. Don’t Style DOM Element names directly
Styling DOM elements directly will lead to unpredictable results, as
SAPUI5 does not guarantee the stability of the inner control DOM tree over
time. In addition,this might lead to styling clashes when applications run in
shared runtime environments or when custom HTML is added. It is better to
limit styling changes to specifically used CSS classes.
For example :
.myStyleClass {
width : 120px;
}
25. Don’t Use generated IDs in CSS Selectors
SAPUi5 applications can create dynamic IDs for elements.Don’t use
these IDs as selectors in custom CSS as they can change over time.It is
better to add and use CSS classes instead.
For example : Adding a style class
.myEmphasizedButton {
font-weight: bold;
}
26.Don’t use hard-coded colors,font sizes and
images if the app should be themable
Themability of applications relies on less calculations within the
SAPUI5 theme CSS.It means that these colors are not modified by theming
which leads to design issues or accessibility issues
27.CSS/Themes Naming Conventions
● All CSS classes must begin with the sapUI prefix .
● For each control there must be one unique control specific
prefix for CSS classes.
For example, sapUIBtn for a Button control or sapMITb for an
IconTabBar in sap.m library.This class must be written to the HTML root
element of the control.
● All CSS classes within the HTML of this control must append a
suffix to this class name
For example, spaUiBtnInner or sapMITBHeader
