OpenUI5

https://sdk.openui5.org/
Admin
OpenUI5 is an open-source JavaScript UI framework by SAP for building responsive, enterprise-grade...
Tokens:22,102,059
Snippets:154,465
Trust Score:9.3
Update:11 hours ago
Show doc for...
Tokens:
Raw
### Install dependencies and start development server with npm

Source: https://sdk.openui5.org/1.136.10/#/topic/8b49fc198bf04b2d9800fc37fecbb218

Run these commands in a shell at the project root after extracting a tutorial project. `npm install` installs dependencies, then `npm start` starts the development server. You may need to create and adapt project configuration files first if they are not present.

```bash
npm install
```

```bash
npm start
```

--------------------------------

### Start development server with npm start

Source: https://sdk.openui5.org/1.139.0/#/topic/8b49fc198bf04b2d9800fc37fecbb218

Run this command after npm install to start the UI5 development server.

```bash
npm start
```

--------------------------------

### Start development server with npm start

Source: https://sdk.openui5.org/1.120.40/#/topic/8b49fc198bf04b2d9800fc37fecbb218

After dependencies are installed, run this command to start the development server for the tutorial project.

```bash
npm start
```

--------------------------------

### Example start_url in manifest.json

Source: https://sdk.openui5.org/#/topic/3a9babace121497abea8f0ea66e156d9/

Example of filling the start_url placeholder with 'index.html'. If no start URL is shipped, remove the start_url section.

```javascript
{
    "start_url": "index.html",
    ...
}
```

--------------------------------

### Install UI5 CLI locally and initialize project

Source: https://sdk.openui5.org/1.142.0/#/topic/4cde849dc18949b69bbe152a0aaa19c6

Commands to install the UI5 CLI as a dev dependency, initialize the project, set the framework to OpenUI5, add required libraries, and start the server.

```bash
npm i -D @ui5/cli
```

```bash
ui5 init
```

```bash
ui5 use OpenUI5
```

```bash
ui5 add sap.m sap.ui.core sap.ui.layout themelib_sap_horizon
```

```bash
npm start
```

--------------------------------

### Install dependencies and start development server

Source: https://sdk.openui5.org/1.139.3/#/topic/8b49fc198bf04b2d9800fc37fecbb218

Run these commands in the project folder after downloading and extracting the tutorial code. Requires UI5 Tooling and possibly creating/adapting project configuration files first.

```shell
npm install
```

```shell
npm start
```

--------------------------------

### getStart

Source: https://sdk.openui5.org/#/api/sap.ui.unified.TimeRange/

Gets current value of property start. Start time for a time range. This must be a String.

```APIDOC
## getStart

### Description
Gets current value of property start. Start time for a time range. This must be a String.

### Method
getStart

### Endpoint
sap.ui.unified.TimeRange#getStart

### Parameters
None

### Response
#### Success Response
Returns the current value of the start property.
```

--------------------------------

### getFrom (Deprecated)

Source: https://sdk.openui5.org/#/api/sap.m.DateRangeSelection/methods/setTo

Gets the start date of the range. This method is deprecated.

```APIDOC
## getFrom (Deprecated)

### Description
Get the start date of the range. This method is deprecated.

### Method
getFrom

### Returns
- **startDate** (Date) - The start date of the range.
```

--------------------------------

### Resource bundle content example

Source: https://sdk.openui5.org/1.146.0/#/topic/91f285256f4d1014b6dd926db0e91070

Example of a resource bundle file containing a key-value pair for the text 'Hello World'.

```ini
MY_TEXT=Hello World
```

--------------------------------

### start

Source: https://sdk.openui5.org/1.142.0/#/api/sap.ui.core.util.MockServer

Starts the server.

```APIDOC
## start

### Description
Starts the server.

### Method
- (not specified)

### Endpoint
- (not specified)

### Parameters
- (not specified)

### Request Example
- (not specified)

### Response
- (not specified)
```

--------------------------------

### Binding path examples with and without model name

Source: https://sdk.openui5.org/#/topic/2888af49635949eca14fa326d04833b9/

Examples of binding paths: absolute paths starting with '/', relative paths like 'ProductName', and paths prefixed with a model name followed by '>'.

```bash
'/Products/0/ProductName'
'/Products(0)/ProductName'
'ProductName'

//with model name
'myModelName>/Products/0/ProductName'
'myModelName>/Products(0)/ProductName'
'myModelName>ProductName'
```

--------------------------------

### Using jQuery.rect() to get element position

Source: https://sdk.openui5.org/1.142.0/#/api/jQuery

Example of using the rect() method on a jQuery instance to get the top position of an element. The method returns an object with a top property, which is then displayed using alert().

```javascript
  var oRect = jQuery("#myDiv").rect();
  alert("Top Position: " + oRect.top);
```

--------------------------------

### package.json for the data binding tutorial

Source: https://sdk.openui5.org/1.142.0/#/topic/4cde849dc18949b69bbe152a0aaa19c6

Defines the project metadata and devDependencies for the UI5 CLI. The start script runs 'ui5 serve -o index.html'.

```json
{
  "name": "data-binding-tutorial",
  "private": true,
  "version": "1.0.0",
  "author": "SAP SE",
  "description": "UI5 Demo App - Data Binding Tutorial",
  "devDependencies": {
    "@ui5/cli": "^3"
  },
  "scripts": {
    "start": "ui5 serve -o index.html"
  }
}
```

--------------------------------

### package.json configuration for UI5 walkthrough

Source: https://sdk.openui5.org/1.142.0/#/topic/ae1be8cc26064274bbc5925a9cd59640

Defines the project metadata, scripts for development and build, and devDependencies including @ui5/cli, local-web-server, and ui5-middleware-simpleproxy. The start script serves the mock server, the build script creates a clean build, and serve-dist serves the dist folder.

```json
{
  "name": "ui5.walkthrough",
  "version": "1.0.0",
  "description": "The UI5 walkthrough application",
  "scripts": {
      "start": "ui5 serve -o test/mockServer.html",
      "build": "ui5 build --all --clean-dest",
      "serve-dist": "ws --compress -d dist --open"
  },
  "devDependencies": {
    "@ui5/cli": "^3",
    "local-web-server": "^5",
    "ui5-middleware-simpleproxy": "^3"
  }
}
```

--------------------------------

### getStartDate

Source: https://sdk.openui5.org/#/api/sap.ui.unified.TimeRange/

Get start date for a time range. From this date, only hours, minutes, seconds, and milliseconds are used.

```APIDOC
## getStartDate

### Description
Get start date for a time range. From this date, only hours, minutes, seconds, and milliseconds are used.

### Method
getStartDate

### Endpoint
sap.ui.unified.TimeRange#getStartDate

### Parameters
None

### Response
#### Success Response
Returns the start date of the time range.
```

--------------------------------

### getText()

Source: https://sdk.openui5.org/#/api/sap.m.PlanningCalendarRow/aggregations

Gets the current value of the text property, which defines the text of the header (for example, the department of the person).

```APIDOC
## getText()

### Description
Gets current value of property `text`. Defines the text of the header (for example, the department of the person).

### Method
GET

### Endpoint
sap.m.PlanningCalendarRow#getText

### Parameters
None

### Response
#### Success Response
- **text** (string) - Current value of the property.

#### Response Example
```json
{
  "text": "Department"
}
```
```

--------------------------------

### Install UI5 CLI locally and initialize

Source: https://sdk.openui5.org/1.142.0/#/topic/2680aa9b16c14a00b01261d04babbb39

Run these commands in the app root folder to install UI5 CLI as a dev dependency and initialize the UI5 project.

```bash
npm i -D @ui5/cli
```

```bash
ui5 init
```

--------------------------------

### sap.ui.core.util.MockServer.startAll

Source: https://sdk.openui5.org/1.142.0/#/api/sap.ui.core.util.MockServer

Starts all registered servers.

```APIDOC
## sap.ui.core.util.MockServer.startAll

### Description
Starts all registered servers.

### Method
- (not specified)

### Endpoint
- (not specified)

### Parameters
- (not specified)

### Request Example
- (not specified)

### Response
- (not specified)
```

--------------------------------

### getIntervalHeaders

Source: https://sdk.openui5.org/#/api/sap.m.PlanningCalendarRow/aggregations

Gets content of aggregation intervalHeaders. The appointments to be displayed at the top of the intervals (for example, for public holidays).

```APIDOC
## getIntervalHeaders

### Description
Gets content of aggregation `intervalHeaders`. The appointments to be displayed at the top of the intervals (for example, for public holidays). Appointments outside the visible time frame are not rendered.

### Method
GET

### Endpoint
sap.m.PlanningCalendarRow#methods/getIntervalHeaders

### Parameters
None

### Response
#### Success Response
- **intervalHeaders** (sap.ui.unified.DateTypeRange[]) - The interval headers.

#### Response Example
```json
{
  "intervalHeaders": []
}
```
```

--------------------------------

### sap.ui.unified.DateRange Methods

Source: https://sdk.openui5.org/#/api/sap.ui.unified.RecurringCalendarAppointment/

Methods for managing date ranges, including setting and getting start and end dates.

```APIDOC
## sap.ui.unified.DateRange Methods

### sap.ui.unified.DateRange.extend
Extends the DateRange class.

### getEndDate
Returns the current end date.

### getStartDate
Returns the current start date.

### sap.ui.unified.DateRange.getMetadata
Returns the metadata object for the DateRange class.

### setEndDate
Sets the end date.

### setStartDate
Sets the start date.
```

--------------------------------

### Set up mock server in QUnit beforeEach/afterEach

Source: https://sdk.openui5.org/1.142.0/#/topic/c9a91ddaef47461c9c44bfc2198ea3f0

Creates a MockServer instance with rootUri '/model/', simulates metadata from '../../../../qunit/service/metadata.xml', and starts/stops it in QUnit lifecycle hooks.

```javascript
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();
            }
        });
    …
});
```

--------------------------------

### package.json with mockServer start script

Source: https://sdk.openui5.org/1.142.0/#/topic/bae9d90d2e9c4206889368f04edab508

Adjusts the start script to 'ui5 serve -o test/mockServer.html' for local development with the mock server. Includes devDependencies for @ui5/cli and ui5-middleware-simpleproxy.

```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"
  }
}
```

--------------------------------

### getDelimiter

Source: https://sdk.openui5.org/#/api/sap.m.DateRangeSelection/methods/setTo

Gets the current value of the delimiter property. The delimiter is used between start and end date, defaulting to '-'.

```APIDOC
## getDelimiter

### Description
Gets current value of property `delimiter`. Delimiter between start and end date. Default value is "-". If no delimiter is given, the one defined for the used locale is used.

### Method
getDelimiter

### Returns
- **delimiter** (string) - Current value of the delimiter property. Default value is `'-'`.
```

--------------------------------

### sap.ui.core.util.MockServer.start

Source: https://sdk.openui5.org/#/api/sap.ui.core.util.MockServer/

Starts the mock server. This method initializes the server and begins responding to requests.

```APIDOC
## sap.ui.core.util.MockServer.start

### Description
Starts the mock server. This method initializes the server and begins responding to requests.

### Method
start

### Parameters
None

### Returns
None
```

--------------------------------

### getStartsSection

Source: https://sdk.openui5.org/#/api/sap.m.MenuItem/

Gets the current value of the startsSection property, indicating whether the item starts a new section in the menu.

```APIDOC
## getStartsSection

### Description
Gets the current value of the startsSection property, indicating whether the item starts a new section in the menu.

### Method
GET

### Endpoint
sap.m.MenuItem.getStartsSection

### Response
#### Success Response (200)
- **bStartsSection** (boolean) - Whether the item starts a section.

```

--------------------------------

### sap.ui.table.Column#getName

Source: https://sdk.openui5.org/#/api/sap.ui.table.Column/methods/setFlexible

Gets the current value of the name property, which is used for text representation of the column, for example in menus.

```APIDOC
## sap.ui.table.Column#getName

### Description
Gets current value of property `name`. The name of the column which is used for the text representation of this column, for example, in menus. If not set, the text from the multiLabels aggregation or the label aggregation (in that order) is used as a fallback option.

### Method
GET

### Endpoint
sap.ui.table.Column#getName

### Parameters
None

### Response
#### Success Response
- **name** (string) - The current value of the `name` property.

#### Response Example
```
"Product Name"
```
```
Tokens:
Raw