In this example, we will connect a JSON model to an input field. The input value will be saved to the JSON model and displayed in a text element when a button is clicked.
We will be following below steps-
- 1. Create a JSON File on model folder.
- 2. Configure the JSON model on manifest.json file.
- 3. Create Input field, buttons and Text field on the view file.
- 4. Define the function linked to the button inside the controller file.
Step 1 - Create a JSON File on model folder
In model folder create a JSON File (for example we have created SampleModel.json file).
Step 2 - Configure the JSON model on manifest.json file
Next, open the manifest.json file and define the JSON Model under model section.
In this case, DataModel is the identifier used to reference the JSON model, and the uri specifies the path to the JSON file.
As a result, your models section will now appear as follows:
With this, the JSON model is now successfully integrated into the Fiori UI5 application.
Step 3 - Create Input field, buttons and Text field on the view file
In the view.xml file, add an input field and a button. Also Configure the button to retrieve data from the model, and include a text field to display the retrieved information.
Step 4 - Define the function linked to the button inside the controller file
In the controller.js file, implement the methods that handle the button functionality.
And it is done !!!