How to Set a Local JSON File to a JSON Model in SAP UI5?

Light weighted JSON (JavaScript Object Notation) data goes into a controller or the Component.js, but heavier weighted JSON data is supposed to go into a local JSON file within the SAP UI5 application.

For example, light weighted JSON data in a controller is …

// light weighted JSON data in a controller

sap.ui.define([ 
  "sap/ui/core/mvc/Controller"
], function (Controller) { 
  "use strict"; 

  return Controller.extend("my.app.controller.View1", { 

    onInit: function() {
  
      var oJsonData = {

        "foo1": "bar1",

        "foo2": "bar2"

      }
      
    }

  )};

});

… and heavy weighted JSON data in a JSON file on its own is …

// heavy weighted JSON data in a .json file

{

  "ProductCollection": [

    {
      "ProductId": "HT-1000",
      "Category": "Laptops",
      "MainCategory": "Computer Systems",
      "TaxTarifCode": "1",
      "SupplierName": "Very Best Screens",
      "WeightMeasure": 4.2,
      "WeightUnit": "KG",
      "Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
      "Name": "Notebook Basic 15",
      "DateOfSale": "2017-03-26",
      "ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1000.jpg",
      "Status": "Available",
      "Quantity": 10,
      "UoM": "PC",
      "CurrencyCode": "EUR",
      "Price": 956,
      "Width": 30,
      "Depth": 18,
      "Height": 3,
      "DimUnit": "cm"
    },

    {
      "ProductId": "HT-1001",
      "Category": "Laptops",
      "MainCategory": "Computer Systems",
      "TaxTarifCode": "1",
      "SupplierName": "Very Best Screens",
      "WeightMeasure": 4.5,
      "WeightUnit": "KG",
      "Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
      "Name": "Notebook Basic 17",
      "DateOfSale": "2017-04-17",
      "ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1001.jpg",
      "Status": "Available",
      "Quantity": 20,
      "UoM": "PC",
      "CurrencyCode": "EUR",
      "Price": 1249,
      "Width": 29,
      "Depth": 17,
      "Height": 3.1,
      "DimUnit": "cm"
    },

    ...

  ]

}

Usually, local JSON files of an SAP UI5 application are in the model folder of an application’s folder structure:

— webapp
—— controller
—— i18n
—— localService
—— model
———— jsonFile.json
—— test
—— view

There are two options to set a JSON file to a JSON model in SAP UI5:

  1. Local: Set the JSON file to a model which is available in one specific controller and view.
  2. Global: Set the JSON file to a model which is available in the whole SAP UI5 application.

Set the JSON File to a Local JSON Model

The first option is to retrieve the JSON file and set it to a JSON model in a controller. After the model is initialized, the model gets set to the view. By doing so, the model is only locally available for the view for which the model was set.

// set JSON file to a local JSON model in a controller

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) { 
  "use strict"; 

  return Controller.extend("my.app.controller.View1", { 

    onInit: function() {
  
      // get the path to the JSON file
      var sPath = jQuery.sap.getModulePath("your.app.namespace", "/path/to/file.json"); 

      // initialize the model with the JSON file
      var oModel = new JSONModel(sPath);

      // set the model to the view
      this.getView().setModel(oModel, "jsonFile");
      
    }

  )};

});

Obviously, it is possible to set the model global in the controller as well. But there is a better solution than to set the model global in a controller: To set it global in the manifest.json – as described in the second option below.

Set the JSON File to a Global JSON Model

The second option is to retrieve and set the JSON file to a JSON model in the manifest.json. Two steps are necessary to initialize a global JSON model in the manifest.json:

  1. Set the data source with the path of the JSON file in the manifest.json.
  2. Initialize a model with the data source in the manifest.json.
// in your manifest.json

{     
  "_version": "1.8.0",  

  "sap.app": {
    "dataSources": {

      "my_global_json_model_data_source": {
        "uri": "localService/jsonFile.json",
        "type": "JSON"
      }

    }
  },
  
  "sap.ui5": {
    "models": {

      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "sap.ui.demo.walkthrough.i18n.i18n"
        }
      },

      "my_global_json_model"{
        "type": "sap.ui.model.json.JSONModel",
        "dataSource": "my_global_json_model_data_source"
      }

    }
  }

}
No Comments

Get Exclusive SAP Tips

Learn about exclusive SAP tips and insights that are only shared with the private newsletter subscribers.

Will SAP UI5 replace the SAP Web UI?

Result

Essential Ressources

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu