In the SAP Web IDE Workspace we can see all files that our Fiori project inludes.
Open Component.js file.
Component.js is the first point of our application, we can say that it serves as index which encapsulates all our applications details, i.e. view names, routing details, main view, applications type(Full Screen or SplitApp), application service configuration etc..
Here in init function we will configure our plugin. Set properties that we need, set callback functions, call some methods, etc..
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"MyFirstFioriApp/MyFirstFioriApp/model/models"
], function (UIComponent, Device, models) {
"use strict";
var oEventBus = sap.ui.getCore().getEventBus();
var scannerIsInitialized = false;
return UIComponent.extend("MyFirstFioriApp.MyFirstFioriApp.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);
// enable routing
this.getRouter().initialize();
// set the device model
this.setModel(models.createDeviceModel(), "device");
if (!scannerIsInitialized) {
scannerIsInitialized = true;
window.readerConnected = 0;
window.scannerActive = false;
cmbScanner.addOnResume(function (result) {
cmbScanner.setAvailabilityCallback((readerAvailability) => {
if (readerAvailability === cmbScanner.CONSTANTS.AVAILABILITY_AVAILABLE) {
oEventBus.publish("ScanView", "SetConnectionStatus", {
statusText: "AVAILABLE"
});
cmbScanner.connect((result) => {});
} else {
oEventBus.publish("ScanView", "SetConnectionStatus", {
statusText: "NOT AVAILABLE"
});
}
});
if (Device.os.android) {
cmbScanner.connect((result) => {});
}
});
cmbScanner.addOnPause(function (result) {
if (Device.os.android) {
cmbScanner.disconnect();
}
cmbScanner.setAvailabilityCallback();
});
cmbScanner.setPreviewContainerPositionAndSize(0, 0, 100, 50);
cmbScanner.setConnectionStateDidChangeOfReaderCallback((connectionState) => {
if (connectionState === cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED) {
oEventBus.publish("ScanView", "SetConnectionStatus", {
statusText: "CONNECTED"
});
if (window.readerConnected != connectionState) {
cmbScanner.setSymbologyEnabled("SYMBOL.DATAMATRIX", true);
cmbScanner.setSymbologyEnabled("SYMBOL.C128", true);
cmbScanner.sendCommand("SET TRIGGER.TYPE 2");
}
} else if (connectionState == cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTED) {
oEventBus.publish("ScanView", "SetConnectionStatus", {
statusText: "DISCONNECTED"
});
} else if (connectionState == cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTING) {
oEventBus.publish("ScanView", "SetConnectionStatus", {
statusText: "CONNECTING"
});
} else if (connectionState == cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTING) {
oEventBus.publish("ScanView", "SetConnectionStatus", {
statusText: "DISCONNECTING"
});
}
window.readerConnected = connectionState;
});
cmbScanner.setAvailabilityCallback((readerAvailability) => {
if (readerAvailability === cmbScanner.CONSTANTS.AVAILABILITY_AVAILABLE) {
oEventBus.publish("ScanView", "SetConnectionStatus", {
statusText: "AVAILABLE"
});
cmbScanner.connect((result) => {});
} else {
oEventBus.publish("ScanView", "SetConnectionStatus", {
statusText: "NOT AVAILABLE"
});
}
});
cmbScanner.setActiveStartScanningCallback((result) => {
if (result === true)
window.scannerActive = true;
else
window.scannerActive = false;
});
cmbScanner.setPreviewOptions(cmbScanner.CONSTANTS.PREVIEW_OPTIONS.DEFAULTS | cmbScanner.CONSTANTS.PREVIEW_OPTIONS.HARDWARE_TRIGGER);
cmbScanner.setCameraMode(cmbScanner.CONSTANTS.CAMERA_MODES.NO_AIMER);
var sdkKEY = "";
if (Device.os.android)
sdkKEY = this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_ANDROID");
else
sdkKEY = this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_iOS");
cmbScanner.registerSDK(sdkKEY);
cmbScanner.loadScanner(0, (result) => {
cmbScanner.connect((result) => {});
});
oEventBus.subscribe("Component", "LoadScanner", this.loadScanner, this);
}
},
loadScanner: function (sChanel, sEvent, oData) {
cmbScanner.disconnect((result) => {
cmbScanner.loadScanner(oData.selectedDevice, (result) => {
cmbScanner.connect((result) => {});
});
});
},
onExit: function () {
oEventBus.unsubscribe("Component", "LoadScanner", this.loadScanner, this);
cmbScanner.disconnect();
cmbScanner.setAvailabilityCallback();
}
});
});
cmbScanner is an object that represents our plugin. With this object we can access all API methods and Constants from our plugin.
- scannerIsInitialized - variable to make sure that we set some functions for initialization only one time
- window.readerConnected - global variable that is changed every time when the reader connection state is changed
- window.scannerActive - global variable that shows us if scanning is active or not
- cmbScanner.addOnPause - in this method we disconnection from reader device on Android (on iOS this is handled automatically), and stop listening to availability changing
- cmbScanner.addOnResume - in this method we try to connect with reader device again and set callback for availability changing
- cmbScanner.setPreviewContainerPositionAndSize - to set the size and position of the preview container. Learn more here.
- cmbScanner.setConnectionStateDidChangeOfReaderCallback - all connect/disconnect events should be handled within the callback function set with this API method. If connection state is connected we set some reader device settings with API methods or directly with sendCommand() method. Here in this example we enable symbologies and set trigger type. Also here we should Licensing the SDK. We will speak about this later in this section
- cmbScanner.setAvailabilityCallback - to monitor for availability of the MX device. If MX device is available we try to connect. Learn more here.
- cmbScanner.setActiveStartScanningCallback - to monitor the state of the scanner. Learn more here.
- cmbScanner.loadScanner - to get a scanner up and running. Learn more here.
Here we are only configuring reader device, handling connections, availability, etc.. We will do scanning and getting results in other views. If we want to notify users about every connection state changed or other info about reader device we will be using EventBus sap object. With this object we can publish function and call them from any view in the application. In this example on connection state changed with EventBus we are calling SetConnectionStatus function that is implemented in view where scanning is performed and set label text to show user current connection state.
Now open ScanView.view.xml and add this code:
<mvc:View controllerName="MyFirstFioriApp.MyFirstFioriApp.controller.ScanView" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
xmlns:core="sap.ui.core">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<subHeader>
<Toolbar id="__toolbar2" width="100%">
<content>
<FlexBox id="__box0" width="100%" alignContent="Center" alignItems="Start" direction="Column" fitContainer="true" justifyContent="Center">
<items>
<Select id="selectActiveDevice" items="{/Devices}" textAlign="Center" selectedKey="0" change="activeDeviceChanged">
<core:Item text="{text}" key="{key}"/>
</Select>
</items>
</FlexBox>
<Label id="lblStatus" text="DISCONNECTED" width="100%" textAlign="End" design="Bold"/>
</content>
</Toolbar>
</subHeader>
<content>
<FlexBox id="flexBoxContainer" width="100%" alignContent="Start" alignItems="Start" direction="Column" fitContainer="true"/>
</content>
<footer>
<Toolbar id="__toolbar1" width="100%">
<content>
<Button id="btnScan" press="btnScanPress" text="Scan" width="100%"/>
</content>
</Toolbar>
</footer>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
You can design view with CodeEditor or with LayoutEditor.
After that open ScanView.controller.js and add this code
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
var oEventBus = sap.ui.getCore().getEventBus();
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
Devices: [{
key: "0",
text: "MX Device"
}, {
key: "1",
text: "Mobile Camera"
}]
});
return Controller.extend("MyFirstFioriApp.MyFirstFioriApp.controller.ScanView", {
onInit: function () {
this.getView().setModel(oModel);
},
onAfterRendering: function () {
window.scannerActive = false;
switch (window.readerConnected) {
case cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED:
this.getView().byId("lblStatus").setText("CONNECTED");
break;
case cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTED:
this.getView().byId("lblStatus").setText("DISCONNECTED");
break;
case cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTING:
this.getView().byId("lblStatus").setText("CONNECTING");
break;
case cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTING:
this.getView().byId("lblStatus").setText("DISCONNECTING");
break
default:
this.getView().byId("lblStatus").setText("UNKNOWN");
break;
}
oEventBus.subscribe("ScanView", "SetConnectionStatus", this.setConnectionStatus, this);
cmbScanner.setResultCallback((result) => {
if(result && result.readResults && result.readResults.length > 0){
result.readResults.forEach((item, index) => {
if (item.goodRead == true) {
//Perform some action on barcode read
//example:
var verticalLayoutContainer = new sap.ui.layout.VerticalLayout(null, {
width: "100%"
}).addStyleClass("sapUiSmallMarginTop");
verticalLayoutContainer.addContent(new sap.m.Label({
text: item.symbologyString + ":",
textAlign: "Begin",
design: "Bold"
}).addStyleClass("sapUiSmallMarginBegin"));
verticalLayoutContainer.addContent(new sap.m.Text({
text: item.readString,
textAlign: "Begin"
}).addStyleClass("sapUiSmallMarginBegin"));
this.getView().byId("flexBoxContainer").addItem(verticalLayoutContainer);
}
else{
//Perform some action when no barcode is read or just leave it empty
}
});
}
});
},
btnScanPress: function () {
if (window.readerConnected === cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED) {
if (window.scannerActive === true) {
cmbScanner.stopScanning();
} else {
cmbScanner.startScanning();
}
}
},
setConnectionStatus: function (sChanel, sEvent, oData) {
this.getView().byId("lblStatus").setText(oData.statusText);
},
activeDeviceChanged: function () {
cmbScanner.disconnect((result) => {
oEventBus.publish("Component", "LoadScanner", {
selectedDevice: parseInt(this.getView().byId("selectActiveDevice").getSelectedKey())
});
});
},
onExit: function () {
oEventBus.unsubscribe("ScanView", "SetConnectionStatus", this.setConnectionStatus, this);
if (window.readerConnected === cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED) {
if (window.scannerActive === true) {
cmbScanner.stopScanning();
}
}
cmbScanner.setResultCallback((result) => {
return false;
});
}
});
});
In this view we have a Scan button to startScanning()/stopScanning() and cmbScanner.setResultCallback to handle successful scan results.
