# eslint-plugin-fiori-custom
The ESLint custom plug-in is an extension of existing [ESLint](https://eslint.org/docs/developer-guide/working-with-plugins) open-source node plugin. This plug-in contains custom rules and their configurations.
Below you could find the steps to use it in your development project.
## Initial Set-up
* Go to your project directory and open terminal.
* Initialize npm package (only if you don’t have a package.json in you root directory) with this command.
```
npm init -y
```
* Set your registry with this command:
```
npm config set registry https://registry.npmjs.org/
```
## Installations
* Install [ESLint](http://eslint.org) with this command:
```
npm install eslint@8.32.0 --save-dev
```
* Next, install `babel-eslint`:
```
npm install babel-eslint --save-dev
```
* Next, install `eslint-plugin-fiori-custom`:
```
npm install eslint-plugin-fiori-custom@2.6.7 --save-dev
```
## Usage
### Productive Code
* Run the command below to test your productive code with the checks. This command will show the reports in the terminal itself. You could modify the command as per your need (e.g. adding another *--ignore-pattern* for some directory that you don't want to lint).
```
eslint ./ -c ./node_modules/eslint-plugin-fiori-custom/configure.eslintrc --no-eslintrc --rulesdir ./node_modules/eslint-plugin-fiori-custom/lib/rules/ --ignore-pattern 'test/**' --ignore-pattern 'src/test/**' --ignore-pattern 'target/**' --ignore-pattern 'webapp/test/**' --ignore-pattern 'src/main/webapp/test/**' --ignore-pattern 'webapp/localservice/**' --ignore-pattern '/src/main/webapp/localService/**' --ignore-pattern 'backup/**' --ignore-pattern 'Gruntfile.js' --ignore-pattern 'changes_preview.js' --ignore-pattern 'gulpfile.js'
```
### Test Code
* Run the command below to check your test code. This command will show the reports in the terminal itself. This command uses configuration specific to test code. You must not forget to add the test-folder path at the end of this command (e.g.: *webapp/test/* or *src/test/* or *test/*)
```
eslint -c ./node_modules/eslint-plugin-fiori-custom/testcode.eslintrc --no-eslintrc --rulesdir ./node_modules/eslint-plugin-fiori-custom/lib/rules/ src/test
```
#### .eslintrc config file
Adding a `.eslintrc` to the project root enables integration with the Editor such as VS Code.
```JavaScript
{
"plugins": [
"fiori-custom"
],
"overrides": [
{
"files": [
"**/*.*"
],
"excludedFiles": [
"test/**",
"src/test/**",
"target/**",
"webapp/test/**",
"src/main/webapp/test/**",
"webapp/localservice/**",
"src/main/webapp/localService/**",
"backup/**",
"Gruntfile.js",
"changes_preview.js",
"gulpfile.js"
],
"plugins": [
"fiori-custom"
],
"extends": [
"eslint:recommended",
"plugin:fiori-custom/fioriToolsDefault"
]
},
{
"files": [
"webapp/test/**"
],
"plugins": [
"fiori-custom"
],
"extends": [
"plugin:fiori-custom/fioriToolsTestcode"
]
}
]
}
```
# Rules
You could find the rules and the details below.
## line-endings
## Detect usage of invalid line endings
Different operating systems usually represent a newline with different characters, for details see here.
For example Windows uses CR+LF (carriage return and line-feed characters) whereas Unix only uses the LF character.
Mixed kinds of line-endings in the same repository can cause code reviews or automatic merging to be .
### Rule Details
This check will raise a warning when "Windows line endings" (CR + LF character) are detected. Please change lo Unix style line endings.
## sap-bookmark-performance
## Check your setting of _serviceRefreshInterval_
While deciding which interval to use, one has to keep in mind, that there might be thousands of users which have the Launchpad open and might display some KPIs. With a too small refresh Interval this can create a considerable work load in the back end. Therefore, we recommend the following values as default depending on the use case.
1. Complex calculations are required to calculate the data on the tile, which might take multiple seconds to be calculated -> No auto refresh must be used. Set the Interval to 0.
2. Only a simple query is required (e.g. determine the number of tasks I’m assigned to) out of one central table -> Interval should be set to 300 (5 Minutes).
_Warning Message_: A value of more than 0 and less than 300 for the property `serviceRefreshIntervall` may result in performance limitations.
The following patterns are considered warnings:
```js
function _extractDiscoveryCollection(oCollection) {
var onInit = function () {
var oView = this.getView(),
oAddToHome = oView.byId("addToHome");
oAddToHome.setAppData({
title: "My Bookmark", // default: ""
serviceUrl: "/any/service/$count", // default: undefined, string or a JS function
// should raise an error
serviceRefreshInterval: 1, // default: undefined
customUrl: "https://www.sap.com" // default: undefined, string or a JS function
});
}
}
oAddToHome.setServiceRefreshInterval(299);
```
## sap-browser-api-error
## Detect some forbidden usages of browser APIs
This is a collection of usages of browser APIs that might lead to issues.
Please search for the warning messages that you see in ESLint to find the explanation of the respective check.
## Rule Details
This rule aims to detect forbidden usages of browser APIs and raise error.
#### Direct DOM insertion
Warning message: _Direct DOM insertion, create a custom control instead_
The following patterns are considered warnings:
```js
document.createElement(foo);
```
#### Direct DOM manipulation
Warning message: _Direct DOM Manipulation, better to use `jQuery.appendTo` if really needed_
The following patterns are considered warnings:
```js
document.execCommand(cmd, false, args);
```
#### insertBrOnReturn
Warning message: _`insertBrOnReturn` is not allowed since it is a Mozilla specific method, Chrome doesn't support that._
The following patterns are considered warnings:
```js
var abc = document.queryCommandSupported('insertBrOnReturn');
```
#### Location reload
Warning message: _location.reload() is not permitted._
The following patterns are considered warnings:
```js
location.reload();
var mylocation = location;
mylocation.reload();
```
#### Global event handling override
Warning message: _Global event handling override is not permitted, please modify only single events._
The following patterns are considered warnings:
```js
window.event.returnValue = false;
window.onload = function () {
return Hammer;
};
```
#### Proprietary Browser API access
Some browser APIs should not be used at all, instead the sap.ui.Device API has to be used.
Warning message: _Proprietary Browser API access, use `sap.ui.Device` API instead._
The following patterns are considered warnings:
```js
if (window.addEventListener) {
x = 1;
}
navigator.back();
var x = navigator.appCodeName;
```
#### Definition of globals via window object
Warning message: _Definition of global variable/api in `window` object is not permitted._
The following patterns are considered warnings:
```js
var mynavig = window.top.tip;
window.define();
```
#### Dynamic style insertion
Warning message: _Dynamic style insertion, use library CSS or lessifier instead._
The following patterns are considered warnings:
```js
var sheet = document.styleSheets[i];
var abc = document.styleSheets.length;
```
## False positives
There might be cases where the check produces a false positive, i.e. you receive a warning but your code is correct and complies to the UI5 guidelines.
In such a case, you can deactivate the rule by placing the following pseudo-comment block around your code.
**Please make sure to have your code reviewed by a colleague before you enter such a pseudo-comment.**
```js
/*eslint-disable sap-browser-api-error*/
/*eslint-enable sap-browser-api-error*/
```
## sap-browser-api-warning
## Discourage usage of certain browser APIs
This is a collection of usages of browser APIs that might lead to issues.
Please search for the warning messages that you see in ESLint to find the explanation of the respective check.
## Disallow usage of browser APIs that might lead to issues.
Discourage usage of certain browser APIs.
## Rule details
#### Direct history manipulation
##### Warning message: _Direct DOM insertion, create a custom control instead_
The following patterns are considered warnings:
```js
if (this.editMode){
window.history.back();
} else {
this.oRouter.navTo("detail", {
contextPath : "AccountCollection('"+responseObject.accountID+"')"
}, true);
}
```
The following patterns are not considered warnings:
```js
myNavBack : function example(sRoute, mData) {
var oHistory = sap.ui.core.routing.History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
//The history contains a previous entry
if (sPreviousHash !== undefined) {
/* eslint-disable sap-browser-api-warning */
window.history.go(-1);
/* eslint-enable sap-browser-api-warning */
} else {
var bReplace = true; // otherwise we go backwards with a forward history
this.navTo(sRoute, mData, bReplace)
}
}
```
#### setTimeout usage
Executing logic with timeouts is often a workaround for faulty behavior and does not fix the root cause. The timing that works for you may not work under different circumstances (other geographical locations with greater network latency, or other devices that have slower processors) or when the code is changed. Use callbacks or events instead, if available. Please check the SAPUI5 guidelines for more details.
##### warning message: Timeout with value > 0
The following patterns are considered warnings:
```js
window.setTimeout(jQuery.proxy(processChanges, this), 50);
```
#### Global selection
##### warning message: Global selection modification, only modify local selections
The following patterns are considered warnings:
```js
window.getSelection().rangeCount = 9;
```
#### Proprietary browser API
Certain browser APIs are considered to be risky, when used directly and not wrapped via jQuery.
##### warning message: Proprietary Browser API access
The following patterns are considered warnings:
```js
var variab1 = window.innerWidth;
var myscreen = screen;
var variab5 = myscreen.something;
document.body.appendChild(x);
document.body.style.backgroundColor = 'yellow';
var mydocument = window.document;
mydocument.body.appendChild(x);
mydocument.body.style.backgroundColor = 'yellow';
var mydocument = document;
mydocument.body.appendChild(x);
mydocument.body.style.backgroundColor = 'yellow';
var abcss = window.document.body;
abcss.appendChild(x);
abcss.style.backgroundColor = 'yellow';
```
The following patterns are not considered warnings:
```js
var width = $(window).innerWidth();
```
#### DOM access
Accessing the DOM directly is considered risky. If necessary, a jQuery selector should be used instead.
##### warning message: Direct DOM access, use jQuery selector instead
The following patterns are considered warnings:
```js
document.getElementById('test');
```
## sap-cross-application-navigation
## No static cross-application navigation targets
Fiori-as-a-Service Enablement Guideline prohibits the use of static list of cross-application navigation targets.
## Rule Details
This rule should prevent the usage of static cross-application navigation targets.
Use the isIntentSupported function of the CrossApplicationNavigation service. See the according Cross Application Navigation and JSDOC API documentation. Note that the function is mass-enabled, you could check an array of all relevant navigation targets in one call.
The following patterns are considered warnings:
```js
sap.ushell.Container.getService('CrossApplicationNavigation').toExternal({});
```
The following patterns are not warnings:
```js
checkPromoFactSheetAvailable : function example() {
// By default: promo factsheet not available
this._bPromoFactSheetAvailable = false;
if (this._oCrossAppNav) {
// Check if the intent for the promotion factsheet is supported
var sIntent = "#Promotion-displayFactSheet";
var oDeferred = this._oCrossAppNav.isIntentSupported([sIntent]);
oDeferred.done(jQuery.proxy(function (oIntentSupported) {
if (oIntentSupported && oIntentSupported[sIntent] && oIntentSupported[sIntent].supported === true) {
// Remember that the navigation to the promotion factsheet is possible
this._bPromoFactSheetAvailable = true;
// Activate the promotion links if they were already added to the view
this.activatePromotionLinks();
}
}, this));
}
}
```
## sap-forbidden-window-property
Detect the usage of forbidden window properties
## Rule Details
Warning message: _Usage of a forbidden window property._
The following patterns are considered warnings:
```js
var top = window.top;
window.addEventListener(listener);
```
## sap-message-toast
## Disallow violation for certain options of sap.m.MessageToast
The Fiori design guidelines require a certain behavior of a message toast.
## Rule Details
The check looks for any call of the method `show` on the `sap.m.MessageToast-Object` and checks the following properties:
- `duration` must no be smaller than 3000
- `width` must no be greater then 35em
- `my` must be _center bottom_
- `at` must be _center bottom_
The following patterns are considered warnings:
```js
sap.m.MessageToast.show('This is a warning!', { duration: 1000 });
```
The following patterns are not ot considered warnings:
```js
sap.m.MessageToast.show('This is a warning!');
```
## sap-no-absolute-component-path
## Disallow absolute paths to component includes
Giving an absolute path in component includes might produce an error and is no longer supported by UI5.
## Rule Details
The rule checks if `includes` inside a component have a leading `/`.
The following patterns are considered warnings:
```js
code: "sap.ui.core.UIComponent.extend('sap.ui.demokit.explored.Component', { " +
'metadata : { ' +
'includes : [ ' +
"'css/style2.css', " +
"'/css/style2.css', " +
"'/css/titles.css' " +
'], ' +
'routing : { ' +
'config : { ' +
'routerClass : MyRouter, ' +
"viewType : 'XML', " +
"viewPath : 'sap.ui.demokit.explored.view', " +
"targetControl : 'splitApp', " +
'clearTarget : false ' +
'}, ' +
'routes : [ { ' +
"pattern : 'entity/{id}/{part}', " +
"name : 'entity', " +
"view : 'entity', " +
'viewLevel : 3, ' +
"targetAggregation : 'detailPages' " +
'} ]' +
'} ' +
'} ' +
'});';
```
## sap-no-br-on-return
## Detect the usage of document.queryCommandSupported
This rule checks any call of queryCommandSupported on document. Calls with argument `sap-no-br-on-return` are not allowed because this is a browser specific command.
## Rule Details
Warning message: _`insertBrOnReturn` is not allowed since it is a Mozilla specific method, other browsers don't support that._
The following patterns are considered warnings:
```js
var abc = document.queryCommandSupported('insertBrOnReturn');
```
## sap-no-commons-usage
## Detects the usage of sap.ui.commons objects
As per Fiori Architectural Guidelines controls from _sap.ui.commons_ are not allowed. Instead, _sap.m_ controls should be used.
_Warning Message_: Usage of sap.ui.commons controls is forbidden, please use controls from sap.m library.
The following patterns are considered warnings:
```js
sap.ui.define(['sap.ui.commons.anyControl'], function (control) {
doSomething.with(control);
});
```
```js
function createControl() {
return new sap.ui.commons.Control();
}
```
## sap-no-dom-access
## Discourage usage of certain methods of document
Accessing the DOM directly is considered risky. If necessary, a jQuery selector should be used instead.
## Rule details
The following methods are not allowed to use:
- getElementById
- getElementsByName
- getElementsByTagName
- getElementsByClassName
warning message: **Direct DOM access, use jQuery selector instead**
The following patterns are considered warnings:
```js
document.getElementById('test');
```
## sap-no-dom-insertion
## Disallow usage dom insertion methods
The UI5 guidelines do not allow insertion of elements into the DOM. Instead, usage of a custom control should be considered.
## Rule Details
The rule detects all method calls of `insertBefore`, `appendChild`, `replaceChild`, `after`, `before`, `insertAfter`, `insertBefore`, `append`, `prepend`, `appendTo`, `prependTo`.
The following patterns are considered warnings:
```js
$('#container').append('Test');
var list = document.getElementById('myList1');
list.insertBefore(node, list.childNodes[0]);
myObject.after(document.body);
```
## False positives
There might be cases where the check produces a false positive, i.e. when you have a method containing one of the strings given above.
In such a case, you can change the method name or deactivate the rule by placing the following pseudo-comment block around your code.
**Please make sure to have your code reviewed by a colleague before you enter such a pseudo-comment.**
```js
/*eslint-disable sap-no-dom-insertion*/
/*eslint-enable sap-no-dom-insertion*/
```
## sap-no-dynamic-style-insertion
## Detect dynamic style insertion
## Rule Details
The check detects any usage of `document.styleSheets`.
The following patterns are considered warnings:
```js
var sheet = document.styleSheets[i];
var abc = document.styleSheets.length;
```
Warning message: _Dynamic style insertion, use library CSS or lessifier instead._
## sap-no-element-creation
## Disallow direct DOM insertion
The UI5 guidelines do not allow creation of elements in the DOM. Instead, usage of a custom control should be considered.
## Rule Details
The rule detects all method calls of "createElement", "createTextNode", "createElementNS", "createDocumentFragment", "createComment", "createAttribute" and "createEvent".
Warning message: _Direct DOM insertion, create a custom control instead_
The following patterns are considered warnings:
```js
document.createElement(foo);
```
## sap-no-encode-file-service
## Detect the usage of encode file service
The encode_file service is deprecated and not available on HCP.
## Rule Details
The rule detects the usage of the string `/sap/bc/ui2/encode_file`.
The following patterns are considered warnings:
```js
oFileUpload.setEncodeUrl(
'/sap/bc/ui2/encode_file' + (sUrlParams ? '?' + sUrlParams : '')
);
var service = '/sap/bc/ui2/encode_file';
```
How to fix: Use the sap.m.UploadCollection with the sap.m.UploadCollectionItem instead.
## sap-no-exec-command
Detect direct DOM manipulation
## Rule Details
The rule detects usage of the `execCommand` method
Warning message: _Direct DOM Manipulation, better to use `jQuery.appendTo` if really needed_
The following patterns are considered warnings:
```js
document.execCommand(cmd, false, args);
```
```js
document['execCommand'](cmd, false, args);
```
## sap-no-global-define
Detect definition of globals via window object (
## Rule Details
Global variables should not be used in Fiori Apps. This check detects global definitions by attachments to the `window` object or override of `window` properties.
The following patterns are considered warnings:
```js
window.MyVar = 'A';
window.name = 'New Name';
```
Warning message: _Definition of global variable/api in `window` object is not permitted._
## sap-no-global-event
## Detect global event handling override
The UI5 guidelines do not allow overriding global event handling.
## Rule Details
This rule detects override of the following global events:
`onload`, `onunload`, `onabort`, `onbeforeunload`, `onerror`, `onhashchange`, `onpageshow`, `onpagehide`, `onscroll`, `onblur`, `onchange`, `onfocus`, `onfocusin`, `onfocusout`, `oninput`, `oninvalid`, `onreset`, `onsearch`, `onselect`, `onsubmit`.
#### Global event handling override
Warning message: _Global event handling override is not permitted, please modify only single events._
The following patterns are considered warnings:
```js
window.event.returnValue = false;
window.onload = function () {
return Hammer;
};
```
## sap-no-global-selection
Discourage usage of global selection
## Rule details
warning message: Global selection modification, only modify local selections
The following patterns are considered warnings:
```js
window.getSelection().rangeCount = 9;
```
## sap-no-global-variable
Global variables shall not be used in SAP Fiori applications
## Rule Details
The rule checks if a variable is declared as global (defined outside any function scope) and returns an error message in this case.
ALLOWED_VARIABLES = [ "undefined", "NaN", "arguments", "PDFJS", "console", "Infinity" ]
## sap-no-hardcoded-color
## Disallow usage of hard coded colors
It is not allowed to style Fiori Apps with colors in JavaScript code as they will break the Fiori themes.
## Rule Details
The following patterns are considered warnings:
```js
$("");
```
#### How to Fix:
Do not specify colors in custom CSS but use the standard theme-dependent classes instead.
## sap-no-hardcoded-url
## Disallow use of hardcoded URLs
Fiori guidelines do not allow usage of hardcoded URLs to internal or external systems.
## Rule Details
Instead of references to internal system in your URLs, you should only reference the path to the resource.
Allowed URLs are:
`http://www.w3.org/`, `http://www.sap.com/Protocols/`, `http://www.sap.com/adt`, `http://localhost/offline/`, `https://localhost/offline/`
The following patterns are considered warnings:
```js
serviceUrl: URI("https://example.domain.com:50057/sap/opu/odata/sap/XXXX/").directory()
```
```js
serviceUrl: 'proxy/https/example.domain.com:50057/sap/opu/odata/sap/XXXX/';
```
The following patterns are not considered warnings:
```js
serviceUrl: "/sap/opu/odata/sap/FDMO_PROCESS_RECEIVABLES_SRV/"
```
## sap-no-history-manipulation
Discourage direct history manipulation
## Rule details
Warning message: _Direct history manipulation, does not work with deep links, use router and navigation events instead_
The following patterns are considered warnings:
```js
window.history.back();
```
```js
history.go(-3);
```
```js
var personalHistory = window.history;
personalHistory.back();
```
The following patterns are NOT considered warnings:
```js
myNavBack : function example(sRoute, mData) {
var oHistory = sap.ui.core.routing.History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
//The history contains a previous entry
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
var bReplace = true; // otherwise we go backwards with a forward history
this.navTo(sRoute, mData, bReplace)
}
}
```
## sap-no-inner-html-access
## Discourage the access of innerHTML
Accessing the DOM directly is considered risky.
## Rule details
It is recommended not to access the DOM via the innerHTML attribute.
warning message: **Accessing the inner html is not recommended.**
The following patterns are considered warnings:
```js
if ('some text' === button.innerHTML) {
doSomething();
}
document.getElementById('button').innerHTML = 'send';
```
## sap-no-inner-html-write
Writing to innerHTML is not allowed.
## Rule details
It is not allowed to alter the DOM via the innerHTML attribute.
warning message: **"Writing to the inner html is not allowed."**
The following patterns are considered warnings:
```js
document.getElementById('button').innerHTML = 'send';
document.getElementById('button')['innerHTML'] = 'send';
```
## sap-no-jquery-device-api
## Disallow usage of the jQuery device APIs
The `jQuery` device API is deprecated since 1.20. The respective functions of `sap.ui.Device` should be used instead.
## Rule Details
The check looks for any call of `jQuery.device`.
The following patterns are considered warnings:
```js
if (jQuery.device.is.android_phone === false) {
}
if ($.device.is.android_phone === false) {
}
```
The following patterns are not considered warnings:
```js
if (!sap.ui.Device.system.desktop) {
this.getView().byId('factSheetButton').setVisible(false);
}
```
## sap-no-localhost
## Disallow use localhost
Usage of `localhost` in Fiori apps is often done for debugging or test reasons and should be avoided in productive code.
## Rule Details
The check detects the string "localhost" in any JavaScript function call or expression.
The usage of localhost in an offline scenario is allowed, therefore coding mentioned below will not raise a warning.
The following patterns are considered warnings:
```js
if (location.hostname === 'localhost') {
}
location.host.indexOf('localhost');
```
The following patterns are not considered warnings:
```js
return 'http://localhost/offline/my_contacts/ContactCollection';
```
## sap-no-localstorage
Local storage must not be used in a Fiori application
## Rule Details
The following patterns are considered warnings:
```js
localStorage.setObj(this.SETTINGS_NAME, this.objSettings);
```
## sap-no-location-reload
## Detect location reload
Fiori guidelines do not allow `location.reload()`.
## Rule Details
This checks detects usage of `location.reload()`
The following patterns are considered warnings:
```js
location.reload();
var mylocation = location;
mylocation.reload();
```
Warning message: _location.reload() is not permitted._
## sap-no-location-usage
## Discourage usage of location
This is a collection of usages of browser APIs that might lead to issues.
Please search for the warning messages that you see in ESLint to find the explanation of the respective check.
## Rule details
window.location.\* parameters should not be used directly.
### warning message:
- Usage of location.assign(),
- Direct Hash manipulation, use router instead,
- Usage of location.href, Override of location
The following patterns are considered warnings:
```js
location.assign(data.results[0].url);
var abc = location;
abc.href.split(' & ');
window.location.hash = '#foo';
window.location.hash.indexOf('-');
location = this.oNavParams.toOppApp;
window.location = this.oNavParams.toOppApp;
```
## sap-no-navigator
Detect window.navigator usage
## Rule Details
The `window.navigator` object should not be used at all, instead the sap.ui.Device API should be used.
The following patterns are considered warnings:
```js
var language = navigator.language;
var name = navigator.appCodeName;
```
Warning message: _navigator usage is forbidden, use `sap.ui.Device` API instead._
## sap-no-override-rendering
Disallow override of control methods
## Rule Details
The check detects override of getters, setters and the functions `onBeforeRendering` and `onAfterRendering` for SAPUI5 controls.
The following patterns are considered warnings:
```js
var oButton5 = new sap.me.foo.bar.Button();
oButton5.onAfterRendering = function render(){foo.bar = 1;};
```
## sap-no-override-storage-prototype
Disallow override of sap-no-override-storage-prototype (
## Rule Details
Storage prototype must not be overridden as this can lead to unpredictable errors
The following patterns are considered warnings:
```js
Storage.prototype.setObj = function (key, obj) {};
```
## sap-no-proprietary-browser-api
Discourage usage of proprietary browser API
## Rule details
Certain browser APIs are considered to be risky, when used directly and not wrapped via jQuery.
The check detects the following browser APIs:
`document.body.*`, `screen.*`, `window.innerWidth`, `window.innerHeight`
The following patterns are considered warnings:
```js
var variab1 = window.innerWidth;
var variab1 = window.innerHeight;
var myscreen = screen;
var x = myscreen.something;
document.body.appendChild(x);
document.body.style.backgroundColor = 'yellow';
```
The following patterns are not considered warnings:
```js
var width = $(window).innerWidth();
```
**Warning Message: _Proprietary Browser API access, use jQuery selector instead._**
## sap-no-sessionstorage
Disallow usage of session storage
## Rule Details
For security reasons, the usage of session storage is not allowed in a Fiori application
The following patterns are considered warnings:
```js
sessionStorage.setObj(this.SETTINGS_NAME, this.objSettings);
```
## sap-no-ui5-prop-warning
## Disallow usage of private members of UI5 objects
Private members of UI5 objects must never be used in Fiori Apps. They can be changed by UI5 at anytime and the App might not work anymore.
## Rule Details
The rule checks usage of a member which has the same name as the following UI5 members:
### sap.ui.model.odata.ODataModel, sap.ui.model.odata.v2.ODataModel:
> _oData_
## False Positives
As the check can not determine, whether the property used is from as SAPUI5 object, there might be false positives in case you defined a property with the same name in your own object.
In such a case you can disable the check in your coding like this:
```js
/* eslint-disable sap-no-ui5-prop-warning */
...some_code_false_positives
/* eslint-enable sap-no-ui5-prop-warning*/
```
## sap-no-ui5base-prop
## Disallow usage of private members of UI5 objects
Private members of UI5 objects must never be used in Fiori Apps. They can be changed by UI5 at anytime and the App might not work anymore.
## Rule Details
The rule checks usage of a member which has the same name as the following UI5 members:
### sap.ui.base.ManagedObject:
> _mProperties_, _mAggregations_, _mAssociations_, _mMethods_,
_oParent_, _aDelegates_, _aBeforeDelegates_, _iSuppressInvalidate_,
_oPropagatedProperties_, _oModels_, _oBindingContexts_,
_mBindingInfos_, _sBindingPath_, _mBindingParameters_,
_mBoundObjects_
### sap.ui.base.EventProvider
> _mEventRegistry_, _oEventPool_
### sap.ui.base.Event
> _oSource_, _mParameters_, _sId_
### sap.ui.model.odata.ODataModel, sap.ui.model.odata.v2.ODataModel:
> _oServiceData_, _bCountSupported_, _bCache_, _oRequestQueue_,
_aBatchOperations_, _oHandler_, _mSupportedBindingModes_,
_sDefaultBindingMode_, _bJSON_, _aPendingRequestHandles_,
_aCallAfterUpdate_, _mRequests_, _mDeferredRequests_,
_mChangedEntities_, _mChangeHandles_, _mDeferredBatchGroups_,
_mChangeBatchGroups_, _bTokenHandling_, _bWithCredentials_,
_bUseBatch_, _bRefreshAfterChange_, _sMaxDataServiceVersion_,
_bLoadMetadataAsync_, _bLoadAnnotationsJoined_, _sAnnotationURI_,
_sDefaultCountMode_, _sDefaultOperationMode_, _oMetadataLoadEvent_,
_oMetadataFailedEvent_, _sRefreshBatchGroupId_,
_sDefaultChangeBatchGroup_, _oAnnotations_, _aUrlParams_
## False Positives
As the check can not determine, whether the property used is from as SAPUI5 object, there might be false positives in case you defined a property with the same name in your own object.
In such a case you can disable the check in your coding like this:
```js
/* eslint-disable sap-no-ui5base-prop */
...some_code_false_positives
/* eslint-enable sap-no-ui5base-prop */
```
## sap-no-window-alert
## Disallow usage of `window.alert`
A `window.alert` statement should not be part of the code that is committed to GIT!
Instead, sap.m.MessageBox should be used. Please check the [UI5 API](https://sapui5.hana.ondemand.com/#/api/sap.m.MessageBox) reference for an example how to do it.
The following patterns are considered warnings:
```js
window.alert('hello world');
```
## sap-opa5-autowait-true
## autoWait must be true in extendConfig
This rule checks if **autoWait** has been set to **true** in **Opa5.extendConfig** method.
## Rule Details
This rule aims to avoid unstable OPA test code which does not follow the [recommendation](https://sapui5.hana.ondemand.com/#/api/sap.ui.test.Opa5%23methods/waitFor) to use the autoWait logic.
This rule aims to detect error in OPA test code. Checks if the autoWait param is set and the value is true. The rule throws error otherwise when the autoWait is not present or is set to false.
```js
autoWait: true
```
## sap-timeout-usage
## Discourage usage of setTimeout
This rule finds calls to the setTimeout method with a timeout greater than 0.
## Rule details
Executing logic with timeouts is often a workaround for faulty behavior and does not fix the root cause.
The timing that works for you may not work under different circumstances (other geographical locations with greater network latency, or other devices that have slower processors) or when the code is changed.
Use callbacks or events instead, if available. Please check the SAPUI5 guidelines for more details.
### warning message: Timeout with value > 0
The following patterns are considered warnings:
```js
window.setTimeout(jQuery.proxy(processChanges, this), 50);
```
## sap-usage-basemastercontroller
## Detect usage of BaseMasterController
The `BaseMasterController` is a deprecated controller and should be replaced by `sap.ca.scfld.md.controller.ScfldMasterController`.
## Rule Details
The rule detects the usage of the object `sap.ca.scfld.md.controller.BaseMasterController` and the usage of the string `sap/ca/scfld/md/controller/BaseMasterController`, like in define-methods.
The following patterns are considered warnings:
```js
sap.ca.scfld.md.controller.BaseMasterController.extend('myBaseController', {
config: 'myconfig',
});
define(['sap/ca/scfld/md/controller/BaseMasterController'], function (
Controller
) {
Controller.extend('myBaseController', {
config: 'myconfig',
});
});
```
## sap-ui5-global-eval
## Detect the usage of global eval via jQuery(.sap) (sap-ui5-global-eval)
## Rule Details
The rule detects
1. invocation of function "jQuery.sap.globalEval()" or "$.sap.globalEval()"
2. invocation of function "jQuery.globalEval()" or "$.globalEval()"
Warning message: _Usage of globalEval() / eval() is not allowed due to strict Content Security Policy._
The following patterns are considered warnings:
```
jQuery.globalEval( "var newVar = true;" );
```
```
jQuery.sap.globalEval( "var newVar = true;" );
```
```
$.globalEval( "var newVar = true;" );
```
```
$.sap.globalEval( "var newVar = true;" );
```
```
var a = jQuery.sap;
a.globalEval( "var newVar = true;" );
```
## Bug report
In case you detect a problem with this check, please open a Github issue [here](https://github.tools.sap/FIORI-PIPELINE/fioriPipelinesGo/issues).
## Further Reading
- [SAPUI5 Guidelines](https://ui5.sap.com/#/api/jQuery.sap%23methods/jQuery.sap.globalEval)
## sap-ui5-legacy-factories
## Detect the usage of legacy UI5 factories (sap-ui5-legacy-factories)
## Rule Details
The rule detects
1. Invocation of function "sap.ui.component()"
2. Invocation of function "sap.ui.component.load()"
3. Invocation of function "sap.ui.view()"
4. Invocation of function "sap.ui.xmlview()"
5. Invocation of function "sap.ui.jsview()"
6. Invocation of function "sap.ui.controller()"
7. Invocation of function "sap.ui.extensionpoint()"
8. Invocation of function "sap.ui.fragment()"
9. Invocation of function "sap.ui.getVersionInfo()"
10. Invocation of function "jQuery.sap.resources()" or "$.sap.resources()"
Warning message: _Make use of sap.ui.define([...], function(...) {...} to load required dependencies. Legacy UI5 factories leading to synchronous loading._
The following patterns are considered warnings:
```
var oView = sap.ui.jsview({
viewName: "my.View"
});
```
```
var oComponentInstance = sap.ui.component({
name: "my.comp"
});
```
```
sap.ui.component({
name: "my.comp"
});
```
```
var oComponentClass = sap.ui.component.load({
name: "my.comp"
});
```
```
var oComponentInstance = sap.ui.component("my-comp-id");
```
```
var oView = sap.ui.view({
viewName: "my.View",
type: "XML"
});
```
```
var oView = sap.ui.xmlview({
viewName: "my.View"
});
```
```
var oController = sap.ui.controller({
name: "my.Controller"
});
```
```
var aControls = sap.ui.extensionpoint({
name: "my.Point"
});
```
```
var aControls = sap.ui.fragment({
name: "my.fragment",
type: "XML"
});
```
```
var oVersionInfo = sap.ui.getVersionInfo();
```
```
jQuery.sap.resources({
url: "mybundle.properties"
});
```
```
$.sap.resources({
url: "mybundle.properties"
});
```
## Bug report
In case you detect a problem with this check, please open a Github issue [here](https://github.tools.sap/FIORI-PIPELINE/fioriPipelinesGo/issues).
## Further Reading
- [SAPUI5 Guidelines : Legacy Factories Replacement](https://ui5.sap.com/#/topic/491bd9c70b9f4c4d913c8c7b4a970833.html)
## sap-ui5-legacy-jquerysap-usage
## Detect the usage of legacy jQuery.sap (sap-ui5-legacy-jquerysap-usage)
## Rule Details
The rule detects
1. Invocation of function "jQuery.sap.require()" or "$.sap.require()"
2. Invocation of function "jQuery.sap.declare()" or "$.sap.declare()"
Warning message: _Legacy jQuery.sap usage is not allowed due to strict Content Security Policy._
The following patterns are considered warnings:
```
jQuery.sap.require( 'sap.m.Button' );
```
```
$.sap.require( 'sap.m.Button' );
```
```
jQuery.sap.declare( "myModule" , true);
```
```
$.sap.declare( "myModule" , true);
```
## Bug report
In case you detect a problem with this check, please open a Github issue [here](https://github.tools.sap/FIORI-PIPELINE/fioriPipelinesGo/issues).
## Further Reading
- [SAPUI5 Guidelines](https://ui5.sap.com/#/topic/a075ed88ef324261bca41813a6ac4a1c.html)
## sap-ui5-forms
## This rule checks for unsupported content in SimpleForm, Form or SmartForm.
## Rule details
Form Form, SimpleForm or SmartForm only controls implementing interface sap.ui.core.IFormContent are supported. Other controls, especially layouts, tables, views or complex controls are not supported. Using unsupported controls might bring visual issues, breaking the designed responsiveness, bringing issues with keyboard support or screen-reader support. Please use only labels and controls implementing interface sap.ui.core.IFormContent as content of a Form.
### warning message: Invalid content for SimpleForm / Form / SmartForm.
The following code snippet is fine:
```js
var oSF1 = new sap.ui.layout.form.SimpleForm("SF1", {
title: "Supported Content",
editable: true,
content: [
new sap.m.Label({text: "Label"}),
new sap.m.Input()
]
}).placeAt('content');
```
```js
var oF1 = new sap.ui.layout.form.Form("F1", {
title: "Supported Content",
editable: true,
layout: new sap.ui.layout.form.ResponsiveGridLayout(),
formContainers: [
new sap.ui.layout.form.FormContainer({
formElements: [
new sap.ui.layout.form.FormElement({
label: new sap.m.Label({text: "Label"}),
fields: [
new sap.m.Input()
]
})
]
})
]
}).placeAt('content');
```
```js
var oSF1 = new sap.ui.comp.smartform.SmartForm("SF1", {
title: "Supported Content",
editable: true,
layout: new sap.ui.comp.smartform.Layout(),
groups: [
new sap.ui.comp.smartform.Group({
groupElements: [
new sap.ui.comp.smartform.GroupElement({
label: new sap.m.Label({text: "Label"}),
elements: [
new sap.m.Input()
]
})
]
})
]
}).placeAt('content');
```
The following code snippets are unsupported and raise Warnings:
```js
var oSF2 = new sap.ui.layout.form.SimpleForm("SF2", {
title: "Unsupported VerticalLayout",
editable: true,
content: [
new sap.ui.layout.VerticalLayout({
content: [
new sap.m.Label({text: "Label"}),
new sap.m.Input()
]
})
]
}).placeAt('content');
```
```js
var oF2 = new sap.ui.layout.form.Form("F2", {
title: "Unsupported VerticalLayout",
editable: true,
layout: new sap.ui.layout.form.ResponsiveGridLayout(),
formContainers: [
new sap.ui.layout.form.FormContainer({
formElements: [
new sap.ui.layout.form.FormElement({
fields: [
new sap.ui.layout.VerticalLayout({
content: [
new sap.m.Label({text: "Label"}),
new sap.m.Input()
]
})
]
})
]
})
]
}).placeAt('content');
```
```js
var oSF2 = new sap.ui.comp.smartform.SmartForm("SF2", {
title: "Unsupported VerticalLayout",
editable: true,
layout: new sap.ui.comp.smartform.Layout(),
groups: [
new sap.ui.comp.smartform.Group({
groupElements: [
new sap.ui.comp.smartform.GroupElement({
elements: [
new sap.ui.layout.VerticalLayout({
content: [
new sap.m.Label({text: "Label"}),
new sap.m.Input()
]
})
]
})
]
})
]
}).placeAt('content');
```
## Bug report
In case you think the finding is a false positive please open a Github issue [here](https://github.tools.sap/FIORI-PIPELINE/fioriPipelinesGo/issues).