SAPUI5 set JSON Model

Question

I got a bundle with some data I need:

"mpConfig": {
    "appId": "test",
    "isMock": "test",
    "mockServerPath": "test",
    "isDebug": "test",
    "isUnitTest": "test"
}

Now I need to put this in a JSON Model in order to be able to use this data. To retrieve the data I have my Controller class and the usage must be in a View class. How can I handle this problem?

I have read that something like this puts them in a JSON Model.

this.getView().setData(path().getConfig().mpConfig;

How can I use the data I got from the JavaScript class with the config mentioned above? Thanks for all help.

Try this.getView().setModel(path().getConfig().mpConfig); Make sure path().getConfig().mpConfig returns valid object — Rayon

Nabi Nabi · Accepted Answer · 2015-12-07T10:38:29

The example below shows you how to create a new instance of a JSONModel and pass data to it. The data I use in the example is a JavaScript object. In case you have a JSON string instead make sure to call

var oData = JSON.parse(sMyJsonString);

The example below does not call this.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->

        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">

                <VBox>
                    <Text text="appId          : {/mpConfig/appId}" />
                    <Text text="isMock         : {/mpConfig/isMock}" />
                    <Text text="mockServerPath : {/mpConfig/mockServerPath}" />
                    <Text text="isDebug        : {/mpConfig/isDebug}" />
                    <Text text="isUnitTest     : {/mpConfig/isUnitTest}" />
                </VBox>

            </mvc:View>
        </script>

        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";

                //### Controller ###
                sap.ui.controller("MyController", {
                    onInit : function () {

                        var oData = {
                            "mpConfig": {
                                "appId": "test appId",
                                "isMock": "test isMock",
                                "mockServerPath": "test mockServerPath",
                                "isDebug": "test isDebug",
                                "isUnitTest": "test isUnitTest"
                            }
                        };

                        var oModel = new sap.ui.model.json.JSONModel(oData);
                        this.getView().setModel(oModel);
                    }
                });

                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");

            });
        </script>

    </head>

    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

Basically, you

get the data from somewhere
create an instance of a JSONModel
pass the data to that instance (I've done it in the constructor)
finally put the model on the view or where ever you want

That should work.

SAPUI5 set JSON Model

1 Answers