Skip to Content
0

UI5 JSON CRUD via Index

Jul 17, 2017 at 07:37 AM

52

avatar image

Dear UI-Experts,

I'm struggling with a small requirement regarding CRUD methods on a small
JSON model.

My small application is as follows (SAP WEB IDE based):

* JSON Model (mock.json) with 2 records saved in SAP WEB IDE project in an own folder

{
"DeviceCollection":
[
{ "DeviceId": "DEV1", "DeviceState": "true" },
{ "DeviceId": "DEV2", "DeviceState": "false" }
]
}

* UI5 Switch-Control with ID "SW1"

* 2 Images (ImageA + ImageB)

The requirement is to display "ImageA" if switch is enabled="false" and
"ImageB" if switch is enabled="true". In my small view controller I accessed
the enabled-state of the switch via the OpenUI5 SDK method and at runtime I have
a small string, containing the enabeld state of the UI5 switch control.
That's working.

The problem for me is, that all documentations, UI5 tutorials do the easy way.
If you have a click field or a switch, simply choose a mock json (1 data record,
mock file or directly noted in the UI5 project) and that's it. The binding is directly done.

The problem for me is, that I have a json model for multiple devices, and the
switch should control the visiblity of an Image depending from the correct JSON file record for the respective Device ID.

I must access the JSON model (bound to view on my side) and ACCESS THE CORRECT
JSON RECORD (DEVICE) ENTRY BY INDEX. Or better said, i must EXECUTE CRUD METHODS
ON THE RESPECTIVE/CORRECT DEVICE in the JSON model.

I found in SAP UI5 SDN and other resources multiple recommendations to execute
CRUD on JSON.

In some blocks they execute a "model"."PUSH" to update the data in the model.
Other blocks explaine a have to read a JSON record via ARRAY.getProperty(...)
and the the binding (and changing of the model) data is automatically done.

From ODATA I know, that I have to execute oDATAModel.CREATE/.UPDATE/.DELETE and so on.

But the correct way to update a small mock JSON model BY INDEX depending from
a switch state is currently not possible for me.

The Images to be controlled have a "visible" property. I want to use a controller
variable for that.

My view controller has some functions:

// Binding the model

onInit: function() {

var oModel = new sap.ui.model.json.JSONModel();

oModel.loadData("model/mock.json");

this.getView().setModel(oModel, "Devices");

},


// UI5Switch control with ID "SW1" and event handler calling "onSW1change"


onSW1change: function(oEvent) {

var oEnabled = this.getView().byId("SW1").getState();

MessageToast.show(oEnabled);

var aDevices = this.getView().getModel("Devices").getProperty("/DeviceCollection");


// the following routine is obviously not working...
// Please provide a small code snippet, to update the JSON model on INDEX 1 (= device with name "DEV2")

for ( var i=0; i < aDevices.length; i++ ) {

if (aDevices[i].getProperty("DeviceId") === "DEV2") {

aDevices[i].value = this.getView().byId("SW1").getState();

}

}

}


In general: Is it more appropriate to operate on JSON with these ...getProperty-methods or to do this
in a different way?

Another question: If the JSON model update on INDEX 1 ("DEV2") is successfully done. How do I link the visible-property of the images to exactly this JSON data record?

Thanks in advance
Klaus

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers