Dynamic Configuration of JSON Model with Fiori UI5 App

We will set up the JSON model within the controller, store data on the model and show it on Button click.

The objective is to create a JSON model as soon as the controller loads. Then, on a button click, data is set into the same model, and on another button click, the data is retrieved from the model and displayed in a popup.

We will be following below steps-

• Create JSON Model with no data and set it to the view.
• Create method which will set data on the model.
• Create method which will read the data from model.
• Create Buttons on View to set and show data.

Step 1 - Create JSON Model and set it to the view

We will create the JSON Model on onInit method on controller as the onInit method runs automatically when the controller is instantiated, which happens right after the view is created and its controls are initialized.

Since we are using TypeScript, so in our case the controller is - View1.controller.ts

Import the JSONModel Module -

import JSONModel from "sap/ui/model/json/JSONModel";

Now on onInit method, create a JSON Model and set it to the View.

In our case, we want to create a model - MyModel and use it with the name "MySampleModel", so we will set the model to the view using this same name.

public onInit(): void {
    const MyModel = new JSONModel();
    this.getView()?.setModel(MyModel, "MySampleModel");
}

Step 2 - Create method which will set data on the model

We wants to set the below data on the JSON Model.

{
    "sampleData" : "This data is coming from MySampleModel JSON Data"
}

In our case we will create onSetData method which will set the above data on MySampleModel JSON Model.

public onSetData(): void {

    // Since we are using TypeScript, Lets define the interface for object
    interface ContentObject {
        sampleData : string
    }

    //  using the same interface, create an json object
    let content: ContentObject = {
        'sampleData': 'This data is coming from MySampleModel JSON Data'
    };

    //  get the Model from the view.
    const myModel = this.getView()?.getModel('MySampleModel') as JSONModel;

    //  if model exist, set the data created above.
    if (myModel) {
        myModel.setData(content);
    }

    MessageToast.show("SampleData has been set successfully on MySampleModel");
}

Step 3 - Create method which will read the data from model

Now we want to define a method which will read data from the JSON Model and it will work based on button click.

public onShowModelData() : void {
    interface ContentObject {
        sampleData : string
    }

    const myModel = this.getView()?.getModel("MySampleModel") as JSONModel ;
    const modelData = myModel.getData() as ContentObject;

    MessageToast.show(modelData.sampleData);
}

Step 4 - Create Buttons on View to set and show data

Since we want to store data in the JSON model on one button click and then read that data to display it in a popup on another button click, we will define these buttons in the View1.view.xml file and bind the corresponding methods to their events.

<Button id="view1Btn1" text="Set Data on JSON Model" press="onSetData" />
<Button id="view1Btn2" text="Show Model Data - SampleData" press="onShowModelData" />

!!!! And, its Done !!!!