CODEWITHSUNDEEP
javascriptroutessapui5
Chan Yoong Hon
Chan Yoong Hon

Reputation: 1812

SAPUI5 Pass data from one view to another view

I am developing of a SAPUI5 application, in my application I need to pass data from one View1 to View2. I follow some sample code from internet but it seems like does not work for me.

The following is my source code

View1.controller.js

onShoppingCartPressed: function(){
    var viewCartData = {
        "Customer" : SelectedCustomer,
        "Salesman" :  SelectedSalesman,
        "TxnKey" : "TXN1000103"
    };
    this._oRouter.navTo("ViewCarts", viewCartData);
 }

View2.controller.js

    onInit: function () {          
                this._oRouter.getRoute("ViewCarts")
               .attachMatched(this._onRouteMatched, this);  
           },

   _onRouteMatched: function(oEvent) {
                        console.log(oEvent.getParameter("arguments"));
                    },

Manifest.json

    "routing": {
        "config": {
            "routerClass": "sap.f.routing.Router",
            "viewType": "XML",
            "viewPath": "com.accenture.newspage.order.ui.order-ui.view",
            "controlId": "flexibleColumnLayout",
            "transition": "slide",
            "controlAggregation": "beginColumnPages",
            "bypassed": {
                "target": [
                    "notFound"
                ]
            },
            "async": true
        },
        "routes": [
            {
              "pattern": "orderDetail/{order}/{layout}",
              "name": "orderDetail",
              "target": [
                "order",
                "orderDetail"
              ]
            },
            {
                "pattern": "ViewCarts",
                "name": "ViewCarts",
                "target": "viewCarts"
            }
        ],
        "targets": {
            "worklist": {
                "viewName": "Worklist",
                "viewId": "worklist",
                "viewLevel": 1
            },
            "viewCarts": {
                "viewName": "ViewCart",
                "viewId": "ViewCartPage",
                "viewLevel": 1
            }
        }
    }

When I console.log() out the data, it shows me empty data and it does not show the data that I passed from View1.

Upvotes: 1

Views: 9455

Answers (2)

Matthijs Mennens
Matthijs Mennens

Reputation: 1145

You seem to have two options here in my option. Correct me if I'm wrong.

Hope this helps.

Option 1

Manifest

 {
    "pattern": "ViewCarts/customer/{Customer}/Salesman/{Salesman}/key/{TxnKey}",
    "name": "ViewCarts",
    "target": "ViewCarts"
}

Sending controller

    onShoppingCartPressed: function(oEvent) {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("viewCarts", {
            Customer: "XXXXXXXXXXXX", // can't be an object
            Salesman: "xxxxxxxxxxxx",
            TxnKey  : "TXN1000103"
        });
    }

Receiving controller

    onInit: function() {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.getRoute("viewCarts").attachMatched(this._onRouteMatched, this);
    },

    _onRouteMatched: function(oEvent) {
        var customer = oEvent.getParameter("arguments").Customer;
        var salesman = oEvent.getParameter("arguments").Salesman;
        var key = oEvent.getParameter("arguments").TxnKey;
    }

Option 2

Manifest

No changes from yours

Sending controller

    onShoppingCartPressed: function(oEvent) {
        var viewCartData = {
            "Customer": "XXXXXXXXXXXX",
            "Salesman": "xxxxxxxxxxxx",
            "TxnKey": "TXN1000103"
        };

        var oModel = new sap.ui.model.json.JSONModel(viewCartData);
        this.getOwnerComponent().setModel(oModel, "viewCartData");
        // OR sap.ui.getCore().setModel(oModel, "viewCartData");

        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("viewCarts");
    }

Receiving controller

onInit: function() {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.getRoute("viewCarts").attachMatched(this._onRouteMatched, this);
    },

    _onRouteMatched: function(oEvent) {
        var oModel = this.getView().getModel("viewCartData");
        // OR var oModel = sap.ui.getCore().getModel("viewCartData");
    }

Upvotes: 2

grimaldello
grimaldello

Reputation: 38

For me in most scenarios it's better to use sessionStorage.

It allows you to save almost anything (also javascript Object) and access it anywhere in webapp.

sessionStorage.setItem('myKeyString', 'myString'); //Set value
sessionStorage.getItem('myKeyString');  // Get saved string
sessionStorage.setItem('myObject', JSON.stringify({"key": "value"})); // Save object
JSON.parse(sessionStorage.getItem('myObject')); // Get saved object

Upvotes: 1

Related Questions