### Install Dependencies and Start Development Server with UI5 CLI
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/get-started-setup-tutorials-and-demo-apps-8b49fc1.md
Use these commands to install project dependencies and start the development server after downloading tutorial code. Ensure you are in the app root folder.
```bash
npm install
```
```bash
npm start
```
--------------------------------
### Example Module for beforeFlpStart
Source: https://github.com/sap-docs/sapui5/blob/main/docs/05_Developing_Apps/how-to-configure-the-launchpad-sandbox-e6151c1.md
An example module that exports an `execute` function to start a mock server. This module is intended to be used with the `beforeFlpStart` configuration.
```javascript
// myapp/test/mockServer.js
sap.ui.define([
"sap/ui/core/util/MockServer"
], (
MockServer
) => {
return {
execute: async () => {
const oMockServer = new MockServer({"rootUri": "/sap/opu/odata/sap/MY_SERVICE/"});
oMockServer.simulate("localService/metadata.xml", {"sMockdataBaseUrl": "localService/mockdata"});
oMockServer.start();
console.log("Mock server started");
}
};
});
```
--------------------------------
### Setup Mock Server in QUnit
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/odata-v2-mock-server-frequently-asked-questions-c9a91dd.md
Configure and start the Mock Server within the `beforeEach` function of a QUnit module. Ensure the Mock Server is stopped in the `afterEach` function.
```js
sap.ui.define(["sap/ui/core/util/MockServer"], function(MockServer) {
…
QUnit.module("OData data provider", {
beforeEach() {
this._oMockServer = new MockServer({ rootUri: "/model/"});
this._oMockServer.simulate("../../../../qunit/service/metadata.xml");
this._oMockServer.start();
},
afterEach() {
this._oMockServer.stop();
}
});
…
});
```
--------------------------------
### Start UI5 Development Server
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-1-hello-world-typescript-c20489e.md
Executes the start script defined in `package.json` to launch the UI5 development server and open the application in the browser.
```bash
npm start
```
--------------------------------
### Complete Launchpad Sandbox Configuration Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/05_Developing_Apps/how-to-configure-the-launchpad-sandbox-e6151c1.md
A comprehensive example demonstrating the full configuration options for the launchpad sandbox, including tiles, root intent, app state mode, RTA configuration, beforeFlpStart, and plugins.
```json
{
"tiles": [
{
"semanticObject": "SalesOrder",
"action": "display",
"rootPath": "../",
"parameters": {
"mode": "view"
}
},
{
"semanticObject": "SalesOrder",
"action": "create",
"rootPath": "../"
},
{
"semanticObject": "Customer",
"action": "manage",
"rootPath": "../../customer-app/"
}
],
"rootIntent": "SalesOrder-display",
"appStateMode": true,
"rta": "localService/fakeLrep.json",
"beforeFlpStart": "module:myapp/test/initMockServer",
"plugins": {
"CustomPlugin": {
"component": "custom.plugins.customPlugin"
}
}
}
```
--------------------------------
### Freestyle Card Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/10_More_About_Controls/cards-5b46b03.md
This example demonstrates how to use the `sap.f.Card` control to display project information. It includes a header and a list of product items with revenue and status details.
```xml
```
--------------------------------
### Install UI5 CLI
Source: https://github.com/sap-docs/sapui5/blob/main/docs/05_Developing_Apps/development-environment-7bb04e0.md
Install the UI5 CLI globally using npm. Ensure you have Node.js LTS installed first.
```bash
npm i -g @ui5/cli
```
--------------------------------
### Manifest Descriptor Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/manifest-descriptor-for-applications-components-and-libraries-be0cf40.md
A comprehensive example of a manifest.json file, showcasing various configuration options for an SAPUI5 application.
```json
{
"enhanceWith": [
{
"bundleUrl": "i18n/i18n.properties",
"bundleUrlRelativeTo": "manifest"
}
]
}
},
"equipment": {
"preload": true,
"dataSource": "equipment",
"settings": {}
}
},
"rootView": {
"viewName": "sap.ui.test.view.Main",
"id" : "rootView",
"async": true,
"type": "XML"
},
"handleValidation": true,
"config": {
},
"routing": {
},
"extends": {
"component": "sap.fiori.otherApp",
"minVersion": "0.8.15",
"extensions": {}
},
"contentDensities": {
"compact": true,
"cozy": false
},
"resourceRoots": {
".myname": "./myname"
},
"componentName": "sap.fiori.appName",
"autoPrefixId": true,
"appVariantId": "hcm.leaverequest.oil",
"appVariantIdHierarchy": [
{"layer": "VENDOR", "appVariantId": "abc", "version": "1.0.0"}
],
"services": {
"myLocalServiceAlias": {
"factoryName": "sap.ushell.LaunchPadService",
"optional": true
}
},
"library": {
"i18n": true
},
"flexEnabled": true,
"flexExtensionPointEnabled": true,
"commands": {
"Save": {
"shortcut": "Ctrl+S"
}
}
},
"sap.platform.abap": {
"uri": "/sap/bc/ui5_ui5/sap/appName",
"uriNwbc": ""
},
"sap.platform.hcp": {
"uri": "",
"uriNwbc": "",
"providerAccount": "fiori",
"appName": "sapfioriappName",
"appVersion": "1.0.0",
"multiVersionApp": true
},
"sap.fiori": {
"registrationIds": [
"F1234"
],
"archeType": "transactional",
"abstract": false
},
"sap.mobile": {},
"sap.flp": {},
"sap.ui.generic.app": {},
"sap.ovp": {},
"sap.ui.smartbusiness.app": {},
"sap.wda": {},
"sap.gui": {},
"sap.cloud.portal": {},
"sap.apf": {},
"sap.platform.cf": {},
"sap.copilot": {},
"sap.map": {},
"sap.url": {},
"sap.platform.sfsf": {},
"sap.wcf": {},
"sap.cloud": {},
"sap.integration": {},
"sap.platform.mobilecards": {},
"sap.artifact": {},
"sap.package": {},
"sap.insights": {},
"sap.bpa.task": {},
"sap.cards.ap": {},
"sap.fe": {},
"sap.card": {}
}
```
--------------------------------
### Initialize and Start OData V2 Mock Server
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/using-mock-data-with-the-odata-v2-mock-server-a428d41.md
This code initializes the MockServer with the service root URI and simulates the service using a metadata file. It starts the server only if the application is configured to run in mock mode.
```javascript
sap.ui.define([
"model/Config",
"sap/ui/app/Application",
"sap/ui/core/util/MockServer"], function(ModelConfig, BaseApplication, MockServer) {
return BaseApplication.extend("Application", {
init : function () {
...
// start mock server
if (ModelConfig.isMock) {
const oMockServer = new MockServer({
rootUri: ModelConfig.getServiceUrl();
});
oMockServer.simulate("model/metadata.xml", "model/");
oMockServer.start();
}
}
}
});
```
--------------------------------
### Start Development Server
Source: https://github.com/sap-docs/sapui5/blob/main/docs/05_Developing_Apps/getting-started-with-the-launchpad-sandbox-022e31c.md
Use the UI5 tooling to serve your application locally. The sandbox can then be accessed via a specific URL.
```bash
# Using UI5 tooling
ui5 serve
# Open in browser
# http://localhost:8080/test/sandbox.html
```
--------------------------------
### OData V4 GET Requests for List and Detail Data
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/data-reuse-648e360.md
Example of the generated GET requests for the list and detail views, demonstrating the use of $select and $expand.
```http
GET SalesOrderList?$select=Currency,GrossAmount,SalesOrderID&$expand=SO_2_BP($select=BusinessPartnerID,CompanyName)&$skip=0&$top=100
```
```http
GET SalesOrderList('0500000001')?$select=NetAmount,Note
```
--------------------------------
### Get FileSizeFormat Instance
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/file-size-format-24f340b.md
Instantiate the FileSizeFormat class using its getter method. No specific setup is required before calling this.
```javascript
var oFileSizeFormat = sap.ui.core.format.FileSizeFormat.getInstance();
```
--------------------------------
### Start Node.js Proxy Server
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/request-fails-due-to-same-origin-policy-cross-origin-resource-sharing-cors-672301f.md
This script starts a local proxy server on a specified host and port. It's used to prevent same-origin policy errors by routing requests through the proxy. Ensure Node.js is installed to run this script.
```javascript
var cors_proxy = require('myProxy');
// Listen on a specific IP Address
var host = 'localhost';
// Listen on a specific port, adjust if necessary
var port = 8081;
cors_proxy.createServer({
// Set parameters for:
// allowed origins,
// required headers ['origin', 'x-requested-with'],
// headers to be removed ['cookie', 'cookie2']
}).listen(port, host, function() {
console.log('Running myProxy on ' + host + ':' + port);
});
```
--------------------------------
### XML Fragment Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/05_Developing_Apps/id-handling-in-sapui5-the-complete-guide-f51dbb7.md
Defines an HBox with two buttons in an XML fragment. The first button gets a generated ID, while the second has a static ID that can be prefixed.
```xml
```
--------------------------------
### Configure package.json for Mock Server
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-26-mock-server-configuration-bae9d90.md
Adjusts the start script to launch the application using the mock server HTML file.
```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"
}
}
```
--------------------------------
### 2-Column Layout Configuration for SAP Fiori Elements
Source: https://github.com/sap-docs/sapui5/blob/main/docs/06_SAP_Fiori_Elements/enabling-the-flexible-column-layout-e762257.md
Configure a 2-column flexible layout starting with an object page. This setup allows for navigation between list reports and object pages.
```json
"routes": [
{
"pattern": ":?query:",
"name": "SalesOrderManageList",
"target": ["SalesOrderManageList"]
},
{
"pattern": "SalesOrderManage({key}):?query:",
"name": "SalesOrderManageObjectPage",
"target": ["SalesOrderManageObjectPage"]
},
{
"pattern": "SalesOrderManage({key})/_Item({key2}):?query:",
"name": "SalesOrderItemObjectPage",
"target": ["SalesOrderManageObjectPage", "SalesOrderItemObjectPage"]
},
{
"pattern": "SalesOrderManage({key})/_Item({key2})/_MaterialDetails({key3}):?query:",
"name": "MaterialDetailsObjectPage",
"target": ["MaterialDetailsObjectPage"]
},
…
],
"targets": {
"SalesOrderManageList": {
"type": "Component",
"id": "SalesOrderManageList",
"name": "sap.fe.templates.ListReport",
"controlAggregation": "beginColumnPages",
```
--------------------------------
### Configure beforeFlpStart Module
Source: https://github.com/sap-docs/sapui5/blob/main/docs/05_Developing_Apps/how-to-configure-the-launchpad-sandbox-e6151c1.md
Specifies a module to execute before the launchpad starts. The module must export an `execute` function and can optionally return a Promise.
```json
{
"beforeFlpStart": "module:myapp/test/mockServer"
}
```
--------------------------------
### Register OPA5 Steps
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/basic-example-how-to-use-gherkin-4b0c519.md
Define steps for starting the app and verifying UI elements. Use `Opa5.waitFor` to find controls and assert their properties.
```javascript
var oOpa5 = new Opa5();
this.register(/^I have started the app$/i, function() {
oOpa5.iStartMyAppInAFrame("Website.html");
});
this.register(/^I can see the life saving button$/i, function() {
oOpa5.waitFor({
id: "life-saving-button",
success: function(oButton) {
Opa5.assert.strictEqual(oButton.getText(), "Save a Lemming",
"Verified that we can see the life saving button");
}
});
});
```
--------------------------------
### 3-Column Layout Configuration for SAP Fiori Elements
Source: https://github.com/sap-docs/sapui5/blob/main/docs/06_SAP_Fiori_Elements/enabling-the-flexible-column-layout-e762257.md
Configure a 3-column flexible layout starting with a list report page. This setup supports navigation through multiple object pages and details.
```json
"routes": [
{
"pattern": ":?query:",
"name": "SalesOrderManageList",
"target": ["SalesOrderManageList"]
},
{
"pattern": "SalesOrderManage({key}):?query:",
"name": "SalesOrderManageObjectPage",
"target": ["SalesOrderManageList", "SalesOrderManageObjectPage"]
},
{
"pattern": "SalesOrderManage({key})/_Item({key2}):?query:",
"name": "SalesOrderItemObjectPage",
"target": ["SalesOrderManageList", "SalesOrderManageObjectPage", "SalesOrderItemObjectPage"]
},
{
"pattern": "SalesOrderManage({key})/_Item({key2})/_MaterialDetails({key3}):?query:",
"name": "MaterialDetailsObjectPage",
"target": ["MaterialDetailsObjectPage"]
},
{
"pattern": "SalesOrderManage({key})/_Item({key2})/_MaterialDetails({key3})/_MaterialRatings({key4}):?query:",
"name": "MaterialRatingsObjectPage",
"target": ["MaterialRatingsObjectPage"]
},
{
"pattern": "SalesOrderManage({key})/_Item({key2})/_MaterialDetails({key3})/_MaterialRatings({key4})/_MaterialRatingsDetails({key5}):?query:",
"name": "MaterialRatingsDetailsObjectPage",
"target": ["MaterialRatingsDetailsObjectPage"]
}
],
"targets": {
"SalesOrderManageList": {
"type": "Component",
"id": "SalesOrderManageList",
"name": "sap.fe.templates.ListReport",
"controlAggregation": "beginColumnPages",
"contextPattern": "",
"options": {
...
}
},
"SalesOrderManageObjectPage": {
"type": "Component",
"id": "SalesOrderManageObjectPage",
"name": "sap.fe.templates.ObjectPage",
"controlAggregation": "midColumnPages",
"contextPattern": "/SalesOrderManage({key})",
"options": {
...
}
},
"SalesOrderItemObjectPage": {
"type": "Component",
"id": "SalesOrderItemObjectPage",
"name": "sap.fe.templates.ObjectPage",
"controlAggregation": "endColumnPages",
"contextPattern": "/SalesOrderManage({key})/_Item({key2})",
"options": {
...
}
},
"MaterialDetailsObjectPage": {
"type": "Component",
"id": "MaterialDetailsObjectPage",
"name": "sap.fe.templates.ObjectPage",
"controlAggregation": "endColumnPages",
"contextPattern": "/SalesOrderManage({key})/_Item({key2})/_MaterialDetails({key3})",
"options": {
...
}
},
...
}
```
--------------------------------
### Supported Library Initialization
Source: https://github.com/sap-docs/sapui5/blob/main/docs/02_Read-Me-First/ecmascript-support-0cb44d7.md
Initialize libraries using the `sap/ui/core/Lib.init` method with a static configuration object. This is the best practice for library setup.
```javascript
// Best practice to initialize a library in the library.js file
sap.ui.define([
"sap/ui/core/Lib"
], (Library) => {
"use strict";
const thisLib = Library.init(({
apiVersion: 2,
name: "my.lib",
version: "${version}",
designtime: "my/lib/designtime/library.designtime",
types: [
"my.lib.MyType"
],
interfaces: [
"my.lib.MyInterface"
],
controls: [
"my.lib.MyType"
],
elements: [
"my.lib.MyElement"
],
extensions: {}
}));
});
```
--------------------------------
### Define App Tile with Startup Parameters
Source: https://github.com/sap-docs/sapui5/blob/main/docs/05_Developing_Apps/how-to-configure-the-launchpad-sandbox-e6151c1.md
Configures an application tile with specific startup parameters. These parameters are passed to the application when it launches.
```json
{
"tiles": [{
"semanticObject": "Invoice",
"action": "display",
"parameters": {
"company": "1000",
"fiscalYear": "2024"
}
}]
}
```
--------------------------------
### Configure ui5.yaml for Simple Proxy
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-25-remote-odata-service-typescript-b68d321.md
Configure the ui5.yaml file to use the ui5-middleware-simpleproxy. This setup routes requests starting with '/V2' to the specified base URI, enabling access to the Northwind OData service.
```yaml
specVersion: '3.0'
metadata:
name: "ui5.walkthrough"
type: application
framework:
name: OpenUI5
version: "1.120.1"
libraries:
- name: sap.m
- name: sap.ui.core
- name: themelib_sap_horizon
builder:
customTasks:
- name: ui5-tooling-transpile-task
afterTask: replaceVersion
server:
customMiddleware:
- name: ui5-tooling-transpile-middleware
afterMiddleware: compression
- name: ui5-middleware-serveframework
afterMiddleware: compression
- name: ui5-middleware-simpleproxy
afterMiddleware: compression
mountPath: /V2
configuration:
baseUri: "https://services.odata.org"
- name: ui5-middleware-livereload
afterMiddleware: compression
```
--------------------------------
### Configure mockServer.html for test mode
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-2-creating-a-mock-server-to-simulate-data-50897de.md
This HTML file serves as the entry point for local testing, bootstrapping the application and pointing the initialization module to the mock server setup.
```html
Mock Server Tutorial
```
--------------------------------
### Disable Sinon.js Fake Timers in OPA5 Tests
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/pitfalls-and-troubleshooting-698f8c0.md
If OPA tests fail to start and lack logging, it might be due to Sinon.js overwriting `setTimeout` and `setInterval`. Disable fake timers in the test setup to resolve this. Ensure to re-enable them after the test.
```javascript
module("Opatests", {
beforeEach : function () {
sinon.config.useFakeTimers = false;
},
afterEach : function () {
sinon.config.useFakeTimers = true;
}
});
```
--------------------------------
### OPA TypeScript Integration Test
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-28-integration-test-with-opa-typescript-412f0b6.md
Defines an integration test using OPA and TypeScript. It sets up a QUnit module, starts the UI component, performs actions, asserts expected behavior, and tears down the application. This example demonstrates a typical BDD-style test for navigating to and interacting with a dialog.
```typescript
import opaTest from "sap/ui/test/opaQunit";
import HelloPanelPage from "./pages/HelloPanelPage";
const onTheHelloPanelPage = new HelloPanelPage();
QUnit.module("Navigation");
opaTest("Should open the Hello dialog", function () {
// Arrangements
onTheHelloPanelPage.iStartMyUIComponent({
componentConfig: {
name: "ui5.walkthrough"
}
});
// Actions
onTheHelloPanelPage.iPressTheSayHelloWithDialogButton();
// Assertions
onTheHelloPanelPage.iShouldSeeTheHelloDialog();
// Cleanup
onTheHelloPanelPage.iTeardownMyApp();
});
```
--------------------------------
### Overview Page Manifest Configuration Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/06_SAP_Fiori_Elements/configuring-the-manifest-for-the-overview-page-8431b54.md
Illustrates manifest settings for selection annotations, disabling header navigation, and enabling text wrapping in Overview Page cards.
```json
"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_Currency_ColumnStacked",
"navigation": "noHeaderNav", //Allows you to disable navigation from the analytical list card header area.
"enableTextWrapping": true //The default value is false
}
}
}
}
```
--------------------------------
### Enable Interaction Steps Recording
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/diagnostics-6ec18e8.md
Add this query string parameter to your application URL to measure the initial loading of the app.
```url
sap-ui-fesr=true
```
--------------------------------
### View Switch Sample Configuration
Source: https://github.com/sap-docs/sapui5/blob/main/docs/06_SAP_Fiori_Elements/configuring-view-switch-9e1d1fc.md
A comprehensive sample demonstrating the configuration of a view switch with multiple tabs, each potentially linked to different entity sets and annotations.
```json
"card009": {
"model": "salesOrder",
"template": "sap.ovp.cards.list",
"settings": {
"title": "Contract Monitoring",
"subTitle": "Per Supplier",
"valueSelectionInfo": "Total contract volume",
"listFlavor": "bar",
"listType": "extended",
"showLineItemDetail":true,
"tabs": [
{
"entitySet": "SalesOrderSet",
"dynamicSubtitleAnnotationPath": "com.sap.vocabularies.UI.v1.HeaderInfo#dynamicSubtitle",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#View1",
"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#line1",
"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#line",
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#line",
"value": "{{dropdown_value2}}"
},
{
"entitySet": "SalesOrderSet",
"dynamicSubtitleAnnotationPath": "com.sap.vocabularies.UI.v1.HeaderInfo#dynamicSubtitle",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#View3",
"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#SP3",
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#line",
"value": "{{dropdown_value3}}"
},
{
"entitySet": "ProductSet",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#identify1",
"value": "{{dropdown_value1}}"
}
]
}
}
```
--------------------------------
### Start Measurement with Category
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/performance-measurement-using-sap-ui-performance-measurement-module-78880c0.md
Start a performance measurement and assign it to a specific category. Ensure the category is passed as an array to the `start` function.
```javascript
// "Measurement" required from module "sap/ui/performance/Measurement"
Measurement.start("myId","Measurement of myId", ["foo"]);
```
--------------------------------
### Install ts-interface-generator
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-33-custom-controls-typescript-3cc020e.md
Install the ts-interface-generator package as a development dependency in your project.
```bash
npm install @ui5/ts-interface-generator --save-dev
```
--------------------------------
### Initialize and Configure Mock Server
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-3-handling-custom-url-parameters-46c1ca4.md
Initializes the mock server, simulates OData V2 metadata and mock data, and starts the server. The delay can be configured via the 'serverDelay' URL parameter.
```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: "/"});
oMockServer.simulate("../localService/metadata.xml", {
sMockdataBaseUrl: "../localService/mockdata",
bGenerateMissingMockData: true
});
// 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");
}
};
});
```
--------------------------------
### SAPUI5 Annotation for Start Date
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/odata-v2-model-6c47b2b.md
Use this annotation to specify the start date for an event.
```xml
sap:semantics = "dtstart"
```
```json
"com.sap.vocabularies.Communication.v1.Event" : { "dtstart" : { "Path" : "PROPERTY" } }
```
--------------------------------
### JSON Data Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/context-binding-element-binding-91f05e8.md
This is an example of the JSON data structure that can be used with context binding.
```json
{
"company" : {
"name": "Acme Inc.",
"street": "23 Franklin St.",
"city": "Claremont",
"state": "New Hampshire",
"zip": "03301",
"revenue": "1833990"
}
}
```
--------------------------------
### Initialize Detail Controller
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-35-device-adaptation-d63a15e.md
Sets up the Detail controller with a view model for currency formatting and router pattern matching.
```javascript
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History",
"sap/m/MessageToast",
"sap/ui/model/json/JSONModel"
], (Controller, History, MessageToast, JSONModel) => {
"use strict";
return Controller.extend("ui5.walkthrough.controller.Detail", {
onInit() {
const oViewModel = new JSONModel({
currency: "EUR"
});
this.getView().setModel(oViewModel, "view");
const oRouter = this.getOwnerComponent().getRouter();
oRouter.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
},
…
});
});
```
--------------------------------
### Install UI5 CLI
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-1-hello-world-typescript-c20489e.md
Installs the UI5 CLI as a development dependency for the project using npm.
```bash
npm install --save-dev @ui5/cli
```
--------------------------------
### Advanced Manual Initialization
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/component-instantiation-guide-346599f.md
Perform pre-initialization tasks before manually loading ComponentSupport for scenarios requiring custom startup logic.
```html
```
```js
// my/app/startupEfforts.js
sap.ui.define(["my/app/MyModule"], (MyModule) => {
"use strict";
// Execute prerequisite code, e.g. loading additional application data, connecting to back-end services, etc.
MyModule.init().then(() =>
sap.ui.require(["sap/ui/core/ComponentSupport"])
);
});
```
--------------------------------
### Using data-sap-ui-on-init for Automatic Initialization
Source: https://github.com/sap-docs/sapui5/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
```
--------------------------------
### Define Ranges Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/07_APF/outbound-navigation-and-inbound-navigation-a2e3ed7.md
Example demonstrating how to express equality and range-based filtering using the Ranges array.
```json
"Ranges": [
{
"Sign": "I",
"Option": "EQ",
"Low": "0001",
"High": null
},
{
"Sign": "I",
"Option": "BT",
"Low": "0003",
"High": "0005"
}
]
```
--------------------------------
### Test Starter Autostart Option
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/configuration-options-738ed02.md
Controls whether the test starter automatically calls QUnit.start() after all prerequisites are met, including loading modules and booting the Core.
```javascript
autostart: true
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-1-overview-and-testing-strategy-ab134ef.md
Execute this command in the root of your extracted project folder to install all necessary Node.js dependencies.
```bash
npm install
```
--------------------------------
### InputListItem with Switch Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/10_More_About_Controls/lists-1da1581.md
Use InputListItem to associate a label with an input control. This example shows a Switch control.
```js
```
--------------------------------
### Example APF Filter for Exchange Rate Type
Source: https://github.com/sap-docs/sapui5/blob/main/docs/07_APF/consuming-apf-0109e67.md
An example of creating a filter expression for the 'P_ExchangeRateType' with the value 'USD'.
```javascript
orExpression.addExpression({
name : "P_ExchangeRateType",
operator : "EQ",
value : "USD",
});
```
--------------------------------
### Product Data Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/03_Get-Started/step-5-smart-filter-bar-and-smart-table-1daa462.md
An example entry from the Products.json file, illustrating product details including ID, name, category, price, and dimensions. This structure is used for data binding with Smart Table and Smart Filter Bar.
```js
[
{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g",
"Price": 856.49,
"CurrencyCode": "INR",
"Status": "Available",
"Quantity": 3,
"UoM": "PC",
"Width": 51,
"Depth": 42,
"Height": 18,
"DimUnit": "cm"
},
.
.
.
]
```
--------------------------------
### Example Project Structure
Source: https://github.com/sap-docs/sapui5/blob/main/docs/05_Developing_Apps/getting-started-with-the-launchpad-sandbox-022e31c.md
A typical project structure for an SAPUI5 application including the sandbox configuration files.
```text
my-app/
├── webapp/
│ ├── Component.js
│ ├── manifest.json
│ ├── controller/
│ ├── view/
│ └── test/
│ ├── sandbox.html # Sandbox HTML file
│ └── fioriSandboxAppConfig.json # Optional: Sandbox configuration
└── package.json
```
--------------------------------
### JSON Model Data Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/list-binding-and-tree-binding-aggregation-binding-91f0577.md
Example JSON data structure for companies, used to demonstrate list binding.
```json
{
companies : [
{
name : "Acme Inc.",
city: "Belmont",
state: "NH",
county: "Belknap",
revenue : "123214125.34"
},{
name : "Beam Hdg.",
city: "Hancock",
state: "NH",
county: "Belknap",
revenue : "3235235235.23"
},{
name : "Carot Ltd.",
city: "Cheshire",
state: "NH",
county: "Sullivan",
revenue : "Not Disclosed"
}]
}
```
--------------------------------
### Component Usage Configuration
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/migration-information-for-upgrading-the-manifest-file-a110f76.md
Example of configuring component usages in the manifest.json file.
```json
{
...
"componentUsages": {
"myusage": {
"name": "my.used",
"settings": {},
"componentData": {}
}
},
...
}
```
--------------------------------
### Sample Data Source Configuration Headers
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/spreadsheet-export-configuration-7e12e6b.md
Illustrates the necessary headers for configuring a data source for spreadsheet export. Ensure these headers are correctly set for proper data retrieval and processing.
```json
{
"headers": {
"Accept": "application/json",
"Accept-Language": "en",
"sap-cancel-on-close": "true",
"DataServiceVersion": "2.0",
"x-csrf-token": "XvR_WdN7nCw83ngZnH9lZQ=="
},
"sizeLimit": 500
}
```
--------------------------------
### XML Preprocessor Trace Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/debugging-153b357.md
A comprehensive example showing the sequence of trace events during XML view processing.
```xml
1 [ 0] Start processing Element sap.ui.core.mvc.XMLView#__xmlview5 (sap.ui.core.sample.ViewTemplate.scenario.Detail) - sap.ui.core.util.XMLPreprocessor
2 [ 0] meta = /dataServices/schema/0/entityContainer/0/entitySet/0 - sap.ui.core.util.XMLPreprocessor
3 [ 1] entityType = /dataServices/schema/0/entityType/0 - sap.ui.core.util.XMLPreprocessor
4 [ 2] test == [object Array] --> true - sap.ui.core.util.XMLPreprocessor
5 [ 2] items = {path:'/BusinessPartnerSet', length: 5} -
sap.ui.core.util.XMLPreprocessor
6 [ 3] target = /dataServices/schema/0/entityType/0/com.sap.vocabularies.UI.v1.LineItem - sap.ui.core.util.XMLPreprocessor
7 [ 4] fragmentName = sap.ui.core.sample.ViewTemplate.scenario.Table - sap.ui.core.util.XMLPreprocessor
8 [ 5] Starting - sap.ui.core.util.XMLPreprocessor
9 [ 5] field = /dataServices/schema/0/entityType/0/com.sap.vocabularies.UI.v1.LineItem/0 - sap.ui.core.util.XMLPreprocessor
10 [ 6] test == [object Object] --> true - sap.ui.core.util.XMLPreprocessor
11 [ 6] text = ID - sap.ui.core.util.XMLPreprocessor
12 [ 6] Finished - sap.ui.core.util.XMLPreprocessor
13 [ 5] Finished - sap.ui.core.util.XMLPreprocessor
14 [ 4] Finished - sap.ui.core.util.XMLPreprocessor
15 [ 3] Finished - sap.ui.core.util.XMLPreprocessor
16 [ 2] Finished - sap.ui.core.util.XMLPreprocessor
17 [ 1] Finished - sap.ui.core.util.XMLPreprocessor
18 [ 0] Finished processing Element sap.ui.core.mvc.XMLView#__xmlview5 (sap.ui.core.sample.ViewTemplate.scenario.Detail) - sap.ui.core.util.XMLPreprocessor
```
--------------------------------
### Configure Test Suite with Defaults
Source: https://github.com/sap-docs/sapui5/blob/main/docs/04_Essentials/concept-and-basic-setup-22f50c0.md
An example of a test suite module providing default configurations for QUnit, Sinon, and SAPUI5 runtime settings.
```javascript
sap.ui.define(function () {
"use strict";
return {
name: "QUnit test suite for NAMESPACE",
defaults: {
page: "ui5://test-resources//Test.qunit.html?testsuite={suite}&test={name}",
qunit: {
version: 2,
},
sinon: {
version: 4,
},
ui5: {
theme: "sap_horizon",
},
loader: {
paths: {
"": "../",
},
},
},
tests: {},
};
});
```
--------------------------------
### InputListItem with Input Example
Source: https://github.com/sap-docs/sapui5/blob/main/docs/10_More_About_Controls/lists-1da1581.md
Use InputListItem to associate a label with an input control. This example shows a Number Input control.
```js
```