UI5 pass parameter variable from a View to oData service and bind response model to Details View

[brian_mogambi]

Hi,

I'm developing a Barcode scanning UI5 app with 2 views and controllers and consuming an oData service.

The first view contains the BarcodeScannerButton control, to get the barcode value(Material Number) and call the oData service to get more material details and display on the next view.

I can't figure out how to pass the scanned material number to the oData service and bind it to the form inputs in the next details view. The code is as below:

Manifest.json

<strong>"dataSources": {
            "mainService": {
                "uri": "/sap/opu/odata/sap/ZMM_PROJECT_INVENTORY_BARCODE_SRV/",
                "type": "OData",
                "settings": {
                    "annotations": [],
                    "localUri": "localService/metadata.xml",
                    "odataVersion": "2.0"
                }
            }
        },
"models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "com.safalgroup.barcodescanner.barcodescanner.i18n.i18n"
                }
            },
            "inventory": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {}
            }
        },
"routes": [
                {
                    "name": "RouteBarcodeScanner",
                    "pattern": "RouteBarcodeScanner",
                    "target": [
                        "TargetBarcodeScanner"
                    ]
                },
                {
                    "name": "RouteMaterialDetail",
                    "pattern": "RouteMaterialDetail/{inventoryPath}",
                    "target": [
                        "TargetRouteMaterialDetail"
                    ]
                }
            ],<br></strong>

BarcodeScanner.view.xml

<mvc:View controllerName="com.testgroup.barcodescanner.barcodescanner.controller.BarcodeScanner" xmlns:mvc="sap.ui.core.mvc" xmlns:ndc="sap.ndc" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="{i18n>scanBarcodeTitle}">
					<Panel id="panel-barcode-scanner">
						<FlexBox id="flexbox-barcode-scanner" alignItems="Center" justifyContent="Center">
							<ndc:BarcodeScannerButton id="BarcodeScannerButton" scanSuccess="onScanSuccess" scanFail="onScanFail" width="5em" />
						</FlexBox>
					</Panel>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View><br>

BarcodeScanner.controller.js

<strong>sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
],
	/**
	 * @param {typeof sap.ui.core.mvc.Controller} Controller
	 */
	function (Controller, MessageToast) {
		"use strict";

		return Controller.extend("com.testgroup.barcodescanner.barcodescanner.controller.BarcodeScanner", {
			onInit: function () {


			},

			onScanSuccess: function (oEvent) {
				var scanText, textArray, materialNumber;
				scanText = oEvent.getParameters().text;
				textArray = scanText.split(":");
				materialNumber = textArray[1];

				var oRouter = this.getOwnerComponent().getRouter();
				oRouter.navTo("RouteMaterialDetail", {
					inventoryPath: window.encodeURIComponent(</strong><b>materialNumber</b><b>)</b><br><strong>				});

			},
			onScanFail: function (oEvent) {
				var scanText = "Scan Failed";
				MessageToast.show(scanText);
			},
		});
	});
</strong>

MaterialDetail.view.xml

<strong><mvc:View controllerName="com.testgroup.barcodescanner.barcodescanner.controller.MaterialDetail" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>materialDetailsTitle}" showNavButton="true" navButtonPress=".onNavBack">
                        <VBox id="vbox-material-detail">
                            <f:SimpleForm id="form-material-details" title="Material Details" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4" emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
                                <f:content>
                                    <core:Title id="title-material-details" text="Scanned Material" />
                                    <Label id="label-material-no" text="Material Number" labelFor="input-material-no" />
                                    <Input id="input-material-no" value="{inventory>Matnr}"  editable="false" />
                                    <Label id="label-material-desc" text="Description" labelFor="input-material-desc" />
                                    <Input id="input-material-desc" value="{inventory>Maktx}" editable="false" />
                                    <Label id="label-material-plant" text="Plant" labelFor="input-material-plant" />
                                    <Input id="input-material-plant" value="{inventory>Werks}" editable="false" />
                                    <Label id="label-material-location" text="Storage Location" labelFor="input-material-location" />
                                    <Input id="input-material-location" value="{inventory>Lgort}" editable="false" />
                                    <Label id="label-material-units" text="Units of Measure" labelFor="input-material-units" />
                                    <Input id="input-material-units" value="{inventory>Meins}" editable="false" />
                                    <core:Title id="title-material-count-details" text="Material Count" />
                                    <Label id="label-material-count" text="Count" labelFor="input-material-count" />
                                    <Input id="input-material-count" placeholder="Enter Count"/>
                                </f:content>
                            </f:SimpleForm>
                        </VBox>
                        <FlexBox id="flexbox-count-post" alignItems="Center" justifyContent="Center">
                            <Button id="button-post-count" type="Emphasized" text="POST" />
                        </FlexBox>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View><br></strong>

MaterialDetail.controller.xml

<strong>sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/routing/History"
],
	/**
	 * @param {typeof sap.ui.core.mvc.Controller} Controller
	 */
	function (Controller, History) {
		"use strict";

		return Controller.extend("com.testgroup.barcodescanner.barcodescanner.controller.MaterialDetail", {
			onInit: function () {
				var oRouter = this.getOwnerComponent().getRouter();
				oRouter.getRoute("RouteMaterialDetail").attachPatternMatched(this._onObjectMatched, this);

			},
			_onObjectMatched: function (oEvent) {
				this.getView().bindElement({
					path: "/" + window.decodeURIComponent(oEvent.getParameter("arguments").inventoryPath),
					model: "inventory"
				});
			},

			onNavBack: function () {

				var oHistory = History.getInstance();
				var sPreviousHash = oHistory.getPreviousHash();

				if (sPreviousHash !== undefined) {
					window.history.go(-1);
				} else {
					var oRouter = this.getOwnerComponent().getRouter();
					oRouter.navTo("RouteBarcodeScanner", {}, true);
				}

				// var oRouter = this.getOwnerComponent().getRouter();
				// oRouter.navTo("RouteBarcodeScanner", {}, true);

			}
		});
	});
</strong>

Any assistance will be highly appreciated.Regards,

[former_member221786 · Accepted solution]

Hi Brian,

just wondering why you have these html-tags in your navigation method?!

If you have collected the matierialnumber in the onScanSuccess method it should be sufficient to provide the detail view with this information:

oRouter.navTo("RouteMaterialDetail", {
  inventoryPath: materialNumber
});

On your detail view you have to add the entityname to your binding:

_onObjectMatched: function (oEvent) {
	this.getView().bindElement({
		path: "/YourEntity('" + oEvent.getParameter("arguments").inventoryPath + "')",
		model: "inventory"
	});
}

Prerequisite is that the materialnumber is the id of your entity.

Hope this leads you to a solution!

[brian_mogambi · Accepted solution]

Thanks Sebastian! The data is binding 🙂