Normally, an app used for business does not manage the data locally. Typically, the data is stored on the server although the app gets and modifies data.

This chapter discusses how code data is managed in Nexacro-based apps, how data is fetched from the server and how you can check logs on a web browser.

Grid Combo

Database schema often include such data as country, department and rank. If these data are entered as character strings, users may enter them differently. To avoid this, the data are managed by creating separate code tables.

As you can see in the example below, the Department item is managed not by its name but by its code in the database. However, the item should show users its name. So, in the Grid component, you can determine a displaytype according to data forms.

Dataset

Create a Dataset first, and then enter properties and column values.

Property	Value	Explanation
id	dsDepartment	Dataset id

No.	id	type	size	Explanation
1	code	STRING	32	Department code
2	value	STRING	32	Department name

You can also copy the below codes into the Source tab of the Dataset Editor.

<ColumnInfo>
  <Column id="code" type="STRING" size="32"/>
  <Column id="value" type="STRING" size="32"/>
</ColumnInfo>
<Rows>
  <Row>
    <Col id="code">0</Col>
    <Col id="value">Boardroom</Col>
  </Row>
  <Row>
    <Col id="code">1</Col>
    <Col id="value">Accounting</Col>
  </Row>
  <Row>
    <Col id="code">2</Col>
    <Col id="value">Personal</Col>
  </Row>
  <Row>
    <Col id="code">3</Col>
    <Col id="value">Human resources</Col>
  </Row>
  <Row>
    <Col id="code">4</Col>
    <Col id="value">Sales</Col>
  </Row>
  <Row>
    <Col id="code">5</Col>
    <Col id="value">Marketing</Col>
  </Row>
  <Row>
    <Col id="code">6</Col>
    <Col id="value">Engineering</Col>
  </Row>
</Rows>

Grid

Execute the Grid content editor by double-clicking the Grid. Select the data cell of Department and revise the following items in the properties window. The combodataset item can be entered manually or selected from the list. Once the combodataset item is entered, you can manually enter items on combocodecol and combodatacol or select from the list.

Property	Value	Explanation
displaytype	combo	Data indication format for the cell
combodataset	dsDepartment	Dataset bound to a Grid cell when the cell's displaytype property is set to 'combotext' or 'combocontrol'.
combocodecol	code	Code column
combodatacol	value	Data column

Generate

When you revise a Form which is not ADL, simply create another file with a relevant file format. You can select Generate File, not Generate Application on menu.

[Menu] Generate > File

Nexacro Studio automatically generates a certain file if it is modified and saved. Therefore, you will in fact have an already-generated file without having to access the [Generate File] menu, as described above.

When you execute QuickView again, you can see the Department item shown as a name instead of a code name.

Transaction

Now, let's fetch data from a server using the transaction method. The test will fetch the XML file created with a data format used in Nexacro-based apps.

Data used in this example is written just for testing the retrieval of data. In the actual operating environment, an app should be designed to fetch data stored in a repository.

sample.xml

The XML file to be used in the example is as follows. It is assumed that there are four records and that retrieval has been successful.

XML files are placed under the Generate Path path

The file path is as follows, as explained in the early chapters

E:\88_TEST\01_PROJECT\CustomerList\sample.xml

<?xml version="1.0" encoding="utf-8"?>
<Root xmlns="http://www.nexacroplatform.com/platform/dataset" ver="5000" >
     <Parameters>
          <Parameter id="ErrorCode" type="int">0</Parameter>
          <Parameter id="ErrorMsg" type="string">SUCC</Parameter>
     </Parameters>
     <Dataset id="customers">
          <ColumnInfo>
               <Column id="id" type="STRING" size="4"/>
               <Column id="name" type="STRING" size="16"/>
               <Column id="email" type="STRING" size="32"/>
               <Column id="phone" type="STRING" size="16"/>
               <Column id="comp_name" type="STRING" size="32"/>
               <Column id="department" type="STRING" size="32"/>
               <Column id="comp_phone" type="STRING" size="16"/>
               <Column id="comp_addr" type="STRING" size="256"/>
          </ColumnInfo>
          <Rows>
               <Row>
                    <Col id="id">TC-001</Col>
                    <Col id="name">Dustin Kim</Col>
                    <Col id="email">ceo@tobesoft.com</Col>
                    <Col id="phone">6987-6543</Col>
                    <Col id="comp_name">TOBESOFT</Col>
                    <Col id="department">0</Col>
                    <Col id="comp_phone">6506-7000</Col>
                    <Col id="comp_addr">Seoul</Col>
               </Row>
               <Row>
                    <Col id="id">TC-002</Col>
                    <Col id="name">Sean Oneal</Col>
                    <Col id="email">ibero.Donec.consectetuer@ac.ca</Col>
                    <Col id="phone">7357-3715</Col>
                    <Col id="comp_name">AC</Col>
                    <Col id="department">0</Col>
                    <Col id="comp_phone">7357-7000</Col>
                    <Col id="comp_addr">Lansing</Col>
               </Row>
               <Row>
                    <Col id="id">TC-003</Col>
                    <Col id="name">ieter Valenzuela</Col>
                    <Col id="email">ornare@Maecenasmifelis.com</Col>
                    <Col id="phone">9025-0645</Col>
                    <Col id="comp_name">Maecenasmifelis</Col>
                    <Col id="department">0</Col>
                    <Col id="comp_phone">9025-7000</Col>
                    <Col id="comp_addr">Coral Springs</Col>
               </Row>
               <Row>
                    <Col id="id">TC-004</Col>
                    <Col id="name">Mark Contreras</Col>
                    <Col id="email">vitae.posuere@consectetueripsumnunc.ca</Col>
                    <Col id="phone">7026-3815</Col>
                    <Col id="comp_name">consectetueripsumnunc</Col>
                    <Col id="department">0</Col>
                    <Col id="comp_phone">7026-7000</Col>
                    <Col id="comp_addr">Elmira</Col>
               </Row>
          </Rows>
     </Dataset>
</Root>

Button click event

Add code fetching the data by accessing the sample.xml file instead of adding the data manually to a button click event (divCommand_btnSearch_onclick).

The revised code is as follows. Specify parameters needed for the transaction method and call the method. The transaction method downloads data by accessing a service (or a file) to update a certain Dataset value and calls up the callback once the task is completed.

this.divCommand_btnSearch_onclick = function(obj:nexacro.Button,  e:nexacro.ClickEventInfo)
{
	
     var id = "search";  
     var url = "http://localhost:8080/CustomerList/sample.xml";
     var reqDs = "";
     var respDs = "dsCustomers=customers";
     var args = "";
     var callback = "received";
	
     this.transaction(id, url, reqDs, respDs, args, callback);	
}

The parameters used in the transaction method are as follows:

Parameter	Type	Explanation
id	String	ID distinguishing transactions
url	String	URL of a service or a file requesting transaction
reqDs	String	This represents the Dataset whose data is used in the app and is changed. The parameter's format is as follows: (Dataset designated in a service or a file) = (Dataset revised in the app). Multiple values can be specified with empty spaces between them.
respDs	String	Values specified for receiving transaction results. The parameter's format is as follows: (Dataset modified in the app) = (Dataset designated in a service or a file). Multiple values can be specified with empty spaces between them.
args	String	This represents the parameters applied to the data transaction. The format of this parameter is as follows: parameter_name = value. Multiple values can be specified with empty spaces between them.
callback	String	This is a callback used to process transaction results.

The transaction method has three more parameters including asynchronous, binary and compressed communication. If you omit the parameter, the default value will be applied.

Callback Function

Access a service or a file by the transaction method, and then execute the designated callback function. The callback is created as follows:

this.received = function(id, code, message)
{
     if (code == 0) {
          this.alert(this.dsCustomers.rowcount + " numbers of data have been found.");
          trace(this.dsCustomers.rowcount + " numbers of data have been found.");
     } else {
          this.alert("Error["+code+"]:"+message);
          trace("Error["+code+"]:"+message);
     }
}

As the XML file used in the example always sends a successful message, the result is as below. It shows data on the Grid.

If a transaction URL is not on the same server as a Nexacro-based app, you may experience an Access-Control-Allow-Origin error.

If an error occurs, -1 will be returned as a code while the details on the error will be returned as a message. In some cases, however, only a code is returned without the message. Such cases cannot be specified because they are the exceptions handled by individual servers.

Log

The error messages that appear in Nexacro-based apps and the messages processed the trace method vary slightly according to the NRE or web browsers. Error messages that appear in the process of designing a Form or generating code are displayed on the Output pane of Nexacro Studio.

In the NRE, errors or messages that occur in the process of running apps can still be checked in the Output pane of Nexacro Studio. In web browsers, however, presentation of errors in the log varies according to the configuration of each web browser.

The following section is based on web browser versions listed below. It is subject to change depending on the version in use.

- Google Chrome 61.x

- Firefox 55.x

- Internet Explorer 11.x

Google Chrome

The JavaScript console can be accessed via the menu below.

[Menu] More tools > Developer tools

Firefox

The JavaScript console can be accessed via the menu below. Firefox provides more features and information than Google Chrome.

[Menu] Web Developer > Web Console

Internet Explorer

The JavaScript console can be accessed via the menu below. Developer tools can be accessed directly via the F12 function key.

[Menu] Tools > developer tools > Console

The Microsoft Edge browser's JavaScript console equals that of Internet Explorer in terms of settings.