### Install Dependencies
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README_AUTHORS.md
Installs the necessary dependencies for the project. This is a one-time setup command.
```sh
npm i
```
--------------------------------
### UI5 Hello World with HTML
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Starts with a basic 'Hello World' example using only HTML, demonstrating the foundation of UI5 development.
```html
UI5 Hello World
Hello World!
```
--------------------------------
### Start UI5 Development Server
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/01/README.md
This command executes the 'start' script defined in package.json, launching the UI5 development server and opening the index.html file in a browser.
```sh
npm start
```
--------------------------------
### Start Development Server
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README_AUTHORS.md
Starts the integrated development server to preview the tutorial content locally. The server automatically reloads on file changes.
```sh
npm start
```
--------------------------------
### Install Dependencies with npm
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Installs all project dependencies using npm. This is a prerequisite for running the project locally or building the application.
```sh
npm install
```
--------------------------------
### Install UI5 CLI Development Dependency
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/01/README.md
This command installs the UI5 Command Line Interface (CLI) and adds it as a development dependency to the project using npm.
```sh
npm install --save-dev @ui5/cli
```
--------------------------------
### Component Setup in JavaScript
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/10/README.md
Provides the equivalent UI5 component setup in JavaScript, demonstrating the extend pattern and initialization for the data model.
```javascript
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"], function (UIComponent, JSONModel) {
"use strict";
const Component = UIComponent.extend("ui5.walkthrough.Component", {
metadata: {
"interfaces": ["sap.ui.core.IAsyncContentCreation"],
"manifest": "json"
},
init() {
// call the init function of the parent
UIComponent.prototype.init.call(this);
// set data model
const data = {
recipient: {
name: "World"
}
};
const dataModel = new JSONModel(data);
this.setModel(dataModel);
}
});
;
return Component;
});
```
--------------------------------
### Initialize package.json for UI5 TypeScript Project
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/01/README.md
This JSON configuration defines the project's name, version, description, and includes a script to start the UI5 development server.
```json
{
"name": "ui5.walkthrough",
"version": "1.0.0",
"description": "OpenUI5 TypeScript Walkthrough",
"private": true,
"scripts": {
"start": "ui5 serve -o index.html"
}
}
```
--------------------------------
### UI5 Mock Server Configuration for Development
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Explains the setup of a mock server for UI5 applications. This allows for development and testing without relying on the availability of a live backend service.
```JavaScript
// In index.html or a dedicated mockserver.js file
if (window.location.href.indexOf("mockserver") > -1) {
window.mockserver =
sap.ui.require([
"sap/ui/core/util/MockServer",
"sap/ui/model/odata/v2/ODataModel"
], function (MockServer, ODataModel) {
var oMockServer = new MockServer({
rootUri: "/V2/Northwind/Northwind.svc/"
});
var oUriParameters = new sap.ui.model.UriParameters(
window.location.href
);
// configure mock server with a MockServer.json file that contains the mock data
oMockServer.simulate(
"../localService/mockserver.json",
"../localService/metadata.xml"
);
// start the mock server
oMockServer.start();
// make the MockServer visible to the browser console
jQuery.sap.log.info("Mock Server started.");
// create an ODataModel instance and point it to the mock server
var oModel = new ODataModel("/V2/Northwind/Northwind.svc/", true);
// set mock server as a data source for the model
oModel.attachMetadataLoaded(function () {
oModel.attachRequestCompleted(function (oEvent) {
// here you can get all the data that is loaded from the server
if (oEvent.mParams.url.indexOf("$metadata") > -1) {
// set the mockserver
sap.ui.getCore().setModel(oMockServer, "mockserver");
}
});
});
// set the model to the UI
sap.ui.getCore().setModel(oModel);
});
} else {
// Load the app with the real service
sap.ui.require(["sap/ui/core/mvc/XMLView"], function (XMLView) {
XMLView.create({
viewName: "com.ui5.walkthrough.view.App"
}).then(function (oView) {
oView.placeAt("content");
});
});
}
```
--------------------------------
### Configure Start Script in package.json
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/26/README.md
Configures the start script in package.json to open mockServer.html instead of index.html. This allows the application to run with mock data during development.
```JSON
{
"name": "ui5.walkthrough",
"version": "1.0.0",
"description": "OpenUI5 TypeScript Walkthrough",
"private": true,
"scripts": {
"start": "ui5 serve -o test/mockServer.html"
},
"devDependencies": {
...
}
}
```
--------------------------------
### UI5 Unit Test with QUnit
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Provides an example of setting up and running unit tests for a UI5 application using the QUnit framework. This is crucial for ensuring code quality and stability.
```JavaScript
// In test/unit/unitTests.qunit.js
QUnit.config.autostart = false;
// For sap.ui.demo.walkthrough
sap.ui.require([
"sap/ui/thirdparty/qunit-2",
"sap/ui/qunit/qunit-junit"
], function () {
// Start the module tests
QUnit.start();
});
// In test/unit/controller/App.qunit.js
QUnit.module("App Controller");
QUnit.test("Should create an instance of the App controller", function (assert) {
// Arrange
var oAppController = new Controller();
// Assert
assert.ok(oAppController);
});
QUnit.test("Should update the found animal הודעה", function (assert) {
// Arrange
var oAppController = new Controller();
var oModel = new sap.ui.model.json.JSONModel({ appointments: [] });
oAppController.getView = function () {
return {
getModel: function () {
return oModel;
}
};
};
// Act
oAppController.onSearch({ getSource: function() { return { getValue: function() { return "test"; } }; } });
// Assert
assert.strictEqual(oModel.getProperty("/appointments").length, 0, "The found animal message should be empty.");
});
```
--------------------------------
### UI5 Routing and Navigation Setup
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Explains how to implement routing and navigation in UI5 applications to split content across different pages. This allows for a more organized and scalable application structure.
```JavaScript
// manifest.json configuration for routing
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "ui5.walkthrough.view",
"controlId": "appControl",
"controlAggregation": "pages",
"bypassed": {
"target": "notFound"
},
"targetHandling": {
"async": true
}
},
"routes": [
{
"pattern": "",
"name": "worklist",
"target": ["worklist"]
},
{
"pattern": "Employees/{objectId}",
"name": "object",
"target": ["object"]
}
],
"targets": {
"worklist": {
"viewName": "Worklist",
"viewId": "worklist",
"viewLevel" : 1
},
"object": {
"viewName": "Object",
"viewId": "object",
"viewLevel" : 2
},
"notFound": {
"viewName": "NotFound",
"transition": "show"
}
}
}
```
--------------------------------
### Component Container Setup (TypeScript & JavaScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/09/README.md
This snippet demonstrates how to replace the view with a UI component using the `ComponentContainer`. It configures the container with an ID, the component's name, and settings for asynchronous loading and ID prefixing, then places it in the HTML. Examples are provided in both TypeScript and JavaScript.
```TypeScript
import ComponentContainer from "sap/ui/core/ComponentContainer";
new ComponentContainer({
id: "container",
name: "ui5.walkthrough",
settings: {
id: "walkthrough"
},
autoPrefixId: true,
async: true
}).placeAt("content");
```
```JavaScript
sap.ui.define(["sap/ui/core/ComponentContainer"], function (ComponentContainer) {
"use strict";
new ComponentContainer({
id: "container",
name: "ui5.walkthrough",
settings: {
id: "walkthrough"
},
autoPrefixId: true,
async: true
}).placeAt("content");
});
```
--------------------------------
### Component Setup in TypeScript
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/10/README.md
Defines the main UI5 component using TypeScript, including metadata and initialization logic for setting a JSON model.
```typescript
import UIComponent from "sap/ui/core/UIComponent";
import JSONModel from "sap/ui/model/json/JSONModel";
/**
* @namespace ui5.walkthrough
*/
export default class Component extends UIComponent {
public static metadata = {
"interfaces": ["sap.ui.core.IAsyncContentCreation"],
"manifest": "json"
};
init(): void {
// call the init function of the parent
super.init();
// set data model
const data = {
recipient: {
name: "World"
}
};
const dataModel = new JSONModel(data);
this.setModel(dataModel);
};
};
```
--------------------------------
### Run UI5 Walkthrough Step from Directory
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Navigates to the directory of a specific UI5 walkthrough step and starts it using npm. This is an alternative method to running individual steps.
```sh
cd steps/01
npm start
```
--------------------------------
### Install UI5 Middleware for JavaScript Projects
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/02/README.md
Installs development dependencies for UI5 projects using JavaScript. This includes middleware for live reloading and serving frameworks, which are crucial for an efficient development environment.
```sh
npm install ui5-middleware-livereload ui5-middleware-serveframework --save-dev
```
--------------------------------
### Install UI5 Middleware for TypeScript Projects
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/02/README.md
Installs essential development dependencies for UI5 projects using TypeScript. These include middleware for live reloading, serving frameworks, and transpiling code, all saved as development dependencies in package.json.
```sh
npm install ui5-middleware-livereload ui5-middleware-serveframework ui5-tooling-transpile --save-dev
```
--------------------------------
### Install TypeScript as a Development Dependency
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/02/README.md
This command installs the TypeScript package as a development dependency using npm, ensuring it's available for the project and recorded in the package.json file.
```typescript
npm install typescript --save-dev
```
--------------------------------
### Run UI5 Walkthrough Step using Workspace
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Starts a specific UI5 walkthrough step using the npm workspace command. This allows running individual steps of the tutorial locally.
```sh
npm start -w ui5.walkthrough.step01
```
--------------------------------
### Initialize Mock Server (TypeScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/26/README.md
Initializes and starts the OpenUI5 mock server using TypeScript. It configures the server with mock data and simulates OData requests, including a configurable delay.
```typescript
import MockServer from "sap/ui/core/util/MockServer";
export default {
init: function () {
// create
const mockServer = new MockServer({
rootUri: sap.ui.require.toUrl("ui5/walkthrough/V2/Northwind/Northwind.svc/")
});
const urlParams = new URLSearchParams(window.location.search);
// configure mock server with a delay
MockServer.config({
autoRespond: true,
autoRespondAfter: parseInt(urlParams.get("serverDelay") || "500")
});
// simulate
const path = sap.ui.require.toUrl("ui5/walkthrough/localService");
mockServer.simulate(path + "/metadata.xml", path + "/mockdata");
// start
mockServer.start();
}
};
```
--------------------------------
### Initialize Mock Server (JavaScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/26/README.md
Initializes and starts the OpenUI5 mock server using JavaScript. It configures the server with mock data and simulates OData requests, including a configurable delay.
```javascript
sap.ui.define(["sap/ui/core/util/MockServer"], function (MockServer) {
"use strict";
return {
init: function () {
// create
const mockServer = new MockServer({
rootUri: sap.ui.require.toUrl("ui5/walkthrough/V2/Northwind/Northwind.svc/")
});
const urlParams = new URLSearchParams(window.location.search);
// configure mock server with a delay
MockServer.config({
autoRespond: true,
autoRespondAfter: parseInt(urlParams.get("serverDelay") || "500")
});
// simulate
const path = sap.ui.require.toUrl("ui5/walkthrough/localService");
mockServer.simulate(path + "/metadata.xml", path + "/mockdata");
// start
mockServer.start();
}
};
});
```
--------------------------------
### Configure ui5.yaml for Basic UI5 Tooling Setup (JavaScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/02/README.md
This configuration sets up the UI5 Tooling for a JavaScript project, integrating `ui5-middleware-serveframework` and `ui5-middleware-livereload` after the `compression` middleware. It enables live reloading and framework resource building without TypeScript transpilation.
```yaml
framework:
name: OpenUI5
version: "1.132.1"
libraries:
- name: sap.ui.core
- name: themelib_sap_horizon
builder:
server:
customMiddleware:
- name: ui5-middleware-serveframework
afterMiddleware: compression
- name: ui5-middleware-livereload
afterMiddleware: compression
```
--------------------------------
### Run ui5-serve for Interface Generation
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/33/README.md
Starts the ui5-serve command, which in turn runs the interface generator tool in watch mode to create TypeScript interface definitions for UI5 controls.
```bash
ui5-serve
```
--------------------------------
### Install ts-interface-generator
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/33/README.md
Installs the @ui5/ts-interface-generator package as a development dependency in your project.
```bash
npm install @ui5/ts-interface-generator --save-dev
```
--------------------------------
### UI5 TypeScript Walkthrough - Step 1
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
The initial 'Hello World' step using TypeScript.
```typescript
import Button from "sap/m/Button";
new Button({
text: "Hello World!",
press: function () {
alert("Hello World!");
}
}).placeAt("content");
```
--------------------------------
### Create Basic HTML File
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/01/README.md
This snippet shows the content of the index.html file, which is the entry point for the UI5 application. It includes basic HTML structure with a title and a div to display 'Hello World'.
```html
UI5 TypeScript Walkthrough
Hello World
```
--------------------------------
### Initialize UI5 Tooling Configuration
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/01/README.md
This command initializes the UI5 Tooling configuration for the project, generating a ui5.yaml file essential for UI5 Tooling integration.
```sh
ui5 init
```
--------------------------------
### UI5 Bootstrap and Alert
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Illustrates the process of loading and initializing OpenUI5 (bootstrapping) and displaying a simple alert message.
```javascript
sap.ui.define([
"sap/m/Text"
], function (Text) {
"use strict";
alert("OpenUI5 bootstrapped successfully!");
});
```
--------------------------------
### Install OpenUI5 Type Definitions
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/03/README.md
Installs the type definitions for OpenUI5 as a development dependency using npm. This is crucial for using TypeScript with OpenUI5, enabling better code completion and type checking.
```sh
npm install @types/openui5 --save-dev
```
--------------------------------
### UI5 Descriptor for Applications
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Demonstrates the use of the `manifest.json` file for application-specific configuration, separating settings from code for flexibility and compatibility with the SAP Fiori launchpad.
--------------------------------
### UI5 Aggregation Binding with JavaScript
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Illustrates adding functionality by displaying invoice data in a list using aggregation binding in a UI5 application. This example uses JavaScript.
```JavaScript
// No specific code provided for this step, but it involves setting up aggregation bindings for UI5 controls like sap.m.List.
```
--------------------------------
### Create Mock Server HTML Page
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/26/README.md
Creates a mockServer.html page for running the app in test mode with mock data. It configures the OpenUI5 bootstrap to initialize the mock server and specifies the resource roots.
```HTML
UI5 TypeScript Walkthrough - Mockserver Test Page
```
--------------------------------
### UI5 Aggregation Binding with TypeScript
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Illustrates adding functionality by displaying invoice data in a list using aggregation binding in a UI5 application. This example uses TypeScript.
```TypeScript
// No specific code provided for this step, but it involves setting up aggregation bindings for UI5 controls like sap.m.List.
```
--------------------------------
### UI5 TypeScript Walkthrough - Step 2
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Bootstrapping OpenUI5 with TypeScript and displaying an alert.
```typescript
sap.ui.require([
"sap/m/Text"
], function (Text: typeof sap.m.Text) {
new Text({ text: "OpenUI5 Bootstrapped!" }).placeAt("content");
});
```
--------------------------------
### Download TypeScript Solution for Step 27
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/27/README.md
Provides a link to download the complete TypeScript solution for Step 27 of the UI5 Walkthrough, which includes the unit tests.
```bash
wget https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip
```
--------------------------------
### Download JavaScript Solution for Step 27
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/27/README.md
Provides a link to download the complete JavaScript solution for Step 27 of the UI5 Walkthrough, which includes the unit tests.
```bash
wget https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27-js.zip
```
--------------------------------
### UI5 Pages and Panels
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Enhances the application's user interface by introducing Pages and Panels from the `sap.m` library and explains control aggregations.
--------------------------------
### Add Text Bundle Entries (INI)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/11/README.md
Adds new key/value pairs to the text bundle for the start page title and the panel title, enhancing the application's internationalization.
```ini
# Manifest
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of OpenUI5
# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=UI5 TypeScript Walkthrough
helloPanelTitle=Hello World
```
--------------------------------
### Download UI5 TypeScript Walkthrough Step 28
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/28/README.md
Provides a link to download the complete solution for Step 28 of the UI5 TypeScript Walkthrough, focusing on integration testing with OPA.
```TypeScript
You can download the solution for this step here: [📥 Download step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip)
```
--------------------------------
### UI5 Custom Formatter for Localized Status
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Explains how to create custom formatting functions in UI5 to handle complex logic for data model properties. This example localizes a technical status into a user-friendly format.
```JavaScript
sap.ui.define([
"sap/ui/core/format/NumberFormat"
], function (NumberFormat) {
"use strict";
return {
statusText: function (sStatus) {
var resourceBundle = this.getModel("i18n").getResourceBundle();
switch (sStatus) {
case "A":
return resourceBundle.getText("StatusA");
case "B":
return resourceBundle.getText("StatusB");
case "C":
return resourceBundle.getText("StatusC");
default:
return sStatus;
}
}
};
});
```
--------------------------------
### Implement Detail Controller (TypeScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/35/README.md
Initializes the Detail controller by setting up a view model for currency and attaching a pattern matched event to the router for handling route navigation.
```typescript
import Controller from "sap/ui/core/mvc/Controller";
import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
import History from "sap/ui/core/routing/History";
import MessageToast from "sap/m/MessageToast";
import ProductRating, { ProductRating$ChangeEvent } from "../control/ProductRating";
import ResourceBundle from "sap/base/i18n/ResourceBundle";
import ResourceModel from "sap/ui/model/resource/ResourceModel";
import JSONModel from "sap/ui/model/json/JSONModel";
import UIComponent from "sap/ui/core/UIComponent";
/**
* @namespace ui5.walkthrough.controller
*/
export default class Detail extends Controller {
onInit(): void {
const viewModel = new JSONModel({
currency: "EUR"
});
this.getView().setModel(viewModel, "view");
const router = UIComponent.getRouterFor(this);
router.getRoute("detail").attachPatternMatched(this.onObjectMatched, this);
}
//...
```
--------------------------------
### Implement Message Toast in Controller (JavaScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/06/README.md
Replaces the native alert with sap.m.MessageToast.show for displaying messages. This example demonstrates defining a UI5 controller using sap.ui.define and utilizing the MessageToast control.
```javascript
sap.ui.define(["sap/m/MessageToast", "sap/ui/core/mvc/Controller"], function (MessageToast, Controller) {
"use strict";
/**
* @name ui5.walkthrough.controller.App
*/
const AppController = Controller.extend("ui5.walkthrough.controller.App", {
onShowHello() {
MessageToast.show("Hello World");
}
});
;
return AppController;
});
```
--------------------------------
### Implement Message Toast in Controller (TypeScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/06/README.md
Replaces the native alert with sap.m.MessageToast.show for displaying messages. This example demonstrates importing modules and using the MessageToast control within a UI5 controller.
```typescript
import MessageToast from "sap/m/MessageToast";
import Controller from "sap/ui/core/mvc/Controller";
/**
* @name ui5.walkthrough.controller.App
*/
export default class AppController extends Controller {
onShowHello(): void {
MessageToast.show("Hello World");
}
};
```
--------------------------------
### Initialize OpenUI5 Bootstrap in HTML
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/02/README.md
This snippet shows the complete index.html file with the OpenUI5 bootstrap script. It configures the framework's theme, compatibility version, asynchronous loading, and specifies the module to execute upon initialization, along with resource root mapping.
```html
UI5 TypeScript Walkthrough
Hello World
```
--------------------------------
### UI5 Remote OData Service Integration
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Guides on connecting a UI5 application to a real OData service to display remote data. This step moves from local JSON data to dynamic, server-sourced information.
```JavaScript
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/model/odata/v2/ODataModel"
], function (Controller, JSONModel, ODataModel) {
"use strict";
return Controller.extend("com.ui5.walkthrough.controller.App", {
onInit: function () {
var oDataUrl = "/V2/Northwind/Northwind.svc/";
var oODataModel = new ODataModel(oDataUrl, {
useBatch: false // Set to true for batch requests if needed
});
this.getView().setModel(oODataModel);
}
});
});
```
--------------------------------
### Download UI5 JavaScript Walkthrough Step 28
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/28/README.md
Provides a link to download the complete solution for Step 28 of the UI5 JavaScript Walkthrough, focusing on integration testing with OPA.
```JavaScript
You can download the solution for this step here: [📥 Download step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28-js.zip)
```
--------------------------------
### OPA5 Navigation Journey Test
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/28/README.md
Defines an integration test journey using OPA5 to verify navigation and dialog display. It includes arrangements to start the UI component, actions to interact with the UI, and assertions to check the expected outcome, followed by cleanup.
```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();
});
```
```JavaScript
sap.ui.define(["sap/ui/test/opaQunit", "./pages/HelloPanelPage"], function (opaTest, HelloPanelPage) {
"use strict";
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();
});
});
```
--------------------------------
### HTML Integration with ComponentSupport
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/10/README.md
Configures the index.html file to bootstrap the UI5 framework and load the component using ComponentSupport, enabling declarative component instantiation.
```html
UI5 TypeScript Walkthrough
```
--------------------------------
### Handle onPress Event in Invoice List Controller
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/31/README.md
This snippet shows how to implement the `onPress` event handler in the InvoiceList controller. It retrieves the selected `ObjectListItem`, gets the router, and navigates to the 'detail' route, passing the encoded and substringed binding path of the item as the `invoicePath` parameter.
```TypeScript
import Controller from "sap/ui/core/mvc/Controller";
import JSONModel from "sap/ui/model/json/JSONModel";
import { SearchField$SearchEvent } from "sap/m/SearchField";
import Filter from "sap/ui/model/Filter";
import FilterOperator from "sap/ui/model/FilterOperator";
import ListBinding from "sap/ui/model/ListBinding";
import Event from "sap/ui/base/Event";
import ObjectListItem from "sap/m/ObjectListItem";
import UIComponent from "sap/ui/core/UIComponent";
/**
* @namespace ui5.walkthrough.controller
*/
export default class App extends Controller {
//...
onPress(event: Event): void {
const item = event.getSource() as ObjectListItem;
const router = UIComponent.getRouterFor(this);
router.navTo("detail", {
invoicePath: window.encodeURIComponent(item.getBindingContext("invoice").getPath().substring(1))
});
}
};
```
--------------------------------
### Initialize UI5 Application (index.js)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/02/README.md
This JavaScript file is a basic entry point for the UI5 application. It uses the native alert function to display a message indicating that the UI5 framework is ready.
```javascript
alert("UI5 is ready");
```
--------------------------------
### Handle onPress Event in Invoice List Controller (JavaScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/31/README.md
This JavaScript snippet demonstrates the equivalent functionality for the `onPress` event handler in the InvoiceList controller. It retrieves the selected item, gets the router, and navigates to the 'detail' route, passing the encoded and substringed binding path of the item as the `invoicePath` parameter.
```JavaScript
sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap/ui/model/Filter", "sap/ui/model/FilterOperator", "sap/ui/core/UIComponent"], function (Controller, JSONModel, Filter, FilterOperator, UIComponent) {
"use strict";
const App = Controller.extend("ui5.walkthrough.controller.App", {
//...
onPress(event) {
const item = event.getSource();
const router = UIComponent.getRouterFor(this);
router.navTo("detail", {
invoicePath: window.encodeURIComponent(item.getBindingContext("invoice").getPath().substring(1))
});
}
});
;
return App;
});
```
--------------------------------
### Implement App Controller in JavaScript
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/05/README.md
Provides the JavaScript implementation for the App controller, extending sap/ui/core/mvc/Controller. The `onShowHello` method is defined to display a 'Hello World' alert when called, handling user interactions.
```javascript
sap.ui.define(["sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";
const AppController = Controller.extend("ui5.walkthrough.controller.App", {
onShowHello() {
// show a native JavaScript alert
alert("Hello World");
}
});
;
return AppController;
});
```
--------------------------------
### Implement Back Navigation in Detail Controller
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/32/README.md
This code snippet demonstrates how to implement the `onNavBack` function in the `Detail` controller. It uses the `History` class to get the previous hash and either navigates back using `window.history.go(-1)` or navigates to the 'overview' route via the UIComponent's router if no previous hash is found. This ensures proper back navigation within the application.
```TypeScript
import Controller from "sap/ui/core/mvc/Controller";
import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
import History from "sap/ui/core/routing/History";
import UIComponent from "sap/ui/core/UIComponent";
/**
* @namespace ui5.walkthrough.controller
*/
export default class Detail extends Controller {
//...
onNavBack(): void {
const history = History.getInstance();
const previousHash = history.getPreviousHash();
if (previousHash !== undefined) {
window.history.go(-1);
} else {
const router = UIComponent.getRouterFor(this);
router.navTo("overview", {}, true);
}
}
};
```
--------------------------------
### Create and Place Text Control (TypeScript)
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/03/README.md
Demonstrates how to create an instance of the OpenUI5 `sap/m/Text` control in TypeScript. It sets the `text` property to 'Hello World' and uses the `placeAt` method to render the control into the HTML element with the ID 'content'.
```ts
import Text from "sap/m/Text";
new Text({
text: "Hello World"
}).placeAt("content");
```
--------------------------------
### UI5 Responsiveness Configuration
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Enhances the responsiveness of a UI5 application, ensuring optimal display across various devices like phones, tablets, and desktops by leveraging built-in control features.
```JavaScript
// Example of using sap.m.Table for responsiveness
// The sap.m.Table control automatically adapts its layout based on the available screen space.
// No specific code is usually required in the controller for basic responsiveness of standard controls.
```
--------------------------------
### UI5 TypeScript Walkthrough - Step 4
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/README.md
Implementing XML Views with TypeScript.
```typescript
import UI5Control from "sap/ui/core/Control";
// Assuming an XML view is defined elsewhere and loaded
// This snippet focuses on the TypeScript aspect of using controls
// Example of creating a control instance in TS that might be used in a view:
const myTextControl = new sap.m.Text({ text: "Text from TS" });
// In a controller, you might get this control:
// const oText = this.byId("myTextViewId");
```
--------------------------------
### Add Serve-Dist Script to package.json
Source: https://github.com/sap-samples/ui5-typescript-walkthrough/blob/main/steps/38/README.md
Adds a 'serve-dist' script to package.json to locally serve the built application from the 'dist' folder using 'local-web-server'. It includes options for compression and automatically opening the application in a browser.
```json
{
"name": "ui5.walkthrough",
"version": "1.0.0",
"description": "OpenUI5 TypeScript Walkthrough",
"private": true,
"scripts": {
"start": "ui5 serve -o test/mockServer.html",
"build": "ui5 build --all --clean-dest",
"serve-dist": "ws --compress -d dist --open"
},
...
}
```