UI5
No Comments

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

Wooden cubes with JSON letters.

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"
      }

    }
  }

}

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

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