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>
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 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 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:
My question refers specifically to http://api.jquery.com/event.target/#example-1
If you use a span in the <li> or other tag to change the style such as <b> as I have done here, that part of the element won't trigger the JQuery function to toggle it's children. How might one go about making this work?
HTML:
<ul>
<li><b>This doesn't work,</b> this does
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
JavaScript:
function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children("ul").toggle();
}
}
$("ul").click(handler).find("ul").hide();
To keep using your current form, I'd suggest using closest():
function handler(event) {
$(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();
JS Fiddle demo.
Though for my own use I'd prefer:
$('li').on('click', function(e){
e.stopPropagation();
$(this).find('ul').toggle();
});
JS Fiddle demo.
References:
closest().
on().
A complete example of e.target children and closest with datatable and external data.
HtML
<!DOCTYPE html>
<html lang="en">
<head>
<title>example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="col-md-12 sectionone">
<div id="coxtable">
<div class="col-md-3 outerblock" id="section1"><div class="blocks section1"><h6 class="span1">Section1</h6><span class="span1a">Section1a</span></div></div>
<div class="col-md-3 outerblock" id="section2"><div class="blocks section2"><h6 class="span1">Section2</h6><span class="span1a">Section2a</span></div></div>
<div class="col-md-3 outerblock" id="section3"><div class="blocks section3"><h6 class="span1">Section3</h6><span class="span1a">Section3a</span></div></div>
<div class="col-md-3 outerblock" id="section4"><div class="blocks section4"><h6 class="span1">Section4</h6><span class="span1a">Section4a</span></div></div>
</div>
</div>
<div class="sectiontwo col-md-12">
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="testmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="modalbtn btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
$(document).ready( function () {
var tables=$('#example').DataTable( {
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
/*onclick filter*/
$(".outerblock").click(function(e){
$("#testmodal").modal('show');
var item=$(e.target).closest('span').text();
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item)
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
$("#example").delegate("tbody tr td:first-child", "click", function(e){
var item=$(e.target).text();
//alert(item);
$("#testmodal").modal('show');
$( ".modalbtn" ).one( "click", function(event) {
$(this).off(event);
alert(item);
var tables=$('#example').DataTable( {
"destroy":true,
"ajax": {
"type" : "POST",
"url": "http://localhost/example/json/members.json?id="+item,
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : json[i].stargazerscount,
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
$('.overlay').hide();
$(".loader").hide();
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
});
});
});
json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
}
]