Skip to content

Instantly share code, notes, and snippets.

@sliwkawsieci
Last active May 23, 2016 13:15
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
<SplitApp id="idAppControl" />
</mvc:View>
jQuery.sap.declare("ksl.md1.Component");
jQuery.sap.require("ksl.md1.MyRouter");
sap.ui.core.UIComponent.extend("ksl.md1.Component", {
metadata : {
name : "TDG Demo App",
version : "1.0",
includes : [],
dependencies : {
libs : ["sap.m", "sap.ui.layout"],
components : []
},
rootView : "ksl.md1.view.App",
config : {
resourceBundle : "i18n/messageBundle.properties",
serviceConfig : {
name : "Northwind",
serviceUrl : "http://services.odata.org/V2/(S(sapuidemotdg))/OData/OData.svc/"
}
},
routing : {
config : {
routerClass : ksl.md1.MyRouter,
viewType : "XML",
viewPath : "ksl.md1.view",
targetAggregation : "detailPages",
clearTarget : false
},
routes : [
{
pattern : "",
name : "main",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idAppControll",
subroutes : [
{
pattern : "{product}/:tab:",
name : "product",
view : "Detail"
}
]
},
{
name : "catchallMaster",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idAppControl",
subroutes : [
{
pattern : ":all*:",
name : "catchallDetail",
view : "NotFound"
}
]
}
]
}
},
init : function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
var mConfig = this.getMetadata().getConfig();
// always use absolute paths relative to our own component
// (relative paths will fail if running in the Fiori Launchpad)
var rootPath = jQuery.sap.getModulePath("ksl.md1");
// set i18n model
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : [rootPath, mConfig.resourceBundle].join("/")
});
this.setModel(i18nModel, "i18n");
// Create and set domain model to the component
var sServiceUrl = mConfig.serviceConfig.serviceUrl;
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
this.setModel(oModel);
// set device model
var deviceModel = new sap.ui.model.json.JSONModel({
isTouch : sap.ui.Device.support.touch,
isNoTouch : !sap.ui.Device.support.touch,
isPhone : sap.ui.Device.system.phone,
isNoPhone : !sap.ui.Device.system.phone,
listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
});
deviceModel.setDefaultBindingMode("OneWay");
this.setModel(deviceModel, "device");
this.getRouter().initialize();
},
});
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<script id="sap-ui-bootstrap"
src="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-resourceroots='{
"ksl.md1": "./"
}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "ksl.md1"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
jQuery.sap.require("ksl.md1.util.Formatter");
sap.ui.core.mvc.Controller.extend("ksl.md1.view.Master", {
onInit : function() {
this.oUpdateFinishedDeferred = jQuery.Deferred();
this.getView().byId("list").attachEventOnce("updateFinished", function() {
this.oUpdateFinishedDeferred.resolve();
}, this);
sap.ui.core.UIComponent.getRouterFor(this).attachRouteMatched(this.onRouteMatched, this);
},
onRouteMatched : function(oEvent) {
var oList = this.getView().byId("list");
var sName = oEvent.getParameter("name");
var oArguments = oEvent.getParameter("arguments");
// Wait for the list to be loaded once
jQuery.when(this.oUpdateFinishedDeferred).then(jQuery.proxy(function() {
var aItems;
// On the empty hash select the first item
if (sName === "main") {
this.selectDetail();
}
// Try to select the item in the list
if (sName === "product") {
aItems = oList.getItems();
for (var i = 0; i < aItems.length; i++) {
if (aItems[i].getBindingContext().getPath() === "/" + oArguments.product) {
oList.setSelectedItem(aItems[i], true);
break;
}
}
}
}, this));
},
selectDetail : function() {
if (!sap.ui.Device.system.phone) {
var oList = this.getView().byId("list");
var aItems = oList.getItems();
if (aItems.length && !oList.getSelectedItem()) {
oList.setSelectedItem(aItems[0], true);
this.showDetail(aItems[0]);
}
}
},
onSearch : function() {
// add filter for search
var filters = [];
var searchString = this.getView().byId("searchField").getValue();
if (searchString && searchString.length > 0) {
filters = [ new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.Contains, searchString) ];
}
// update list binding
this.getView().byId("list").getBinding("items").filter(filters);
},
onSelect : function(oEvent) {
// Get the list item, either from the listItem parameter or from the event's
// source itself (will depend on the device-dependent mode).
this.showDetail(oEvent.getParameter("listItem") || oEvent.getSource());
},
showDetail : function(oItem) {
// If we're on a phone, include nav in history; if not, don't.
var bReplace = jQuery.device.is.phone ? false : true;
sap.ui.core.UIComponent.getRouterFor(this).navTo("product", {
from: "master",
product: oItem.getBindingContext().getPath().substr(1),
tab: "supplier"
}, bReplace);
},
onAddProduct : function() {
sap.ui.core.UIComponent.getRouterFor(this).myNavToWithoutHash({
currentView : this.getView(),
targetViewName : "ksl.md1.view.AddProduct",
targetViewType : "XML",
transition : "slide"
});
}
});
<!DOCTYPE xml>
<mvc:View
controllerName="ksl.md1.view.Master"
displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page
id="page"
title="{i18n>masterTitle}">
<subHeader>
<Bar id="searchBar">
<contentMiddle>
<SearchField
id="searchField"
showRefreshButton="{device>/isNoTouch}"
search="onSearch"
tooltip="{i18n>masterSearchTooltip}"
width="100%">
</SearchField>
</contentMiddle>
</Bar>
</subHeader>
<content>
<List
id="list"
items="{/AbsenceForms}"
mode="{device>/listMode}"
noDataText="{i18n>masterListNoDataText}"
select="onSelect"
growing="true"
growingScrollToLoad="true">
<items>
<ObjectListItem
type="{device>/listItemType}"
press="onSelect"
title="{Name}"
number="{
path: 'Abshours1',
formatter: 'ksl.md1.util.Formatter.currencyValue'
}"
numberUnit="Hours">
</ObjectListItem>
</items>
</List>
</content>
<footer>
<Bar>
<contentRight>
<Button
icon="sap-icon://add"
tooltip="{i18n>masterFooterAddButtonTooltip}"
press="onAddProduct" />
</contentRight>
</Bar>
</footer>
</Page>
</mvc:View>
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.declare("ksl.md1.MyRouter");
sap.ui.core.routing.Router.extend("ksl.md1.MyRouter", {
constructor : function() {
sap.ui.core.routing.Router.apply(this, arguments);
this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this);
},
myNavBack : function(sRoute, mData) {
var oHistory = sap.ui.core.routing.History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
// The history contains a previous entry
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
var bReplace = true; // otherwise we go backwards with a forward history
this.navTo(sRoute, mData, bReplace);
}
},
/**
* @public Changes the view without changing the hash
*
* @param oOptions {object} must have the following properties
* <ul>
* <li> currentView : the view you start the navigation from.</li>
* <li> targetViewName : the fully qualified name of the view you want to navigate to.</li>
* <li> targetViewType : the viewtype eg: XML</li>
* <li> isMaster : default is false, true if the view should be put in the master</li>
* <li> transition : default is "show", the navigation transition</li>
* <li> data : the data passed to the navContainers livecycle events</li>
* </ul>
*/
myNavToWithoutHash : function (oOptions) {
var oSplitApp = this._findSplitApp(oOptions.currentView);
// Load view, add it to the page aggregation, and navigate to it
var oView = this.getView(oOptions.targetViewName, oOptions.targetViewType);
oSplitApp.addPage(oView, oOptions.isMaster);
oSplitApp.to(oView.getId(), oOptions.transition || "show", oOptions.data);
},
backWithoutHash : function (oCurrentView, bIsMaster) {
var sBackMethod = bIsMaster ? "backMaster" : "backDetail";
this._findSplitApp(oCurrentView)[sBackMethod]();
},
destroy : function() {
sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments);
this._oRouteMatchedHandler.destroy();
},
_findSplitApp : function(oControl) {
sAncestorControlName = "idAppControl";
if (oControl instanceof sap.ui.core.mvc.View && oControl.byId(sAncestorControlName)) {
return oControl.byId(sAncestorControlName);
}
return oControl.getParent() ? this._findSplitApp(oControl.getParent(), sAncestorControlName) : null;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment