<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Seed App</title>
<!-- Bootstrap the UI5 core library -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/1.103.1/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-preload="async"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-onInit="module:wui/myapp/js/index"
data-sap-ui-resourceroots='{
"wui.myapp": "./webapp/"
}'
data-sap-ui-frameOptions="allow"> // NON-SECURE setting for testing environment
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content">
</body>
</html>
{
"_version": "1.14.0",
"sap.app": {
"id": "wui.myapp",
"type": "application",
"i18n": "",
"title": "UI5 Barcode Scanner Button",
"subTitle": "UI5 Barcode Scanner Button",
"shortTitle": "UI5 Barcode Scanner Button",
"info": "UI5 Barcode Scanner Button",
"description": "UI5 Barcode Scanner Button",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {},
"tags": {
"keywords": []
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "sap-icon://task",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_belize"
],
"fullWidth": false
},
"sap.ui5": {
"rootView": {
"viewName": "wui.myapp.view.App",
"type": "XML",
"id": "app"
},
"handleValidation": true,
"dependencies": {
"minUI5Version": "1.62.0",
"libs": {
"sap.ui.core": {
"minVersion": "1.62.0"
},
"sap.m": {
"minVersion": "1.62.0"
},
"sap.ndc": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {},
"resources" : {
"css" : [],
"js" : []
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "wui.myapp.view",
"controlId": "app",
"controlAggregation": "pages",
"clearControlAggregation": true,
"bypassed": {
"target": ["notFound"]
},
"async": true
},
"routes": [
{
"pattern": "",
"name": "home",
"target": ["homepage", "homepage-content", "homepage-headerContent"]
},
{
"pattern": "detail",
"name": "detail",
"target": ["detailpage", "detailpage-content", "detailpage-headerContent"
]
}
],
"targets": {
"homepage": {
"viewName": "Home",
"viewId": "home",
"viewPath": "wui.myapp.view.home",
"controlId": "app",
"controlAggregation": "pages",
"viewLevel": 1
},
"homepage-headerContent": {
"viewName": "Header",
"viewId": "home-header",
"viewPath": "wui.myapp.view.home",
"controlId": "homepage",
"viewLevel": 1,
"controlAggregation": "headerContent",
"parent": "homepage"
},
"homepage-content": {
"viewName": "Content",
"viewPath": "wui.myapp.view.home",
"viewId": "home-content",
"controlId": "homepage",
"viewLevel": 1,
"controlAggregation": "content",
"parent": "homepage"
},
"notFound": {
"viewName": "NotFound",
"viewId": "notFound"
}
}
}
}
}
sap.ui.define([
"wui/myapp/controller/BaseController",
"sap/base/Log"
], function (Controller, Log) {
"use strict";
var prefixId;
var oScanResultText;
return Controller.extend("wui.myapp.controller.home.Content", {
logger: Log.getLogger("Content.controller.js", Log.Level.INFO),
onInit: function () {
prefixId = this.createId();
debugger
if (prefixId){
prefixId = prefixId.split("--")[0] + "--";
} else {
prefixId = "";
}
oScanResultText = sap.ui.getCore().byId(prefixId + 'sampleBarcodeScannerResult');
},
onScanSuccess: function(oEvent) {
if (oEvent.getParameter("cancelled")) {
MessageToast.show("Scan cancelled", { duration:1000 });
} else {
if (oEvent.getParameter("text")) {
oScanResultText.setText(oEvent.getParameter("text"));
} else {
oScanResultText.setText('');
}
}
},
onScanError: function(oEvent) {
MessageToast.show("Scan failed: " + oEvent, { duration:1000 });
},
onScanLiveupdate: function(oEvent) {
// User can implement the validation about inputting value
},
onAfterRendering: function() {
// Reset the scan result
var oScanButton = sap.ui.getCore().byId(prefixId + 'sampleBarcodeScannerButton');
if (oScanButton) {
$(oScanButton.getDomRef()).on("click", function(){
oScanResultText.setText('');
});
}
}
});
});
sap.ui.define([
"wui/myapp/controller/BaseController",
"sap/base/Log"
], function (Controller, Log) {
"use strict";
return Controller.extend("wui.myapp.controller.home.Header", {
logger: Log.getLogger("Header.controller.js", Log.Level.INFO),
/**
* Lifecycle-Eventhandler: This function is called when the controller gets initialized.
*/
onInit: function () {
this.logger.info("Header.controller sucessfully initialized.", "onInit");
},
/**
* Eventhandler: button press event
*/
onButtonPressed: function(){
sap.m.MessageToast.show("Button pressed - event handeled by the wui.myapp.controller.home.Header controller");
}
});
});
sap.ui.define([
"wui/myapp/controller/BaseController",
"sap/base/Log"
],
function (BaseController, Log) {
"use strict";
/**
* The Home Controller class which contains eventhandler & logic for the Home.view.xml
*
* @class
* @name wui.myapp.controller.Home
* @extends wui.myapp.controller.Home
*/
return BaseController.extend("wui.myapp.controller.home.Home", {
logger: Log.getLogger("Header.controller.js", Log.Level.INFO),
/**
* Lifecycle method, called by the framework when initializing this controller
* @memberof wui.myapp.controller.Home
* @public
*/
onInit : function () {
this.logger.info("Home.controller sucessfully initialized.", "onInit");
}
});
});
sap.ui.define([
"wui/myapp/controller/BaseController",
"sap/ui/model/json/JSONModel"
], function (BaseController, JSONModel) {
"use strict";
/**
* The App Controller class which contains eventhandler & logic for the App.view.xml
*
* @class
* @name wui.myapp.controller.App
* @extends wui.myapp.controller.BaseController
*/
return BaseController.extend("wui.myapp.controller.App", {
/**
* Lifecycle method, called by the framework when initializing this controller
* @memberof wui.myapp.controller.App
* @public
*/
onInit : function () {
var oModel = new JSONModel({
busy : false,
delay : 0
});
this.getView().setModel(oModel, "appView");
// apply content density mode to root
this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
}
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History"
], function (Controller, History) {
"use strict";
/**
* The Apps parent Controller class which provides some fundamental coding which is used in more than one controller
*
* @class
* @name wui.myapp.controller.BaseController
* @extends sap.ui.core.mvc.Controller
*/
return Controller.extend("wui.myapp.controller.BaseController", {
/**
* Convenience method for accessing the router.
* @public
* @returns {sap.ui.core.routing.Router} the router for this component
* @memberof wui.myapp.controller.BaseController
*/
getRouter : function () {
return sap.ui.core.UIComponent.getRouterFor(this);
},
/**
* Convenience method for getting the view model by name.
* @public
* @param {string} sName the model name
* @returns {sap.ui.model.Model} the model instance
* @memberof wui.myapp.controller.BaseController
*/
getModel : function (sName) {
return this.getView().getModel(sName);
},
/**
* Convenience method for setting the view model.
* @public
* @param {sap.ui.model.Model} oModel the model instance
* @param {string} sName the model name
* @returns {sap.ui.mvc.View} the view instance
* @memberof wui.myapp.controller.BaseController
*/
setModel : function (oModel, sName) {
return this.getView().setModel(oModel, sName);
},
/**
* Getter for the resource bundle.
* @public
* @returns {sap.ui.model.resource.ResourceModel} the resourceModel of the component
* @memberof wui.myapp.controller.BaseController
*/
getResourceBundle : function () {
return this.getOwnerComponent().getModel("i18n").getResourceBundle();
},
/**
* Event handler for navigating back.
* It there is a history entry or an previous app-to-app navigation we go one step back in the browser history
* If not, it will navigate to the shell home
* @public
* @memberof wui.myapp.controller.BaseController
*/
onNavBack : function() {
var sPreviousHash = History.getInstance().getPreviousHash(),
oCrossAppNavigator = sap.ushell ? sap.ushell.Container.getService("CrossApplicationNavigation") : null;
if (sPreviousHash !== undefined || (oCrossAppNavigator && !oCrossAppNavigator.isInitialNavigation()) ) {
history.go(-1);
} else if (oCrossAppNavigator) {
oCrossAppNavigator.toExternal({
target: {shellHash: "#Shell-home"}
});
} else {
this.getRouter().navTo("home");
}
}
});
});
sap.ui.define([
"wui/myapp/controller/BaseController"
], function (BaseController) {
"use strict";
/**
* The NotFound Controller class which contains eventhandler & logic for the NotFound.view.xml
*
* @class
* @name wui.myapp.controller.NotFound
* @extends wui.myapp.controller.BaseController
*/
return BaseController.extend("wui.myapp.controller.NotFound", {
/**
* Eventhandler: Navigates to the worklist when the link is pressed
* @public
* @memberof wui.myapp.controller.NotFound
*/
onLinkPressed : function () {
this.getRouter().navTo("home");
}
});
});
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="wui.myapp.controller.home.Home">
<Page id="homepage" />
</mvc:View>
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:ndc="sap.ndc"
controllerName="wui.myapp.controller.home.Content">
<ndc:BarcodeScannerButton
id="sampleBarcodeScannerButton"
scanSuccess="onScanSuccess"
scanFail="onScanError"
inputLiveUpdate="onScanLiveupdate"
dialogTitle="Barcode Scanner Button Sample"
/>
<HBox class="sapUiTinyMarginTop">
<Label text="Scan Result:"/>
<Text id="sampleBarcodeScannerResult" text="" class="sapUiTinyMarginBegin"/>
</HBox>
</mvc:View>
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="wui.myapp.controller.home.Header">
</mvc:View>
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
controllerName="wui.myapp.controller.App"
displayBlock="true"
xmlns="sap.m">
<App
id="app"
busy="{appView>/busy}"
busyIndicatorDelay="{appView>/delay}"/>
</mvc:View>
<mvc:View
controllerName="wui.myapp.controller.NotFound"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<MessagePage
title="{i18n>notFoundTitle}"
text="{i18n>notFoundText}"
icon="{sap-icon://document}"
id="page"
description="">
<customDescription>
<Link
id="link"
text="{i18n>backToHome}"
press=".onLinkPressed" />
</customDescription>
</MessagePage>
</mvc:View>
sap.ui.define([
//"sap/ui/thirdparty/jquery",
"sap/base/Log",
"sap/ui/core/UIComponent",
"sap/ui/Device"
],
function ( /*jQuery,*/ Log, UIComponent, Device) {
"use strict";
/**
* The Apps root component which is the entry point when loading the UI5 application
*
* @class
* @name wui.myapp.Component
* @extends sap.ui.core.UIComponent https://sapui5.hana.ondemand.com/1.71.44/#/api/sap.ui.core.UIComponent
*/
return UIComponent.extend("wui.myapp.Component", {
metadata : {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* In this function, the FLP and device models are set and the router is initialized.
* @public
* @override
* @memberof wui.myapp.Component
*/
init : function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// create the views based on the url/hash
this.getRouter().initialize();
Log.info("Yayyy - wui.myapp.Component successfully initialized :-)");
},
/**
* This method can be called to determine whether the sapUiSizeCompact or sapUiSizeCozy
* design mode class should be set, which influences the size appearance of some controls.
* @public
* @return {string} css class, either 'sapUiSizeCompact' or 'sapUiSizeCozy' - or an empty string if no css class should be set
* @memberof wui.myapp.Component
*/
getContentDensityClass : function() {
if (this._sContentDensityClass === undefined) {
// check whether FLP has already set the content density class; do nothing in this case
if (document.body.classList.contains("sapUiSizeCozy") || document.body.classList.contains("sapUiSizeCompact")) {
this._sContentDensityClass = "";
} else if (!Device.support.touch) { // apply "compact" mode if touch is not supported
this._sContentDensityClass = "sapUiSizeCompact";
} else {
// "cozy" in case of touch support; default for most sap.m controls, but needed for desktop-first controls like sap.ui.table.Table
this._sContentDensityClass = "sapUiSizeCozy";
}
}
return this._sContentDensityClass;
}
});
});
sap.ui.define([
"sap/m/Shell",
"sap/ui/core/ComponentContainer",
"sap/base/Log"
], function (Shell, ComponentContainer, Log) {
"use strict";
Log.setLevel(Log.Level.ALL);
new Shell({
app: new ComponentContainer({
name : "wui.myapp"
})
}).placeAt("content");
});