I would like to use Classification component in my ui5 app.
The structure of the component looks as following:
I would like to pickup the classification component. The content of the Component-dbg.js looks as following:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/suite/ui/generic/template/extensionAPI/ReuseComponentSupport",
"sap/suite/ui/generic/template/extensionAPI/UIMode",
"sap/i2d/lo/lib/vchclf/common/Constants",
"sap/i2d/lo/lib/vchclf/components/classification/service/ClassificationService"
], function(UIComponent, ReuseComponentSupport, UIMode, Constants, ClassificationService) {
"use strict";
/**
* Classification Component.
* #class ClassificationComponent
* #extends sap.ui.core.UIComponent
*/
return UIComponent.extend("sap.i2d.lo.lib.vchclf.components.classification.Component", {
metadata: {
manifest: "json",
properties: {
uiMode: {
type: "string",
group: "standard",
defaultValue: "Display"
I would like to use it in my app and tried to bind in manifest file as following:
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
},
"components": {
"sap.i2d.lo.lib.vchclf.components.classification": {}
}
},
"componentUsages": {
"classcomponent": {
"name": "sap.i2d.lo.lib.vchclf.components.classification"
}
},
and I've got the following error:
Uncaught Error: failed to load 'sap/i2d/lo/lib/vchclf/components/classification/Component.js' from ../../resources/sap/i2d/lo/lib/vchclf/components/classification/Component.js: 404 - Not Found
What am I doing wrong?
Update
I also tried:
<mvc:View controllerName="ch.mindustrie.CLASSIFICATION.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<core:ComponentContainer id="classificationComponentContainer" name="sap.i2d.lo.lib.vchclf.components.classification" propagateModel="true"/>
</content>
</Page>
</pages>
</App>
</mvc:View>
and also got error message:
Related
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:core="sap.ui.core"
controllerName="z.controller.Main">
<Page id="page" title="ComboBox" >
<content>
<ComboBox name="Drop-down List" id="box0" items="{/country}">
<items >
<core:Item key="{Key}" text="{Name}" id="item0"/>
</items>
</ComboBox>
</content>
<Button text="Change" press="onChange"/>
</Page>
</mvc:View>
model1.json
{
"country": [{
"Key": "IN",
"Name": "India"
},
{
"Key": "US",
"Name": "USA"
},{
"Key": "UK",
"Name": "United Kingdom"
}]
}
model2.json
{
"country2": [{
"Key": "BD",
"Name": "Bangladesh"
},
{
"Key": "CA",
"Name": "Canada"
},{
"Key": "FR",
"Name": "France"
}]
}
Main.controller.js
sap.ui.define([
'sap/ui/core/mvc/Controller',
"sap/ui/model/json/JSONModel",
"z/models/model"
], function(Controller,JSONModel, localModel) {
'use strict';
return Controller.extend("z.controller.Main",{
onInit: function(){
var oModel = localModel.createJSONModel("models/data/model1.json");
sap.ui.getCore().setModel(oModel);
var oModel2 = localModel.createJSONModel("models/data/model2.json");
sap.ui.getCore().setModel(oModel2, "model2");
},
onChange: function(){
}
})
});
controller.js
sap.ui.define([
'sap/ui/core/mvc/Controller',
"sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
'use strict';
return {
createJSONModel: function(filePath){
var oModel = new JSONModel();
oModel.loadData(filePath);
return oModel;
}
}
});
I have two JSON models and building a combo list using aggregation binding(items="{/country}") by reading data from model1. I am trying to fill the same Combolist by reading the data from the model2 on a button press event.
You can switch the model by using it as a prefix model2> (as you have defined in the Main.controller.js in the onInit method) in the binding path:
onChange: function() {
var oComboBox = this.getView().byId("box0");
oComboBox.bindItems("model2>/country2", {
template: this.getView().byId("item0")
});
}
And change the aggregation from items to dependents.
<ComboBox name="Drop-down List" id="box0" items="{/country}">
<dependents>
<core:Item key="{Key}" text="{Name}" id="item0"/>
</dependents>
</ComboBox>
I am writing a simple application which aims to display the local data of a json file.
How can I sum the values from a column?
Expected effect:
enter image description here
Below are the files to recreate the case
V_Root.view.xml
<mvc:View controllerName="Nawigacja.ZNavigation.controller.V_Root" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<App id="V_Main">
<pages>
<Page title="Root View">
<content></content>
</Page>
</pages>
</App>
</mvc:View>
V_Source.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Nawigacja.ZNavigation.controller.V_Source"
xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<pages>
<Page title="Soruce View">
<content>
<VBox width="100%" direction="Column" id="__vbox0">
<items>
<Button text="Button 1" width="100px" id="__button2" press="GoToTarget_1"/>
<Button text="Button 2" width="100px" id="__button3" press="GoToTarget_2"/>
</items>
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>
V_Target_1.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Nawigacja.ZNavigation.controller.V_Target_1"
xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<pages>
<Page title="Target One" showNavButton="true" navButtonPress="GoOneScreenBack">
<content>
<ScrollContainer vertical="true" focusable="true" height="95%">
<Table id="namiot" items="{path: '/namiot'}">
<columns>
<Column width="12rem">
<Label text="Najem"/>
</Column>
<Column minScreenWidth="tablet" demandPopin="true">
<Label text="Price"/>
</Column>
<Column width="12rem">
<Label text="Total Cost"/>
<footer>
<Text text="Sum:"/>
</footer>
</Column>
</columns>
<ColumnListItem>
<Text text="{ProductType}"></Text>
<Text text="{ProductPrice}"></Text>
<Text text="{ProductTotal}"></Text>
</ColumnListItem>
</Table>
</ScrollContainer>
</content>
</Page>
</pages>
</App>
</mvc:View>
V_Root.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("Nawigacja.ZNavigation.controller.V_Root", {
onInit: function () {
}
});
});
V_Source.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("Nawigacja.ZNavigation.controller.V_Source", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf Nawigacja.ZNavigation.view.V_Source
*/
onInit: function () {
},
GoToTarget_1: function () {
// Now Get the Router Info
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
// Tell the Router to Navigate To Route_Tar_1
oRouter.navTo("Route_Tar_1", {});
},
GoToTarget_2: function () {
// Now Get the Router Info
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
// Tell the Router to Navigate To Route_Tar_2
oRouter.navTo("Route_Tar_2", {});
}
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* #memberOf Nawigacja.ZNavigation.view.V_Source
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* #memberOf Nawigacja.ZNavigation.view.V_Source
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* #memberOf Nawigacja.ZNavigation.view.V_Source
*/
// onExit: function() {
//
// }
});
});
V_Target_1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History",
"Nawigacja/ZNavigation/formatter/Formatter"
], function (Controller, History,formatter) {
"use strict";
return Controller.extend("Nawigacja.ZNavigation.controller.V_Target_1", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf Nawigacja.ZNavigation.view.V_Target_1
*/
onInit: function () {
var oTable = this.getView().byId("namiot");
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("model/namiot.json");
oTable.setModel(oModel);
},
GoOneScreenBack: function (Evt) {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
// Go one screen back if you find a Hash
if (sPreviousHash !== undefined) {
window.history.go(-1);
}
// If you do not find a correct Hash, go to the Source screen using default router;
else {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("", true);
}
},
formatter: formatter
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* #memberOf Nawigacja.ZNavigation.view.V_Target_1
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* #memberOf Nawigacja.ZNavigation.view.V_Target_1
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* #memberOf Nawigacja.ZNavigation.view.V_Target_1
*/
// onExit: function() {
//
// }
});
});
models.js
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/Device"
], function (JSONModel, Device) {
"use strict";
return {
createDeviceModel: function () {
var oModel = new JSONModel(Device);
oModel.setDefaultBindingMode("OneWay");
return oModel;
}
};
});
manifest.json
{
"_version": "1.12.0",
"sap.app": {
"id": "Nawigacja.ZNavigation",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"flexEnabled": false,
"rootView": {
"viewName": "Nawigacja.ZNavigation.view.V_Root",
"type": "XML",
"async": true,
"id": "V_Root"
},
"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "Nawigacja.ZNavigation.i18n.i18n"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "Nawigacja.ZNavigation.view",
"controlAggregation": "pages",
"controlId": "V_Main",
"clearControlAggregation": false,
"viewLevel": 1
},
"routes": [{
"name": "Route_Source",
"pattern": "",
"target": ["Target_Source"],
"titleTarget": ""
}, {
"name": "Route_Tar_1",
"pattern": "V_Target_1",
"titleTarget": "",
"greedy": false,
"target": ["Target_1"]
}, {
"name": "Route_Tar_2",
"pattern": "V_Target_2",
"titleTarget": "",
"greedy": false,
"target": ["Target_2"]
}],
"targets": {
"Target_1": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "V_Target_1",
"viewLevel": 2
},
"Target_2": {
"viewType": "XML",
"transition": "slide",
"clearAggregation":"true",
"viewName": "V_Target_2",
"viewLevel": 2
},
"Target_Source": {
"viewType": "XML",
"clearAggregation":"true",
"viewName": "V_Source",
"viewLevel": 1
}
}
}
}
}
namiot.json
{
"namiot":[
{
"ProductName": "Product1",
"ProductType": "Type1",
"ProductPrice": "25",
"ProductTotal": "5000",
"Productadd": "",
"ProductaddPr":""
},
{
"ProductName": "Product2",
"ProductType": "Type2",
"ProductPrice": "25",
"ProductTotal": "5000",
"Productadd": "",
"ProductaddPr":""
}
]
}
there are probably x options to realize this.
You could use the method attachUpdateFinished which will be called when the Tablebinding get's updated (the table receives the Items). Then you can summarize the values and store it in an JSONModel and bind it to the footertext. When the binding (the items) change the sum would be updated.
oTable.attachUpdateFinished(function (oEvt) {
var iSum = 0;
var aItems = oEvt.getSource().getItems();
for (var i = 0; i < aItems.length; i++) {
var oItem = aItems[i].getBindingContext().getObject();
iSum = iSum + parseFloat(oItem.ProductTotal);
}
//Do whatever you want with the iSum
});
Here's an example how it could be realized.
Code Sample
I am new to SAPUI5. I am trying to load a JSON Model from Manifest file and send JSON object as a parameter through Routing and Navigation.
I have only one view and in that i am trying to bind data in a simple form. I am getting one error :
View1.controller.js?eval:8 Uncaught (in promise) TypeError: Cannot
read property ‘getModel’ of undefined
Kindly help me in resolving the error.
Manifest.json
{
"_version": "1.8.0",
"sap.app": {
"_version": "1.3.0",
"id": "com.newproject.firstsapui5project",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
},
"dataSources": {
"data": {
"type" : "JSON",
"uri": "model/data.json"
}
}
},
"sap.ui": {
"_version": "1.3.0",
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"_version": "1.2.0",
"rootView": {
"viewName": "com.newproject.firstsapui5project.view.View1",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.60.1",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.newproject.firstsapui5project.i18n.i18n"
}
},
"simpleForm": {
"type": "sap.ui.model.json.JSONModel",
"dataSource" : "data"
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "com.newproject.firstsapui5project.view",
"controlAggregation": "pages",
"controlId": "idAppControl",
"clearControlAggregation": false
},
"routes": [{
"name": "RouteView1",
"pattern": "RouteView1",
"target": ["TargetView1"]
}],
"targets": {
"TargetView1": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "View1"
}
}
}
}
}
View1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
var oController= Controller.extend("com.newproject.firstsapui5project.controller.View1", {
onInit: function () {
var dataModel = this.getOwnerComponent().getModel("simpleForm");
this.getView().setModel(dataModel, "DataModel");
}
});
return oController;
});
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"com/newproject/firstsapui5project/model/models"
], function (UIComponent, Device, models) {
"use strict";
var Component = UIComponent.extend("com.newproject.firstsapui5project.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* #public
* #override
*/
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
this.setModel(models.createDeviceModel(), "device");
this.getRouter().initialize();
}
});
return Component;
});
data.json
{"Form" : [{
"first":"tom",
"lastname":"butler",
"height": "6foot",
"gender":"Male"
}]
}
View1.view.xml
<mvc:View controllerName="com.newproject.firstsapui5project.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.ui.layout.form" displayBlock="true" xmlns="sap.m">
<App id="idAppControl">
<pages>
<Page title="My First sapui5 Project">
<content>
<f:SimpleForm id="idSimpleForm" editable="true" layout="ResponsiveGridLayout" title='TEST Form'>
<f:content>
<Label text="First Name"/>
<Input value="simpleForm>/Form/0/first" />
<Label text="Last Name"/>
<Input value="{simpleForm>/Form/0/lastname}">
</Input>
</f:content>
</f:SimpleForm>
</content>
</Page>
</pages>
</App>
</mvc:View>
model.js
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/Device"
], function (JSONModel, Device) {
"use strict";
return {
createDeviceModel: function () {
var oModel = new JSONModel(Device);
oModel.setDefaultBindingMode("OneWay");
return oModel;
}
};
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>firstsapui5project</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-async="true"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-language="en"
data-sap-ui-xx-componentPreload="off"
data-sap-ui-resourceroots='{"com.newproject.firstsapui5project": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
/* new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "com.newproject.firstsapui5project"
})
}).placeAt("content");*/
var app = new sap.m.App({initialPage:"idView1"});
var page1 = sap.ui.view({id:"idView1", viewName:"com.newproject.firstsapui5project.view.View1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page1);
// app.addDetailPage(page2);
app.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
View1 is not being initialized by a Component, thus an owner can't be determined. Instead of explicitly creating a view and putting it into DOM (index.html), create a sap.m.Shell as it's done in commented code. Shell would create a component which would create a root view that's specified in manifest.json.
I am trying to show the data of a particular item in a list when ,clicked upon , on the next page (view)
Here Overview.view.xml is the default view with a clickable list connected to an oData model.
Next is the controller for Overview navigating to the next page i.e. Overview.controller.js.
The next page is Detail.view.xml
I want to show details of clicked item in this page.
#Overview.view.xml
<mvc:View controllerName="root.demo.controller.Overview" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m">
<App >
<pages>
<Page title="{i18n>title}">
<content>
<List headerText="list" class="sapUiResponsiveMargin" width="auto" items="{HANA>/person}">
<items>
<ObjectListItem title="{HANA>ID} x {HANA>FIRSTNAME}" type="Navigation" press="onPress"/>
</items>
</List>
</content>
</Page>
</pages>
</App>
</mvc:View>
#Overview.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("root.demo.controller.App", {
onPress: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail");
}
});
});
#Detail.view.xml
<mvc:View xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page title="{i18n>detailPageTitle}">
<ObjectStatus title="PAGE 1"
/>
</Page>
</mvc:View>
If you have different Entity Sets with association you need to send the key of the association to the second view and there create the binding towards the assocaited entity set
If not you need to send the object to the second view
Either way you need to navigate with parameters
In the manifest file you need to specify the routing
"routes": [
{
"name": "TargetMaster",
"pattern": "RouteMaster",
"target": [
"TargetMaster"
]
},
{
"pattern": "Detail/{storePath}",
"name": "Detail",
"target": "Detail"
}
],
"targets": {
"TargetMaster": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "Master"
},
"Detail": {
"viewType": "XML",
"viewName": "Detail"
}
}
In the Overview Controller you need to create the navigation similarly to
onListItemPress: function(oEvent){
var oItem = oEvent.getSource();
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("Detail",{
storePath: oItem.getBindingContext().getProperty("Store")
});
}
you can find more information on the official documentation here
I want to create a customized SAP launchpad. For that I need to use sap.ui.unified.Shell as the container. It is possible to load some oControlls inside of the content of this shell. Now my question is how can I use routing inside of this shell container and load the other views inside of this shell? Or maybe how can I connect sap router for loading data inside of the shell container?
Here is a good example about how to load different views inside of the unified shell:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Column Micro Chart on a Generic Tile</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{
"Testing": "./"
}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.ui.core.ComponentContainer({
height : "100%",
name : "Testing"
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
Component.js
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = sap.ui.core.UIComponent.extend("Testing.Component", {
metadata: {
rootView: "Testing.view.App",
dependencies: {
libs: [
"sap.m",
"sap.suite.ui.microchart"
]
},
config: {
sample: {
files: [
"view/App.view.xml",
"controller/App.controller.js"
]
}
},
routing: {
config: {
viewType: "XML",
viewPath: "Testing.view",
controlId: "appShell",
clearTarget: true,
routerClass: "sap.ui.core.routing.Router"
},
routes: [{
pattern: "",
name: "home",
target: "home"
},
{
pattern: "routed",
name: "routed",
target: "routed"
}
],
targets: {
home: {
viewName: "Home",
controlId: "appShell",
controlAggregation: "content",
clearAggregation: true
},
routed: {
viewName: "Routed",
controlId: "appShell",
controlAggregation: "content",
clearAggregation: true
}
}
}
},
init: function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// this component should automatically initialize the router
this.getRouter().initialize();
}
});
return Component;
});
controller/App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Testing.controller.App", {
onInit: function() {
}
});
});
controller/Home.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Testing.controller.Home", {
onInit: function() {
},
onButtonPress: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
this.getView().getParent().removeAllContent();
oRouter.navTo("routed", false);
}
});
});
controller/Routed.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("Testing.controller.Routed", {
onInit: function() {
},
onButtonPress: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
this.getView().getParent().removeAllContent();
oRouter.navTo("home", false);
}
});
});
view/App.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:u="sap.ui.unified" controllerName="Testing.controller.App" displayBlock="true">
<u:Shell id="appShell">
<u:headItems>
<u:ShellHeadItem tooltip="Configuration" icon="sap-icon://menu2"
press="handlePressConfiguration" />
<u:ShellHeadItem tooltip="Home" icon="sap-icon://home"
press="handlePressHome" />
</u:headItems>
<u:user>
<u:ShellHeadUserItem image="sap-icon://person-placeholder"
username="{shell>/userName}" />
</u:user>
<u:paneContent>
</u:paneContent>
<u:content>
</u:content>
</u:Shell>
</mvc:View>
view/Home.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="Testing.controller.Home" displayBlock="true">
<Page title="Home">
<headerContent>
<Button text="to route" press="onButtonPress" />
</headerContent>
<content>
</content>
</Page>
</mvc:View>
view/Routed.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="Testing.controller.Routed" displayBlock="true">
<Page title="A route">
<headerContent>
<Button text="to home" press="onButtonPress" />
</headerContent>
<content>
</content>
</Page>
</mvc:View>