### Start UI5 Development Server
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-1-hello-world-typescript-c20489e.md
Starts the local web server to host the UI5 application and opens it in the browser.
```bash
npm start
```
--------------------------------
### Configure package.json Start Script
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-26-mock-server-configuration-bae9d90.md
Adjusts the 'start' script in package.json to open 'mockServer.html' instead of 'index.html'. This facilitates easier local development by defaulting to the mock server.
```json
{
"name": "ui5.walkthrough",
"version": "1.0.0",
"description": "The UI5 walkthrough application",
"scripts": {
"start": "ui5 serve -o test/mockServer.html"
},
"devDependencies": {
"@ui5/cli": "^3",
"ui5-middleware-simpleproxy": "^3"
}
}
```
--------------------------------
### Project dependencies example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/using-web-components-1c80793.md
Example of how UI5 Web Components packages appear in your project's package.json dependencies.
```json
"dependencies": {
...
"@ui5/webcomponents": "^2.9.0",
"@ui5/webcomponents-ai": "^2.9.0",
...
}
```
--------------------------------
### Start UIComponent for OPA5 Tests
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/getting-started-with-opa5-22f175e.md
Initiate OPA5 tests by starting a UIComponent. Provide the component configuration, including its name. This approach is faster and easier for debugging than using iframes.
```javascript
// "Opa5" required from "sap/ui/test/Opa5"
new Opa5().iStartMyUIComponent({
componentConfig: {
name: "samples.components.button"
}
});
```
--------------------------------
### Install UI5 CLI
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-1-hello-world-typescript-c20489e.md
Installs the UI5 Command Line Interface as a development dependency for the project.
```bash
npm install --save-dev @ui5/cli
```
--------------------------------
### Start OData V2 Mock Server
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/cookbook-for-testing-controls-with-qunit-0ddcc60.md
Configures and starts the OData V2 mock server. Ensure the mock server is set up and destroyed within your test.
```javascript
// "MockServer" required from module "sap/ui/core/util/MockServer"
function startMockServer(iRespondAfter) {
// configure respond to requests delay
MockServer.config({
autoRespond : true,
autoRespondAfter : iRespondAfter || 10
});
// create mockserver
const oMockServer = new MockServer({
rootUri : "http://sap.com/service/"
});
// start and return
oMockServer.simulate("data/metadata.xml", "data");
oMockServer.start();
return oMockServer;
}
//Your test:
QUnit.test("Should do something with the model", function (assert) {
//Arrange
const oMockServer = startMockServer(0);
// System under Test + Act
//Cleanup
oMockServer.stop();
});
```
--------------------------------
### Arrangement: Starting the Application
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/getting-started-with-opa5-22f175e.md
Defines the arrangement for an OPA5 test by starting the application in an iframe. Assumes the app is located at '../index.html' relative to the test file.
```javascript
// "Opa5" required from "sap/ui/test/Opa5"
var arrangements = new Opa5({
iStartMyApp : function () {
return this.iStartMyAppInAFrame("../index.html");
}
});
```
--------------------------------
### Absolute Binding Path Examples
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/binding-path-2888af4.md
These examples demonstrate absolute binding paths, which start with a slash and are resolved from the root of the model.
```plaintext
'/Products/0/ProductName'
```
```plaintext
'/Products(0)/ProductName'
```
```plaintext
'ProductName'
```
--------------------------------
### Example Rule ID Format
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/guidelines-and-best-practices-eaeea19.md
Rule IDs should follow CamelCase and start with small caps.
```text
hardcodedTextValues
```
--------------------------------
### HTML Setup for Instantiating Controller and XML View
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/example-js-fragments-used-in-xml-views-faaff35.md
Provides the HTML structure to bootstrap the SAPUI5 core, load necessary libraries (`sap.m`, `sap.ui.layout`), and set resource roots. It then uses `sap.ui.require` to load the controller and XML view, instantiates them, and places the view onto the page.
```html
JSFragment used in XmlView
```
--------------------------------
### Get FileSizeFormat Instance
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/file-size-format-24f340b.md
Instantiate FileSizeFormat using the static getter method. No specific setup is required for basic usage.
```javascript
var oFileSizeFormat = sap.ui.core.format.FileSizeFormat.getInstance();
```
--------------------------------
### Accessing Associations
Source: https://github.com/ui5/docs/blob/main/docs/07_Developing_Controls/writing-a-control-renderer-91f3939.md
Provides an example of accessing an association of a control, which links to another control. This snippet shows how to get the 'labelFor' association.
```javascript
var sAssociatedControlId = oControl.getLabelFor();
```
--------------------------------
### Using Core.ready() as a Promise
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/deprecated-core-api-798dd9a.md
Demonstrates how to use the Core.ready() function as a Promise for chaining asynchronous operations or awaiting the Core's ready state. This is the recommended alternative to attachInit.
```javascript
sap.ui.require(["sap/ui/core/Core"], async function(Core) {
Core.ready(() => {
// this callback is executed directly in case the Core is
// already in ready state, otherwise it is executed at a later point in time
});
// You can also use the ready() function as a Promise, e.g.
Core.ready().then(...)
// or await it
await Core.ready();
});
```
--------------------------------
### Get All Analysis History
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/support-assistant-api-a34eb58.md
Call this method to retrieve all recorded analysis history objects. No specific setup is required beyond having analysis data available.
```javascript
RuleAnalyzer.getAnalysisHistory()
```
--------------------------------
### Autostart Configuration
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/configuration-options-738ed02.md
Determines whether the test starter should automatically call `QUnit.start()` after all prerequisites are met. Prerequisites include loading QUnit, Sinon, the bridge, coverage tooling, and executing test modules.
```javascript
autostart: true
```
--------------------------------
### HTML Entry Point (index.html)
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-1-no-data-binding-4cde849.md
The main HTML file that bootstraps the UI5 core, configures the application, and defines the component to be loaded.
```html
Data Binding Tutorial
```
--------------------------------
### Correct Button Tag in XML
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/an-empty-page-comes-up-51fe8f4.md
Control tags in XML views must start with capital letters. This example shows the correct capitalization for a Button control.
```xml
```
--------------------------------
### Attach Navigate Event Handler
Source: https://github.com/ui5/docs/blob/main/docs/08_More_About_Controls/events-fired-centrally-by-the-app-or-the-navcontainer-6ec0a7e.md
Register a handler for the 'navigate' event to perform actions before the transition animation starts. This example shows how to determine the navigation direction and identify the target page.
```javascript
app.attachNavigate(function(evt) {
var isBack = !evt.getParameter("isTo"); // there are several types of back animation, but we want the general direction only
alert("Navigating " + (isBack ? "back " : "") + " to page " + evt.getParameter("toId"));
});
```
--------------------------------
### Component Initialization and Routing Setup
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-7-routing-7f65131.md
Initializes the UIComponent, sets up JSON models for data and layout, and configures the router with an event listener for route matching.
```javascript
sap.ui.define([
'sap/ui/core/UIComponent',
'sap/ui/model/json/JSONModel',
'sap/f/library'
], function(UIComponent, JSONModel, fioriLibrary) {
'use strict';
return UIComponent.extend('sap.ui.demo.fcl.Component', {
metadata: {
manifest: 'json'
},
init: function () {
var oModel,
oProductsModel,
oRouter;
UIComponent.prototype.init.apply(this, arguments);
oModel = new JSONModel();
this.setModel(oModel);
// set products demo model on this sample
oProductsModel = new JSONModel(sap.ui.require.toUrl('sap/ui/demo/mock/products.json'));
oProductsModel.setSizeLimit(1000);
this.setModel(oProductsModel, 'products');
oRouter = this.getRouter();
oRouter.attachBeforeRouteMatched(this._onBeforeRouteMatched, this);
oRouter.initialize();
},
_onBeforeRouteMatched: function(oEvent) {
var oModel = this.getModel(),
sLayout = oEvent.getParameters().arguments.layout;
// If there is no layout parameter, set a default layout (normally OneColumn)
if (!sLayout) {
sLayout = fioriLibrary.LayoutType.OneColumn;
}
oModel.setProperty("/layout", sLayout);
}
});
});
```
--------------------------------
### Define and Use SupportLib for Rules
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/create-a-ruleset-for-a-library-b5a5135.md
This example demonstrates how to define rules using constants and enumerations from SupportLib and return them along with library name and niceName.
```javascript
sap.ui.define(["sap/ui/support/library"],
function(SupportLib) {
"use strict";
var rule1 = {
...
audiences: [SupportLib.Audiences.Control]
categories: [SupportLib.Categories.Usability]
...
check: function(oIssueManager, ...) {
...
oIssueManager.addIssue({
severity: SupportLib.Severity.Medium,
...
});
}
};
var rule2 = {…};
return {
name: "sap.ui.core",
niceName: "UI5 Core Library",
ruleset: [
rule1,
rule2
]
};
}, true);
```
--------------------------------
### Disable Sinon-QuNIT Fake Timers in OPA5 Tests
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/pitfalls-and-troubleshooting-698f8c0.md
When OPA5 tests fail to start due to `sinon-qunit.js` overwriting `setTimeout` and `setInterval`, disable fake timers in the test setup. This ensures OPA5 can access the necessary browser functions.
```javascript
module("Opatests", {
beforeEach : function () {
sinon.config.useFakeTimers = false;
},
afterEach : function () {
sinon.config.useFakeTimers = true;
}
});
```
--------------------------------
### Array Difference Calculation Example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/extended-change-detection-7cdff73.md
Illustrates the old state, new state, and the calculated difference for an array using Extended Change Detection. The difference array contains 'index' and 'type' properties ('delete' or 'insert') to guide fine-grained updates.
```javascript
["one", "two", "three", "four", "five"]
```
```javascript
["one", "three", "four", "five", "six"]
```
```javascript
[{index: 1, type: "delete"}, {index: 4, type: "insert"}]
```
--------------------------------
### Initialize Router and Attach to Detail Route
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-31-routing-with-parameters-2366345.md
In `onInit`, the router is obtained and configured to attach to the 'detail' route, registering `onObjectMatched` as the callback for pattern matches. This sets up navigation to the detail view.
```javascript
sap.ui.define([
"sap/ui/core/mvc/Controller"
], (Controller) => {
"use strict";
return Controller.extend("ui5.walkthrough.controller.Detail", {
onInit() {
const oRouter = this.getOwnerComponent().getRouter();
oRouter.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
},
onObjectMatched(oEvent) {
this.getView().bindElement({
path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").invoicePath),
model: "invoice"
});
}
});
});
```
--------------------------------
### Project devDependencies example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/using-web-components-1c80793.md
Example of how ui5-tooling-modules appears in your project's package.json devDependencies.
```json
"devDependencies": {
...
"ui5-tooling-modules": "^3",
...
}
```
--------------------------------
### index.html for UI5 Bootstrap
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-1-ready-851bde4.md
Initializes OpenUI5 by loading the core library and setting up essential bootstrap parameters like libraries, compatibility, and resource roots.
```html
Quickstart Tutorial
```
--------------------------------
### JSON Data Example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/context-binding-element-binding-91f05e8.md
This is an example of the JSON data structure used for context binding.
```json
{
"company" : {
"name": "Acme Inc.",
"street": "23 Franklin St.",
"city": "Claremont",
"state": "New Hampshire",
"zip": "03301",
"revenue": "1833990"
}
}
```
--------------------------------
### Install TypeScript Development Dependency
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-2-bootstrap-typescript-32b14d8.md
Installs the TypeScript package as a development dependency for your project.
```bash
npm install typescript --save-dev
```
--------------------------------
### Core.ready() Promise for Initialization Check
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/initialization-process-91f2c90.md
Use the `Core.ready()` function to obtain a promise that resolves once the OpenUI5 framework has completed its initialization. This allows for executing application code reliably after all core components are ready.
```javascript
sap.ui.require(["sap/ui/core/Core"], function (Core) {
Core.ready().then( () => {
// application can be started
});
});
```
--------------------------------
### Initialize Mock Server
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-2-creating-a-mock-server-to-simulate-data-50897de.md
Initializes the mock server with metadata and mock data. Configure the delay with the URL parameter "serverDelay".
```javascript
sap.ui.define([
"sap/ui/core/util/MockServer",
"sap/base/Log"
], (MockServer, Log) => {
"use strict";
return {
/**
* Initializes the mock server.
* You can configure the delay with the URL parameter "serverDelay".
* The local mock data in this folder is returned instead of the real data for testing.
* @public
*/
init() {
// create
const oMockServer = new MockServer({rootUri: "/"});
// simulate against the metadata and mock data
oMockServer.simulate("../localService/metadata.xml", {
sMockdataBaseUrl: "../localService/mockdata",
bGenerateMissingMockData: true
});
// start
oMockServer.start();
Log.info("Running the app with mock data");
}
};
});
```
--------------------------------
### Event Start Time Annotation
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/odata-v2-model-6c47b2b.md
Maps the 'dtstart' semantic to a property for event start time.
```json
"com.sap.vocabularies.Communication.v1.Event" : { "dtstart" : { "Path" : "PROPERTY" } }
```
--------------------------------
### Declarative Support Example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/declarative-support-deprecated-91f1301.md
Demonstrates how to use declarative support to define a sap.m.Input and a sap.m.Button. The button triggers an alert displaying the input's value.
```html
Declarative Programming for SAPUI5 - sample01
```
--------------------------------
### Get Static Area Reference with StaticArea.getDomRef()
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/deprecated-core-api-798dd9a.md
Replaces sap.ui.core.Core.getStaticAreaRef(). Use StaticArea.getDomRef() to get the static area DOM reference or StaticArea.getUIArea() to get the static UIArea directly. StaticArea.contains() can check if a DOM element belongs to the static area.
```javascript
sap.ui.require([
"sap/ui/core/StaticArea"
], (StaticArea) => {
// Direct replacement
const oStaticArea = StaticArea.getDomRef();
// Retrieving the static UIArea directly
oStaticUIArea = StaticArea.getUIArea();
// Check whether the given DOM element is part of the static area
const bContainedInArea = StaticArea.contains(myControl.getDomRef())
});
```
--------------------------------
### neo-app.json Configuration Example
Source: https://github.com/ui5/docs/blob/main/docs/05_Developing_Apps/create-a-neo-app-json-project-configuration-file-28fa753.md
This JSON configuration file defines routes for accessing SAPUI5 resources and test resources. It also specifies the welcome file for the application.
```json
{
"welcomeFile": "index.html",
"routes": [
{
"path": "/resources",
"target": {
"type": "service",
"name": "sapui5",
"version": "snapshot",
"entryPath": "/resources"
},
"description": "SAPUI5 Resources"
},
{
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
}
]
}
```
--------------------------------
### InputListItem with Input Example
Source: https://github.com/ui5/docs/blob/main/docs/08_More_About_Controls/lists-1da1581.md
Use InputListItem to associate a label with input fields. This example shows a price input.
```XML
```
--------------------------------
### Configure Bootstrap in index.html
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-3-go-073d107.md
Sets up the OpenUI5 bootstrap in index.html, including necessary libraries and asynchronous loading. Ensure the resource roots are correctly defined for your application structure.
```html
Quickstart Tutorial
```
--------------------------------
### index.html for Hello World
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-1-hello-world-2680aa9.md
Basic HTML file to display "Hello World". It includes essential HTML structure and a div element for content.
```html
UI5 Walkthrough
Hello World
```
--------------------------------
### Generated Error Message Example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/using-opabuilder-952e2c7.md
An example of an automatically generated error message by `OpaBuilder` when no explicit message is provided.
```javascript
sap.m.Button#myButton with 1 additional matcher(s) not found
```
--------------------------------
### Full Component Metadata Example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/component-metadata-0187ea5.md
An example demonstrating various metadata properties for a UI5 component, including manifest, abstract, library, version, and properties. Note that 'version' is for design-time and 'properties' are defined similarly to controls.
```js
// "Component" required from module "sap/ui/core/Component"
Component.extend("some.sample.Component", {
"metadata": {
"manifest": "json", // Specifies that your Component class uses the descriptor via the manifest.json file
"abstract": true, // Specifies if your Component class is an abstract one that serves as a base for your other components
"library": "sap.ui.core", // Specifies the library the component belongs to
"version": "1.0", // Version of your Component
"properties": {
"config": "any"
}
}
});
```
--------------------------------
### Allowlist Service Request Example
Source: https://github.com/ui5/docs/blob/main/docs/05_Developing_Apps/allowlist-service-d04a6d4.md
This is an example of how to call the allowlist service. The parent origin is passed as a URL-encoded URI parameter.
```http
GET url/to/allowlist/service?parentOrigin=https://parent.domain.com
```
--------------------------------
### Configuring Core Initialization with on-init Module
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/deprecated-core-api-798dd9a.md
Shows how to use the data-sap-ui-on-init attribute in the bootstrap script to automatically execute an initialization module once the Core is ready. This is an alternative to programmatically chaining to the Core's ready state.
```html
```
--------------------------------
### Widget Role Example (Composite)
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/screen-reader-support-for-openui5-controls-656e825.md
Composite widget roles act as containers for other widgets. This example demonstrates the 'tablist' role.
```html
i.e. role="tablist"
```
--------------------------------
### Landmark Role Example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/screen-reader-support-for-openui5-controls-656e825.md
Landmark roles aid navigation by identifying content sections. This example uses the 'search' role.
```html
role="search"
```
--------------------------------
### Initialize and Configure Mock Server
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-4-calling-a-function-import-95e5b87.md
Initializes the mock server, simulates metadata and mock data, and configures request handlers. The delay can be set using the 'serverDelay' URL parameter.
```javascript
sap.ui.define([
"sap/ui/thirdparty/jquery",
"sap/ui/core/date/UI5Date",
"sap/ui/core/util/MockServer",
"sap/base/Log"
], (jQuery, UI5Date, MockServer, Log) => {
"use strict";
return {
/**
* Initializes the mock server.
* You can configure the delay with the URL parameter "serverDelay".
* The local mock data in this folder is returned instead of the real data for testing.
* @public
*/
init() {
// create
const oMockServer = new MockServer({rootUri: "/"});
oMockServer.simulate("../localService/metadata.xml", {
sMockdataBaseUrl: "../localService/mockdata",
bGenerateMissingMockData: true
});
// handling mocking a function import call step
const aRequests = oMockServer.getRequests();
aRequests.push({
method: "GET",
path: new RegExp("FindUpcomingMeetups(.*)"),
response: (oXhr) => {
Log.debug("Incoming request for FindUpcomingMeetups");
const oToday = UI5Date.getInstance();
oToday.setHours(0); // or oToday.toUTCString(0) due to timezone differences
oToday.setMinutes(0);
oToday.setSeconds(0);
// the mock server only works with sap.jQuery.ajax and async: false. But the request does not
// actually go to a server, so this does not block the main thread.
jQuery.ajax({
url: `/Meetups?$filter=EventDate ge datetime'${oToday.toISOString()}'`,
dataType : 'json',
async: false,
success : (oData) => {
oXhr.respondJSON(200, {}, JSON.stringify(oData));
}
});
return true;
}
});
oMockServer.setRequests(aRequests);
// handling custom URL parameter step
const fnCustom = (oEvent) => {
const oXhr = oEvent.getParameter("oXhr");
if (oXhr?.url.includes("first")) {
oEvent.getParameter("oFilteredData").results.splice(3, 100);
}
};
oMockServer.attachAfter("GET", fnCustom, "Meetups");
// start
oMockServer.start();
Log.info("Running the app with mock data");
}
};
});
```
--------------------------------
### Component Usage Configuration
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/migration-information-for-upgrading-the-manifest-file-a110f76.md
Example of defining component usages in the manifest.json file.
```json
{
...
"componentUsages": {
"myusage": {
"name": "my.used",
"settings": {},
"componentData": {}
}
},
...
}
```
--------------------------------
### Resource Bundle Content Example
Source: https://github.com/ui5/docs/blob/main/docs/04_Essentials/resource-model-91f122a.md
Example content of a resource bundle file, demonstrating key-value pairs for language-dependent texts.
```properties
CLOSE_BUTTON_TEXT=Close
OPEN_BUTTON_TEXT=Open
CANCEL_BUTTON_TEXT=Cancel
```
--------------------------------
### CustomListItem Example
Source: https://github.com/ui5/docs/blob/main/docs/08_More_About_Controls/lists-1da1581.md
Use CustomListItem to create your own layout when standard list items do not meet your needs. This example includes a Label and a Button.
```XML
```
--------------------------------
### Instantiate and Use the Custom Control
Source: https://github.com/ui5/docs/blob/main/docs/07_Developing_Controls/creating-a-simple-control-91f02ec.md
Shows how to create an instance of the custom 'my.Hello' control with a 'name' property set to 'UI5' and then place it into the HTML element with the ID 'content'.
```js
new my.Hello({name:"UI5"}).placeAt("content");
```
--------------------------------
### InputListItem with Switch Example
Source: https://github.com/ui5/docs/blob/main/docs/08_More_About_Controls/lists-1da1581.md
Use InputListItem to associate a label with interactive controls like a Switch. This example shows a WLAN setting.
```XML
```
--------------------------------
### Create Overview View XML
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-30-routing-and-navigation-typescript-6173e3d.md
Creates the `Overview.view.xml` file, reusing the App controller and including the HelloPanel and InvoiceList views.
```xml
```
--------------------------------
### Initialize UI5 Tooling
Source: https://github.com/ui5/docs/blob/main/docs/03_Get-Started/step-1-hello-world-typescript-c20489e.md
Generates the ui5.yaml configuration file, essential for using UI5 Tooling with the project.
```bash
ui5 init
```