Skip to Content

SAPUI5 Route Navigation with selected line from Table Selection to pass to second screen

Hello,

I have a SAPUI5 application with 2 screens, I am trying to pass a selected line from my first screen to the second screen,

But I am unable the data on the second screen, the bindingcontext is empty

Could you tell what is wrong in my coding?

here's part of my manifest.json

{
    "routing": {
        "config": {
            "viewPath": "DI_Warehouse_Replenishment.view",
            "controlId": "V_Root",
            "viewLevel": 1,
            "controlAggregation": "pages",
            "routerClass": "sap.m.routing.Router"
        },
        "targets": {
            "Target_REHeader": {
                "viewType": "XML",
                "transition": "slide",
                "clearAggregation": true,
                "viewName": "V_REHeader",
                "viewLevel": 1
            },
            "Target_REDetail": {
                "viewType": "XML",
                "transition": "slide",
                "clearAggregation": true,
                "viewName": "V_REDetail",
                "viewLevel": 2
            }
        },
        "routes": [{
            "name": "Target_REHeader",
            "pattern": "",
            "titleTarget": "",
            "greedy": false,
            "target": ["Target_REHeader"]
        }, {
            "name": "Target_REDetail",
            "pattern": "Target_REDetail/{replPath}",
            "titleTarget": "",
            "greedy": false,
            "target": ["Target_REDetail"]
        }]
    }
}

main page view xml

<Table noDataText="No Data" id="ContentTable" items="{REPL>/items}" mode="SingleSelectMaster" selectionChange="changeSelectedLine" class="tableItems">
    <columns>
        <!--<Column><Label/></Column>-->
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column>
            <Label/>
        </Column>
        <Column visible="false">
            <Label/>
        </Column>
    </columns>
    <items>
        <ColumnListItem id="__item1" type="Active">
            <cells>
                <!--<Text text="{REPL>Itemline}"/>-->
                <Text text="{REPL>Ean}" />
                <Text text="{REPL>Makt}" />
                <Text text="{REPL>Vrkme}" />
                <Text text="{REPL>QtyOd}" />
                <Text text="{REPL>QtyTo}" />
                <Text text="{REPL>QtyDelta}" />
                <Text text="{REPL>Priority}" />
                <Text text="{REPL>QtyPicking}" />
                <Text text="{REPL>StkPicking}" />
                <Text text="{REPL>PickStkCoverage}" />
                <Text text="{REPL>StockPas}" />
                <Text text="{REPL>StockMax}" />
                <Text text="{REPL>Umrez}" />
                <Text text="{REPL>Umrez}" />
            </cells>
        </ColumnListItem>
    </items>
</Table>

main page controller.js (I replace "/" by "R" before passing to the second screen, and do it the other way around in the second screen, because I have more than one / in the path, it looks like that

/items/25

showSelected: function(evt) {
var oView = this.getView();
if (oView.byId("ContentTable").getSelectedItem() !== null) {
    var o = oView.byId("ContentTable").getSelectedItem().getBindingContext("REPL").getObject();
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    var pathr = this.getView().byId("ContentTable").getSelectedItem().getBindingContext("REPL").getPath().toString().replace(/\//g, "R");
    oRouter.navTo("Target_REDetail", {
        replPath: pathr
    });
} else {
    MessageBox.show("No line selected", sap.m.MessageBox.Icon.ERROR);
}
}
});

second page controller.js

onInit: function() {
        // Get the Router Info
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.getRoute("Target_REDetail").attachPatternMatched(this._onObjectMatched, this);
        var oView = this.getView();
    },

_onObjectMatched: function (oEvent) {
	var pathr = oEvent.getParameter("arguments").replPath.toString().replace(/R/g,"/");
	this.getView().bindElement({
		path: pathr,
		model: "REPL"
	});
	alert(this.getView().getBindingContext("REPL").getProperty("EUsername"));
},

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Sep 14, 2017 at 05:31 PM

    Thanks, I will try tomorrow.

    But when you talk about global model, "REPL" is only defined in in the main page, which is a JSON local copy of "ZREPLENISHMENT" which is in manifest.json, I use REPL for local filtering on the table.

    I will try to use "ZREPLENISHMENT" instead of "REPL", I have a good feeling it will work, i'll let you know :)

    "models": {
    			"i18n": {
    				"type": "sap.ui.model.resource.ResourceModel",
    				"settings": {
    					"bundleName": "DI_Warehouse_Replenishment.i18n.i18n"
    				}
    			},
    			"ZREPLENISHMENT": {
    				"type": "sap.ui.model.odata.v2.ODataModel",
    				"settings": {
    					"defaultOperationMode": "Server",
    					"defaultBindingMode": "TwoWay",
    					"defaultCountMode": "Request"
    				},
    				"dataSource": "ZFGREPLENISHMENT_SRV",
    				"preload": true
    			},
    			"GETPLANT": {
    				"type": "sap.ui.model.odata.v2.ODataModel",
    				"settings": {
    					"defaultOperationMode": "Server",
    					"defaultBindingMode": "OneTime",
    					"defaultCountMode": "Request"
    				},
    				"dataSource": "ZGET_PLANT_SRV",
    				"preload": true
    			}
    
    Add comment
    10|10000 characters needed characters exceeded

  • Sep 15, 2017 at 01:22 PM

    I'm not getting to work it yet, because REPL is not a global model inside a manifest.json, and REPL is based on REHeaderSet, here

    onInit: function() {
    			var oView = this.getView();
    			var oData = new ODataModel("/sap/opu/odata/sap/ZFGREPLENISHMENT_SRV/", true);
    			oData.read("/REHeaderSet", null, null, true, function(response) {
    				var newArray = response.results;
    				var model = new JSONModel({
    					"items": newArray
    				});
    				oView.setModel(model, "REPL");
    			}, function(error) {});
    		}
    

    I'm searching how to define a dummy global model inside the manifest.json, which is only meant to be used inside the views and controllers?

    If i can do that, I can work with REPL on my second view

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      You can create global model inside init method of component.js:

      var oData = {
      	ProductCollection: [{
      			ProductId: 123,
      			SupplierName: "ABC"
      		     }, {
      			ProductId: 456,
      			SupplierName: "MNP"
      		}]
      	};
      				
      var oJSONModel = new sap.ui.model.json.JSONModel(oData);
      this.setModel(oJSONModel, "myModel");
      

      Now you can access this model inside views and controllers as below:

      var oModel=this.getView().getModel("myModel");
  • Sep 15, 2017 at 02:02 PM

    or if it is possible to get rid of REPL and filter the ZREPLENISHMENT model locally, that would be great as well

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Sep 14, 2017 at 02:53 PM

    Hi,

    Instead of passing the complete path via routing parameter, you can just pass the key of the selected row, and in the second view build the path using key, please find below code snippet:

    var key = this.getView().byId("ContentTable").getSelectedItem().getBindingContext("REPL").getProperty("KeyFieldName");
        oRouter.navTo("Target_REDetail", {
            replPath: key
        });
    _onObjectMatched: function(){
        var key =  oEvent.getParameter("replPath").key;
        var sObjectPath = this.getModel("REPL").createKey("Objects", {
    			KeyFieldName :  key
    		});
        this.getView().bindElement({
             path: "/"+sObjectPath,
             model: "REPL"
        });
    }

    Here Objects is the entityset name.

    Also make sure that model "REPL" is a global model and is set on both the views.

    Regards,

    Rahul

    Add comment
    10|10000 characters needed characters exceeded