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

🏷️

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

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

📚 More Articles

Leave a Comment

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.
You need to agree with the terms to proceed

Menu

🚀 Upgrade Your Work Experience With Altwork (Welcome to the Future)

altwork_picture_2

The Altwork Station redefines how people interact with their computers by allowing the computer screen and keyboard to physically conform to support the user’s body while working long hours on a computer.

Submission received, thank you!

Close Window