Hello, Today I going to show how to create basic UI5 CRUD operations. First think you have to have local JSON data. Ill share all screenshots.
Final output looks like this,
Search product
View product
Add Product
Edit Product
Delete Product
DATA.JSON
View1.XML
VIEW.controller.JS
Style.CSS
Manifest.JSON
Useful links:
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/ov...
https://sapui5.hana.ondemand.com/#/demoapps
https://services.odata.org/northwind/northwind.svc/
Final output looks like this,
Search product
View product
Add Product
Edit Product
Delete Product
DATA.JSON
{
"Products": [
{
"ProductID": 1,
"ProductName": "Wings",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"editable": false
},
{
"ProductID": 2,
"ProductName": "Vertical Stabilizer",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz Stabilizer",
"UnitPrice": 19,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"editable": false
},
{
"ProductID": 3,
"ProductName": "Horizontal Stabilizer",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 Stabilizer",
"UnitPrice": 10,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"editable": false
},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": false
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": true
},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"editable": false
},
{
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"editable": false
},
{
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": false
},
{
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": true
},
{
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": false
},
{
"ProductID": 11,
"ProductName": "Queso Cabrales",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "1 kg pkg.",
"UnitPrice": 3,
"UnitsInStock": 22,
"UnitsOnOrder": 30,
"ReorderLevel": 30,
"editable": false
},
{
"ProductID": 12,
"ProductName": "Queso Manchego La Pastora",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 7,
"UnitsInStock": 86,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": false
},
{
"ProductID": 13,
"ProductName": "Konbu",
"SupplierID": 6,
"CategoryID": 8,
"QuantityPerUnit": "2 kg box",
"UnitPrice": 6,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"editable": false
},
{
"ProductID": 14,
"ProductName": "Tofu",
"SupplierID": 6,
"CategoryID": 7,
"QuantityPerUnit": "40 - 100 g pkgs.",
"UnitPrice": 23.25,
"UnitsInStock": 35,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": false
},
{
"ProductID": 15,
"ProductName": "Genen Shouyu",
"SupplierID": 6,
"CategoryID": 2,
"QuantityPerUnit": "24 - 250 ml bottles",
"UnitPrice": 15.5,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"editable": false
},
{
"ProductID": 16,
"ProductName": "Pavlova",
"SupplierID": 7,
"CategoryID": 3,
"QuantityPerUnit": "32 - 500 g boxes",
"UnitPrice": 17.45,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"editable": false
},
{
"ProductID": 17,
"ProductName": "Flaps ",
"SupplierID": 7,
"CategoryID": 6,
"QuantityPerUnit": "20 boxes",
"UnitPrice": 39,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": true
},
{
"ProductID": 18,
"ProductName": "Carnarvon Tigers",
"SupplierID": 7,
"CategoryID": 8,
"QuantityPerUnit": "16 kg pkg.",
"UnitPrice": 62.5,
"UnitsInStock": 42,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": false
},
{
"ProductID": 19,
"ProductName": "Teatime Chocolate Biscuits",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 12 pieces",
"UnitPrice": 9.2,
"UnitsInStock": 25,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"editable": false
},
{
"ProductID": 20,
"ProductName": "Sir Rodney's Marmalade",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "30 gift boxes",
"UnitPrice": 81,
"UnitsInStock": 40,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"editable": false
}
]
}View1.XML
<mvc:View controllerName="imropro.controller.View1"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<Page id="page" title="IMRO Product Management" class="sapUiResponsiveContent sapUiTheme sapUiSizeCompact">
<headerContent>
<OverflowToolbar id="fbar1">
<ToolbarSpacer id="toba" />
<SearchField
id="se1"
width="50%"
class="rightAlignSearchField"
placeholder="Product id/ name"
search="onSearchProducts"
/>
<Button id="b1" icon= "sap-icon://detail-view" press="onOpenVieweDialog" />
<Button id="b2" icon= "sap-icon://add" press="onCreateProduct" />
<Button id="b3" icon= "sap-icon://edit" press="onOpenUpdateDialog" />
<Button id="b4" icon= "sap-icon://delete" press="onDeleteProduct" />
</OverflowToolbar>
</headerContent>
<VBox id="vb1" class="sapUiSmallMargin">
<Table
id="productTable"
inset="false"
items="{products>/Products}"
mode="SingleSelectMaster"
selectionChange="onSelectionChange"
growing="true" growingThreshold="18"
>
<columns>
<Column id="c1">
<Text id="t1" text="Product ID" />
</Column>
<Column id="c2">
<Text id="t2" text="Product Name" />
</Column>
<Column id="c3">
<Text id="t5" text="Unit Price" />
</Column>
<Column id="c5">
<Text id="t6" text="Supplier ID" />
</Column>
<Column id="c6">
<Text id="t8" text="Category ID" />
</Column>
<Column id="c7">
<Text id="t9" text="Quantity Per Unit" />
</Column>
<Column id="c8">
<Text id="t10" text="Units InStock" />
</Column>
<Column id="c9">
<Text id="t11" text="Units OnOrder" />
</Column>
<Column id="c10">
<Text id="t12" text="Reorder Level" />
</Column>
</columns>
<items>
<ColumnListItem id="cl1" highlight="{= ${products>UnitPrice} > 10 ? 'Success' : 'Error' }">
<cells>
<ObjectIdentifier id="obj1" title="{products>ProductID}" />
<Text id="tx14" text="{products>ProductName}" />
<Text id="t15" text="{products>UnitPrice}" />
<Text id="tx16" text="{products>SupplierID}" />
<Text id="t17" text="{products>CategoryID}" />
<Text id="t18" text="{products>QuantityPerUnit}" />
<Text id="t19" text="{products>UnitsInStock}" />
<Text id="t20" text="{products>UnitsOnOrder}" />
<Text id="t21" text="{products>ReorderLevel}" />
<Text id="t22" text="{products>ProductName}" />
</cells>
</ColumnListItem>
</items>
</Table>
</VBox>
<footer>
<OverflowToolbar id="ov1">
<content>
<ToolbarSpacer id="tl1" />
<Link id="l1" text="Contact Us" href="https://www.hcltech.com/sap" />
<Text id="t171" text="IMRO Product PVT Ltd" />
</content>
</OverflowToolbar>
</footer>
</Page>
</mvc:View>
ProductDetail.view.XML
<mvc:View controllerName="imropro.controller.ProductDetail"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns:sf="sap.ui.layout.form"
xmlns="sap.m">
<Page id="page" title="IMRO Product Details" class="sapUiResponsiveContent sapUiTheme sapUiSizeCompact">
<VBox class="sapUiSmallMargin" id="vBox1">
<sf:SimpleForm id="simpleform"
editable="false"
layout="ResponsiveGridLayout"
title="Product Detail"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="4"
emptySpanM="4"
emptySpanL="4"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<sf:content>
<Label id="lab1" text="Product ID" />
<Text id="text9" text="{products>ProductID}" />
<Label id="lab2" text="Product Name" />
<Text id="text8" text="{products>ProductName}" />
<Label id="lab3" text="Unit Price" />
<Text id="text7" text="{products>UnitPrice}" />
<Label id="lab4" text="Supplier ID" />
<Text id="text6" text="{products>SupplierID}" />
<Label id="lab5" text="Category ID" />
<Text id="text5" text="{products>CategoryID}" />
<Label id="lab6" text="Quantity Per Unit" />
<Text id="text4" text="{products>QuantityPerUnit}" />
<Label id="lab7" text="Units InStock" />
<Text id="text2" text="{products>UnitsInStock}" />
<Label id="lab8" text="Units OnOrder" />
<Text id="text3" text="{products>UnitsOnOrder}" />
<Label id="lab9" text="Reorder Level" />
<Text id="text1" text="{products>ReorderLevel}" />
</sf:content>
</sf:SimpleForm>
</VBox>
<footer>
<OverflowToolbar id="ov1">
<content>
<ToolbarSpacer id="tl1" />
<Link id="l1" text="Contact Us" href="https://www.hcltech.com/sap" />
<Text id="t171" text="IMRO Product PVT Ltd" />
</content>
</OverflowToolbar>
</footer>
</Page>
</mvc:View>
ProductDetail.Controller.JS
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/UIComponent"
], function (Controller, UIComponent) {
"use strict";
return Controller.extend("imropro.controller.ProductDetail", {
onInit: function () {
var oRouter = UIComponent.getRouterFor(this);
oRouter.getRoute("productDetail").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function (oEvent) {
var oArgs = oEvent.getParameter("arguments");
var sProductId = oArgs.productId-1;
// Fetch product details based on the productId and display them on the second page.
this._loadProductDetails(sProductId);
},
_loadProductDetails: function (sProductId) {
var oView = this.getView();
var oModel = oView.getModel("products");
var sPath = "/Products/" + sProductId;
oView.bindElement({
path: sPath,
model: "products",
events: {
change: this._onBindingChange.bind(this)
}
});
} ,
_onBindingChange: function () {
var oView = this.getView();
var oElementBinding = oView.getElementBinding("products");
var oContext = oElementBinding.getBoundContext();
if (oContext) {
oView.setBindingContext(oContext, "products");
} else {
}
}
});
});
VIEW.controller.JS
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/m/Dialog",
"sap/m/Button",
"sap/m/Input",
"sap/m/Label",
"sap/m/VBox",
"sap/m/MessageBox",
"sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, Dialog, Button, Input, Label, VBox, MessageBox, JSONModel) {
"use strict";
return Controller.extend("imropro.controller.View1", {
globalProductId: null,
onInit: function () {
},
onSelectionChange: function (oEvent) {
var oSelectedItem = oEvent.getParameter("listItem");
var oBindingContext = oSelectedItem.getBindingContext("products");
this.globalProductId = oSelectedItem.getBindingContext("products").getProperty("ProductID");
this._selectedProductPath = oBindingContext ? oBindingContext.getPath() : null;
},
onDeleteProduct: function () {
if (!this._selectedProductPath) {
MessageToast.show("Please select a product to delete.");
return;
}
var that = this;
MessageBox.confirm("Are you sure you want to delete this product?", {
title: "Confirmation",
onClose: function (oAction) {
if (oAction === MessageBox.Action.OK) {
that._deleteProduct();
}
}
});
},
_deleteProduct: function () {
var oProductsModel = this.getView().getModel("products");
var aProducts = oProductsModel.getProperty("/Products");
var iIndex = parseInt(this._selectedProductPath.split("/")[2]);
aProducts.splice(iIndex, 1);
oProductsModel.setProperty("/Products", aProducts);
MessageToast.show("Product deleted!");
},
onOpenUpdateDialog: function () {
if (!this._selectedProductPath) {
MessageToast.show("Please select a product to update.");
return;
}
var oProductsModel = this.getView().getModel("products");
var iIndex = parseInt(this._selectedProductPath.split("/")[2]);
var oSelectedProduct = oProductsModel.getProperty("/Products/" + iIndex);
var that = this;
this._createUpdateDialog(oSelectedProduct, that);
},
_createUpdateDialog: function (oProduct) {
// Store a copy of the original product data
var oOriginalProduct = Object.assign({}, oProduct);
var oDialog = new Dialog({
title: 'Update Product',
type: 'Message',
content: [
new VBox({
items: [
new Label({ text: 'Product Name' }),
new Input({ value: oProduct.ProductName, liveChange: function (oEvent) { oProduct.ProductName = oEvent.getParameter('value'); } }),
new Label({ text: 'Unit Price' }),
new Input({ value: oProduct.UnitPrice.toString(), liveChange: function (oEvent) { oProduct.UnitPrice = parseFloat(oEvent.getParameter('value')); } }),
new Label({ text: 'Supplier ID' }),
new Input({ value: oProduct.SupplierID, liveChange: function (oEvent) { oProduct.SupplierID = oEvent.getParameter('value'); } }),
new Label({ text: 'Category ID' }),
new Input({ value: oProduct.CategoryID.toString(), liveChange: function (oEvent) { oProduct.CategoryID = parseFloat(oEvent.getParameter('value')); } }),
new Label({ text: 'Quantity Per Unit' }),
new Input({ value: oProduct.QuantityPerUnit, liveChange: function (oEvent) { oProduct.QuantityPerUnit = oEvent.getParameter('value'); } }),
new Label({ text: 'Units InStock' }),
new Input({ value: oProduct.UnitsInStock.toString(), liveChange: function (oEvent) { oProduct.UnitsInStock = parseFloat(oEvent.getParameter('value')); } }),
new Label({ text: 'Units OnOrder' }),
new Input({ value: oProduct.UnitsOnOrder, liveChange: function (oEvent) { oProduct.UnitsOnOrder = oEvent.getParameter('value'); } }),
new Label({ text: 'Reorder Level' }),
new Input({ value: oProduct.ReorderLevel.toString(), liveChange: function (oEvent) { oProduct.ReorderLevel = parseFloat(oEvent.getParameter('value')); } })
]
})
],
beginButton: new Button({
text: 'Update',
press: function () {
// this.onUpdateProduct(oProduct);
oDialog.close();
MessageToast.show("Product Updated");
}.bind(this)
}),
endButton: new Button({
text: 'Cancel',
press: function () {
// Restore the original data on cancel
Object.assign(oProduct, oOriginalProduct);
oDialog.close();
}
}),
afterClose: function () {
oDialog.destroy();
}
});
oDialog.open();
},
onCreateProduct: function () {
var oDialog = new Dialog({
title: 'Add New Product',
type: 'Message',
content: [
new VBox({
items: [
new Label({ text: 'Product Name' }),
new Input({ id: "newProductName" }),
new Label({ text: 'Unit Price' }),
new Input({ id: "newProductPrice" }),
new Label({ text: 'Supplier ID' }),
new Input({ id: "newSupplierID" }),
new Label({ text: 'Category ID' }),
new Input({ id: "newCategoryID" }),
new Label({ text: 'Quantity Per Unit' }),
new Input({ id: "newQuantityPerUnit" }),
new Label({ text: 'Units InStock' }),
new Input({ id: "newUnitsInStock" }),
new Label({ text: 'Units OnOrder' }),
new Input({ id: "newUnitsOnOrder" }),
new Label({ text: 'Reorder Level' }),
new Input({ id: "newReorderLevel" })
]
})
],
beginButton: new Button({
text: 'Add',
press: function () {
this._addNewProduct();
oDialog.close();
}.bind(this)
}),
endButton: new Button({
text: 'Cancel',
press: function () {
oDialog.close();
}
}),
afterClose: function () {
oDialog.destroy();
}
});
oDialog.open();
},
_addNewProduct: function () {
var oProductsModel = this.getView().getModel("products");
var aProducts = oProductsModel.getProperty("/Products");
var sNewProductName = sap.ui.getCore().byId("newProductName").getValue();
var sNewProductPrice = sap.ui.getCore().byId("newProductPrice").getValue();
var sNewSupplierID = sap.ui.getCore().byId("newSupplierID").getValue();
var sNewCategoryID = sap.ui.getCore().byId("newCategoryID").getValue();
var sNewQuantityPerUnit = sap.ui.getCore().byId("newQuantityPerUnit").getValue();
var sNewUnitsInStock = sap.ui.getCore().byId("newUnitsInStock").getValue();
var sNewUnitsOnOrder = sap.ui.getCore().byId("newUnitsOnOrder").getValue();
var sNewReorderLevel = sap.ui.getCore().byId("newReorderLevel").getValue();
var iMaxProductID = 0;
// aProducts.forEach(function (oProduct){
// var iProductId = parseInt(oProduct.ProductID, 10);
// if(!isNaN(iProductId) && iProductId > iMaxProductID){
// iMaxProductID = iProductId;
// }
// });
var productIds = aProducts.map(function (oProduct){
return parseInt(oProduct.ProductID, 10) || 0;
});
iMaxProductID = Math.max(...productIds);
// "ProductID": aProducts.length + 1,
var oNewProduct = {
"ProductID": iMaxProductID + 1,
"ProductName": sNewProductName,
"SupplierID": sNewSupplierID,
"CategoryID": sNewCategoryID,
"QuantityPerUnit": sNewQuantityPerUnit,
"UnitPrice": parseFloat(sNewProductPrice),
"UnitsInStock": sNewUnitsInStock,
"UnitsOnOrder": sNewUnitsOnOrder,
"ReorderLevel": sNewReorderLevel,
"Discontinued": false
};
aProducts.push(oNewProduct);
oProductsModel.setProperty("/Products", aProducts);
MessageToast.show("New product added!");
},
onOpenVieweDialog: function (oEvent) {
if (this.globalProductId == null){
MessageToast.show("Please select a product to display.");
return;
}else{
this.getOwnerComponent().getRouter().navTo("productDetail", {
productId: this.globalProductId
});
}
},
// _createViewDialog: function (oProduct) {
// var oDialog = new Dialog({
// title: 'Display Product',
// type: 'Message',
// content: [
// new VBox({
// items: [
// new Label({ text: 'Product Name ' }),
// new Input({ value: oProduct.ProductName, enabled: false }),
// new Label({ text: 'Unit Price' }),
// new Input({ value: oProduct.UnitPrice, enabled: false }),
// new Label({ text: 'Supplier ID' }),
// new Input({ value: oProduct.SupplierID, enabled: false }),
// new Label({ text: 'Category ID' }),
// new Input({ value: oProduct.CategoryID, enabled: false }),
// new Label({ text: 'Quantity Per Unit' }),
// new Input({ value: oProduct.QuantityPerUnit, enabled: false }),
// new Label({ text: 'Units InStock' }),
// new Input({ value: oProduct.UnitsInStock, enabled: false }),
// new Label({ text: 'Units OnOrder' }),
// new Input({ value: oProduct.UnitsOnOrder, enabled: false }),
// new Label({ text: 'Reorder Level' }),
// new Input({ value: oProduct.ReorderLevel, enabled: false }),
// ],
// })
// ],
// endButton: new Button({
// text: 'Cancel',
// press: function () {
// oDialog.close();
// }
// }),
// afterClose: function () {
// oDialog.destroy();
// }
// });
// oDialog.open();
// },
onSearchProducts: function (oEvent) {
var sSearchValue = oEvent.getParameter("query").toLowerCase();
var oTable = this.getView().byId("productTable");
var oBinding = oTable.getBinding("items");
if (oBinding) {
var aFilters = [];
var sDataType = oBinding.oModel.getProperty("/Products/0/ProductName");
var sOperator = sDataType === "string" ? sap.ui.model.FilterOperator.Contains : sap.ui.model.FilterOperator.EQ;
if (sSearchValue) {
var oFilter = new sap.ui.model.Filter({
filters: [
new sap.ui.model.Filter("ProductName", sOperator, sSearchValue),
new sap.ui.model.Filter("ProductID", sOperator, sSearchValue),
],
and: false
});
aFilters.push(oFilter);
}
oBinding.filter(aFilters);
}
},
});
});Style.CSS
.rightAlignSearchField {
margin-left: auto;
}Manifest.JSON
{
"_version": "1.59.0",
"sap.app": {
"id": "imropro",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "0.0.1"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"resources": "resources.json",
"sourceTemplate": {
"id": "@sap/generator-fiori:basic",
"version": "1.11.5",
"toolsId": "9014c0ad-dede-45d8-b413-915d1f2de502"
},
"dataSources": {
"sData":{
"uri": "model/data.json",
"type": "JSON"
}}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"flexEnabled": true,
"dependencies": {
"minUI5Version": "1.120.1",
"libs": {
"sap.m": {},
"sap.ui.core": {},
"sap.f": {},
"sap.suite.ui.generic.template": {},
"sap.ui.comp": {},
"sap.ui.generic.app": {},
"sap.ui.table": {},
"sap.ushell": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "imropro.i18n.i18n",
"fallbackLocale": "en",
"supportedLocales": ["en"]
}
},
"products": {
"dataSource": "sData",
"preload": true,
"settings": {}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "imropro.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [
{
"name": "RouteView1",
"pattern": ":?query:",
"target": [
"TargetView1"
]
},
{
"pattern": "product/{productId}",
"name": "productDetail",
"target": "productDetail"
}
],
"targets": {
"TargetView1": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewId": "View1",
"viewName": "View1"
},
"productDetail": {
"viewId": "productDetail",
"viewName": "ProductDetail",
"viewLevel": 2,
"controlAggregation": "pages",
"transition": "slide",
"clearAggregation": true
}
}
},
"rootView": {
"viewName": "imropro.view.App",
"type": "XML",
"async": true,
"id": "App"
}
}
}
Useful links:
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/ov...
https://sapui5.hana.ondemand.com/#/demoapps
https://services.odata.org/northwind/northwind.svc/
- SAP Managed Tags:
4 Comments
