Introducing DataObject Object

You can directly create object-type data or manage it by calling the service. When used by binding with the Dataset object, it can be used with the component that uses an existing Dataset object.

Displaying Simple Data

Receive the employee list as JSON and display it in the Grid component.

For the data, use sample data provided in the URL below.

http://edu.tobesoft.com/developer_guide/N_V24/FileSample/data_sample_dataobject_01.json

Some browsers, such as Chrome, may be unable to access the sample data URL according to CORS policy. Download the attachment below and place it on an accessible server to check.

data_sample_dataobject_01.json

Example

Get the JSON data provided by a specific service, bind it to the Dataset object, and display it in the Grid component.

sample_dataobject_01.xfdl

Core features used in the example

binddataobject: Selects the DataObject object to bind with the Dataset object. The actually applied values may vary depending on the dataobjectpath setting.
dataobjectpath: This is the value set to filter the data to be actually reflected among the DataObject object data. Selecting an array or object returns the list of their values.

How to implement an example

Setting url to Fetch Data

Add the DataObject object.

The DataObject object is added as Invisible Object.

Set the url property value of the DataObject object as follows.

url: http://edu.tobesoft.com/developer_guide/N_V24/FileSample/data_sample_dataobject_01.json

Connecting Dataset Object & DataObject Object

Add the Dataset object.

Select the Dataset object and select "DataObject00" as the binddataobject property value in the property window.

Click the button next to the dataobjectpath property in the property window and run [Data Path Editor].

Check the URL item in the [Data Path Editor] window and click the [Get] button.

The URL value is displayed as the url property value of the DataObject object in the previous step. The JSON data fetched from the server is shown in the Json Contents area at the bottom.

Select the item marked "data [24]" in the Json Contents data, right-click and select the [Set Dataobject Root Path] item.

Check that the root path is newly set in the selected item in DataObject Path, and click the [Refresh json contents] button.

The data under the newly set root path is displayed in the [Filtered Contents] tab.

Select the id item from the Json Contents data, right-click and select the [Add Column] item. Alternatively, you can add the column item by clicking the button next to the Columns item.

Add the id, employee_name, employee_salary, and employee_age items as columns in order.

Click the [OK] button. You can see that the dataobjectpath value is set in the property window.

Displaying Data in Grid Component

Place the Grid component on the screen.

Bind the Grid component and the Dataset object.

Add the Button component and write the onclick event function as shown below.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.DataObject00.load();
};

Run it with QuickView (Ctrl + F6) and check that information is searched when the button is clicked.

Displaying Button Label in Multiple Languages

Data of the DataObject object can be received from an external service, but can also be edited directly. In this example, data is added directly and the added data is bound to 2 Dataset objects and used for other purposes.

Example

When a language is selected in the Combo component, the Button component label is displayed in the selected language.

sample_dataobject_02.xfdl

Core features used in the example

data: Receives the object or string value and processes it as the data object. Nexacro Studio provides tools to edit your data.
dataobjectpath: This is the value that is set to filter the data to be actually reflected among the DataObject object data. Changes to values within the script are immediately reflected and processed.

How to implement an example

Writing JSON Data

Add the DataObject object.

Click the button next to the data property and run [Json Contents Editor].

If you select the item marked as (empty object) and click the [Add Item] button, then the item is added and it is ready to be set.

Sub-items can be added by changing the type item to Object or Array.

If you click the Source tab, you can directly enter the JSON code value.

In the example, enter the code below.

{
	"code" : [
		{
			"locale" : "ko",
			"label" : "Korean"
		},
		{
			"locale" : "ja",
			"label" : "Japanese"
		},
		{
			"locale" : "en",
			"label" : "English"
		}
	],
	"data" : {
		"ko" : {
			"btn_submit" : "전송",
			"btn_save" : "저장",
			"btn_cancel" : "취소"
		},
		"ja" : {
			"btn_submit" : "送信",
			"btn_save" : "保存",
			"btn_cancel" : "キャンセル"
		},
		"en" : {
			"btn_submit" : "Submit",
			"btn_save" : "Save",
			"btn_cancel" : "Cancel"
		}
	}
}

In the Contents tab, it is displayed as shown below.

Importing Base Data to Display in Combo Component

Add the Dataset object and set the value of the binddataobject property to "DataObject00".

Click the button next to the dataobjectpath property in the property window and run [Data Path Editor].

Select the "code [3]" item in the data, right-click and select the [Set Dataobject Root Path] item.

Among the data, the object value under the code array will be used as innerdataset of the Combo component.

When the DataObject Path value is set to "$.code[*]", click the [Refresh json contents] button and check that the data is displayed in the [Filtered Contents] tab as shown below.

Select the locale, label items, add them as columns, and close the editor.

Add the Combo component.

Set the previously set Dataset object as InnerDataset of the Combo component.

Set the codecolumn property value to "locale" and the datacolumn property value to "label".

Run it with QuickView (Ctrl + F6) and check if the data of the Combo component has been added.

Importing Label Data Connected to Button Component

Add the Dataset object and set the value of the binddataobject property to "DataObject00".

Click the button next to the dataobjectpath property in the property window and run [Data Path Editor].

Select the "ko {3}" item under the "data {3}" item in the data, right-click and select the [Set Dataobject Root Path] item.

When the DataObject Path value is set to "$.code[*]", click the [Refresh json contents] button and check that the data is displayed in the [Filtered Contents] tab as shown below.

Select the btn_submit, btn_save, btn_cancel items, add them as columns, and close the editor.

Add 3 Button components.

Set the previously set Dataset object as Bind Item of the Button component. Connect the text property and each column as follows.

Write the onitemchanged event function of the Combo component as follows. Change the dataobjectpath property value of the Dataset object bound to the Button component according to the selected locale item.

this.Combo00_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.Dataset01.dataobjectpath = "$.data."+e.postvalue;
};

Run it with QuickView (Ctrl + F6) and check if the text displayed on the Button component changes when changing the locale item in the Combo component.

Executing the request method by specifying method parameters

The load method operates with the GET method parameters set. However, depending on the API to be called, methods such as POST or PUT need to be set. Also, postdata needs to be set for authorization or transmitting data.

Example

This example uses data provided by https://jsonplaceholder.typicode.com/.

When Create is executed, no actual data is created and only success or failure is returned.

The example may not be executed depending on the conditions of the website.

When [Search] is clicked without entering an id, the entire data is searched. If an id value between 1 and 100 is entered, only the value corresponding to that id is searched.

When userId, title, and body values are entered and the [Create] button is clicked, the entered values are processed with the set method parameters. The execution result is displayed in the TextArea component.

sample_dataobject_03.xfdl

Core features used in the example

request: The method parameters can be specified. JSON object that stores header, postdata, and async information can be additionally set.

How to implement an example

Screen composition

Add Edit, TextArea, Grid, Button components, Dataset, and DataObject objects.

Set the value of the displaynulltext property of the Edit and TextArea component.

Preparing the request method

Enter the onclick event function of the [Create] button component as follows.

When [Create] is clicked, the input values and method parameters are set and processed.

this.btn_Create_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var header = {"Content-Type" : "application/json; charset=UTF-8"};
	var strPostdata = JSON.stringify(
		{
			"userId":this.edituserId.value,
			"title":this.edittitle.value,
			"body":this.textAreabody.value
		}
	);
	this.DataObject00.request("CREATE", "POST", "https://jsonplaceholder.typicode.com/posts", 
		{
			"httpheader":header, 
			"postdata":strPostdata
		}
	);
};

Enter the onclick event function of the [Search] button component as follows.

When [Search] is clicked, the the "GET" method parameter value is set.

this.btn_Search_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strId = this.editid.value;
	this.DataObject00.request("SEARCH", "GET", "https://jsonplaceholder.typicode.com/posts"+(strId?"/"+strId:""));
};

Processing events

When the request method is executed, the onsuccess event occurs first, then the data is set to the data property value, and the onload event occurs.

Enter the onsuccess event function as follows.

Inside the onsuccess event function, the executed serviceid value is checked and stored in a variable.

The statuscode is returned as 201 when running Create. At this time, the onload event is not handled and only the result value is displayed in the TextArea component.

var serviceid;
this.DataObject00_onsuccess = function(obj:nexacro.DataObject,e:nexacro.DataObjectEventInfo)
{
	serviceid = e.serviceid;
	trace(e.serviceid + ":" + e.statuscode);

    if (e.statuscode == 200)
        trace("getAllResponseHeaders:"+ obj.getAllResponseHeaders())
    else if(e.statuscode > 200)
    {
        e.preventDefault();
		this.TextArea00.value = obj.getResponse();
    }
};

Enter the onload event function as follows.

Inside the onload event function, the column information of the Dataset object to be bound is created and the binddataobject and dataobjectpath properties are set. Set the binddataset property value of the Grid component and execute the createFormat method.

this.DataObject00_onload = function(obj:nexacro.DataObject,e:nexacro.DataObjectLoadEventInfo)
{
	if(e.reason == 2)
	{
		this.Dataset00.clear();
		var objData;
		var strDataobjectpath;
		if(serviceid == "SEARCH")
		{
			if(obj.data.length > 1)
			{
				objData = obj.data[0];
				strDataobjectpath = "$[*]";
			} else {
				objData = obj.data;
				strDataobjectpath = "$";			
			}
		}
		for(var key in objData)
		{
			var objColinfo = new ColumnInfo();
			objColinfo.type = "String";
			objColinfo.datapath = "@."+key;
			this.Dataset00.addColumnInfo(key, objColinfo);
		}
		this.Dataset00.binddataobject = obj.id;
		this.Dataset00.dataobjectpath = strDataobjectpath;
		this.Grid00.binddataset = this.Dataset00.name;
		this.Grid00.createFormat();
		this.TextArea00.value = "";
	}
};

Enter the onerror event function as follows.

If an error occurs, the onerror event function displays an error message in the TextArea component.

this.DataObject00_onerror = function(obj:nexacro.DataObject,e:nexacro.DataObjectErrorEventInfo)
{
	trace(e.statuscode +":"+e.errormsg);
	this.TextArea00.value = e.statuscode +":"+e.errormsg;
};

Checking the execution result

After executing with QuickView (Ctrl + F6), check the execution result.

When the [Search] button is clicked, the entire data is searched. This example is similar to the simple data display example, but this one uses the request method, dynamically handling the Dataset object and Grid component settings.

Applying two-way communication

Two-way communication can be applied when the data imported using the DataObject object is edited on screen and needs to be reflected on the server.

When data is changed in the Dataset object, an event occurs in the DataObject object and the changed information can be verified.

Example

This example uses data provided by https://jsonplaceholder.typicode.com/.

When executed, no actual data is edited or deleted and only success or failure is returned.

The example may not be executed depending on the conditions of the website.

Click [Search] and search the data.
Edit the selected data or click [Delete] to delete it.
Click [Apply] to process the changed data.

Uncheck the updatecontrol checkbox to set it to false.
Edit the title or body column data of the selected data.
Set PATCH method parameters and call for request (the request is sent normally but returned as an error).

sample_dataobject_04.xfdl

Core features used in the example

ondatachanged: This event occurs when the data of the DataObject object is changed. The changed data in the infoarray property value in the form of an array within the EventInfo object can be verified.
dataobjectbindmode: Sets the communication method between Dataset and DataObject objects. If the property value is set to "twoway", the changed data information can be transmitted.

How to implement an example

Importing data

Add Edit, TextArea, Grid, Button components, Dataset, and DataObject objects.

Set the url property value of the DataObject object as follows.

https://jsonplaceholder.typicode.com/posts

Set the binddataobject property value of the Dataset object.

Click the button next to the dataobjectpath property of the Dataset object and launch [Data Path Editor].

Check Target Source as URL and click [Get] button to import the data.

Set the DataObject Path to "$[*]" and click the refresh button to verify the data.

Add userId, id, title, and body as columns.

Bind the Dataset object to the Grid component.

Bind each column to the Edit component.

Enter the event handler function code to be executed when the [Search] button is clicked.

this.btn_Search_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.DataObject00.load();
};

Enter the event handler function code to handle success or failure when loading data.

var serviceid;
this.DataObject00_onsuccess = function(obj:nexacro.DataObject,e:nexacro.DataObjectEventInfo)
{
	serviceid = e.serviceid;
	trace(e.serviceid + ":" + e.statuscode);

    if (e.statuscode == 200 && (e.method == "POST" || e.method == "GET"))
        trace("getAllResponseHeaders:"+ obj.getAllResponseHeaders());
	else
    {
        e.preventDefault();
		this.TextArea00.insertText("=================="+"\n");
		this.TextArea00.insertText(e.serviceid + ":" + e.statuscode+"\n");
		this.TextArea00.insertText(obj.getResponse()+"\n");		
    }
};

this.DataObject00_onerror = function(obj:nexacro.DataObject,e:nexacro.DataObjectErrorEventInfo)
{
	trace(e.statuscode +":"+e.errormsg);
	this.TextArea00.deleteText();
	this.TextArea00.insertText("=================="+"\n");
	this.TextArea00.insertText(e.statuscode +":"+e.errormsg+"\n");
};

After executing with QuickView (Ctrl + F6), check if the data can be viewed.

Setting two-way communication

Set the value of the dataobjectbindmode property of the Dataset object to "twoway".

Set the value of the readonly property of the Edit component that displays the userId and id to true.

UserId and id are used as key values when updating, so set them so that they cannot be edited.

Enter the event handler function to delete the selected row when the [Delete] button is clicked.

this.btn_Delete_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.deleteRow(this.Dataset00.rowposition);
};

Enter the event handler function to execute the applyChange method when the [Apply] button is clicked to handle the changed state after data is edited or deleted.

this.btn_Apply_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.applyChange();
};

When the applyChange method is executed, the changed information is passed to the DataObject object and the ondatachanged event occurs.

Enter the ondatachanged event handler function as follows.

this.DataObject00_ondatachanged = function(obj:nexacro.DataObject,e:nexacro.DataObjectDataChangedEventInfo)
{
   var updatelist = e.infoarray;
   for (var i =0; i<updatelist.length; i++)
   {
		var item = updatelist[i];
		var uid = item.uid;
		var method = (item.type == "update")?"PUT":"DELETE";
		var senddata = JSON.stringify(item.data);	
		var id = item.data.id;
		var param = {
			'httpheader' : {'Content-Type': 'application/json; charset=UTF-8'}, 
			'postdata' : senddata 
		}
		if(method == "PUT")
		{
			this.DataObject00.request(uid, method, this.DataObject00.url+"/"+id, param);
		} else {
			this.DataObject00.request(uid, method, this.DataObject00.url+"/"+id);
		}
	}
};

For example, after editing two data and deleting one data, if the EventInfo object is executed, it will look like the following.

There are three data in the infoarray array, and the data information with the type information changed can be verified. The ondatachanged event handler feature repeats as long as the data length and updates to the server or handles delete requests.

After executing with the QuickView (Ctrl + F6), the data can be searched, edited, or deleted. Click the [Apply] button to confirm that the data is transmitted.

Handling data changes immediately

In the example above, the data was processed after the applyChange method of the Dataset object was executed. Now, let's add a feature to process the data changes immediately.

Add a CheckBox component to the screen.

Enter the event handler function to change the value of the updatecontrol property of the Dataset object when the state of the CheckBox changes.

this.CheckBox00_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	this.Dataset00.updatecontrol = e.postvalue;
};

If the updatecontrol property value of the Dataset object is false, when a specific column data is changed, the changed information is delivered to the DataObject object and the onvaluechanged event occurs.

Enter the onvaluechanged event handler function as follows.

this.DataObject00_onvaluechanged = function(obj:nexacro.DataObject, e:nexacro.DataObjectValueChangedEventInfo)
{
	var id = obj.getObjectByPath(e.dataobjectpath)[e.index]["id"];
	var uid = e.uid;
	var method = "PATCH";
	var objddata = {};
	objddata[e.key] = e.value;
	var senddata = JSON.stringify(objddata);
	
    var param = {
		'httpheader' : {'Content-Type': 'application/json; charset=UTF-8'}, 
		'postdata' : senddata 
	}
	this.TextArea00.deleteText();
	this.DataObject00.request(uid, method, this.DataObject00.url+"/"+id, param);
};

For example, the EventInfo object will look like the following when the title item of the third row is edited.

The changed index information, key, and value values can be checked. The onvaluechanged event handler function requests an update to that data.

Currently, the https://jsonplaceholder.typicode.com/ server used in the example restricts the use of the PATCH method. Therefore, an error occurs when request is executed after setting the PATCH method.

Refer to this example to understand how the onvaluechanged event handler works.