SAPUI5: How to Set a Local JSON File to a JSON Model?

SAPUI5: How to Set a Local JSON File to a JSON Model?

by

This is how to set a local JSON file to a JSON model in SAPUI5.

It’s pretty simple.

So if you want to learn how to learn how to get that local JSON file into your JSON ’re in the right place.

Let’s jump right in!

Light Weighted or Heavy Weighted JSON File

Lightweight JSON data is handled via a controller or a component.js, while heavier weight JSON data is handled by a local JSON file within the SAPUI5 application.

For example, light weight JSON data in a controller is:

// in your controller
...
  
var oJsonData = {
  "foo1": "bar1",
  "foo2": "bar2"
}

...

And here’s some heavy weight data a JSON file:

// in your 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"
    },

    ...

  ]
}

Commonly, JSON files of an SAPUI5 application are the model folder in the application’s folder structure.

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

SAPUI5 lets you set a JSON file to a JSON model in two ways:

  1. Local: Set the JSON file to a model that is available within a particular controller and view.
  2. Global: Set the JSON file to a model that is available in the entire SAPUI5 application.

Set the JSON File to a Local JSON Model

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

// in your controller
...
  
// 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, you can set the model global in the controller. But there’s a better way than setting the model global in a controller:

To set it to global in manifest.json, see the second option below:

Set the JSON File to a Global JSON Model

The second option is to get the JSON file and set it into the manifest.json.

Two steps are necessary to initialize a global JSON model manifest.json:

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

Let’s have look:

// in your manifest.json
{     
  "_version": "1.8.0",  
  "sap.app": {
    "dataSources": {
      "my_global_json_model_data_source": {
 // here comes the JSON 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"{
 // here is the initialization of the JSON model
        "type": "sap.ui.model.json.JSONModel",
        "dataSource": "my_global_json_model_data_source"
      }
    }
  }
}

Leave a Comment