Creating a Customer List Inquiry Screen

The most basic item used in tasks when creating an application is the inquiry screen. This chapter discusses using the Grid and Dataset components on a form to create a simple customer list inquiry screen .

This section assumes that you have already created the project and form, and have the form open.

Dataset Component

The Dataset component provides data management support for a Nexacro Platform application. It stores data fetched from the server and manages the data change status (add/revise/delete).

This component manages the data in a two-dimensional table format and manipulates the data in a column or row record format. A form can have several datasets and multiple forms can utilize multiple datasets by using Global Variables.

You can add a dataset to a form by selecting the Dataset icon on the Nexacro Studio toolbar and clicking anywhere on the form. Because a dataset is an invisible component used for data management inside applications, it is shown in the UI as an Invisible Objects item.

You can change the following Dataset properties from the Form Properties panel. For further dataset properties, use the Dataset Contents Editor. Check this.

Property

Value

Explanation

id

dsCustomers

Dataset id

Dataset Contents Editor

For general form components, the associated properties can be changed in the properties window. However, to manage dataset properties, you need to use the Dataset Contents Editor. Using the Editor, you can also design columns and add data directly to a two-dimensional table form.

Double-click the dataset to display the Dataset Content Editor.

To add columns to the dataset, click the icon in the Columns section.

This example uses the following columns.

No.

id

type

size

Explanation

1

id

STRING

4

Series No.

2

name

STRING

16

Name

3

email

STRING

32

Email

4

phone

STRING

16

Phone No.

5

comp_name

STRING

32

Company

6

department

STRING

32

Department

7

comp_phone

STRING

16

Company Phone No.

8

comp_addr

STRING

256

Company Address

In the Rows section, you can add data in the same way you add columns.

Review the items that have been added. They are displayed as source code in the editor. If you make any change directly to the source code, it is immediately reflected in the dataset columns.

Component Assignment

The customer list inquiry screen is composed of a title, a search window, a search button and a grid, as illustrated in the picture below.

Set the overall layout and place components by using the guideline, which can be shown or hidden by double-clicking the screen over the graduated ruler.

The components and revised property values used for this sample screen composition are as follows:

Component

Property

Value

Explanation

1 Static

id

sttList

text

Customer List Search

Character string to be shown

font

bold 20 Verdana

Font properties

2 Div

id

divCommand

3 Edit

id

edtSearch

4 Button

id

btnSearch

text

Search

Character string to be shown on button

5 Grid

id

grdCustomers

The Div component plays the role of wrapping several components. Assign the Div component first, and then other components to be wrapped inside it such as the Edit and Button components.

Linking the Grid to the Data

Often when composing a screen that includes a dataset, it is convenient to use the Grid component to bind the data. This will allow display of the data on the screen as well as entering and revising data directly on the grid. The changes are reflected immediately in the dataset.

Binding the Data

Bind the data by designating a dataset id value for the binddataset property, or by clicking the dataset component on Nexacro Studio and dragging it onto the grid component.

The grid form is changed based on the dataset columns.

Formatting the Data in the Grid

If you want to modify how the data in the grid is formatted, you can modify the format property value in the databind properties. The value in the Binding formats property is initially created based on the columns in the dataset.

Double-click the grid, or click the button linked to formats on the Properties window to open and display the Grid Content Editor.

The Grid Content Editor modifies the data formats shown on a grid but does not affect the dataset itself.

Existing formats can be deleted to edit in a new format. Select the head and body on the grid content editor and deletes designated formats by selecting the delete item on the context menu. This is confusing. Needs to be checked.

The newly edited columns are composed of four columns with two head rows and two body rows.

Add head rows by clicking the right mouse button on the Grid Content Editor and choosing Add Head Row .

Adding the head row also adds one column. By selecting Add Column, you can add additional columns.

To show two types of data on col2 and col3, add two head rows and two body rows. You can add body rows by selecting Add Body Row.

Because the col0 and col1 columns connect to only one data source, the cells must be combined. You must select the cells on the col0 head rows, followed by selecting the Merge Cells item on the context menu. When selecting multiple cells simultaneously, drag the mouse after selecting a cell, or select other cells with the Shift key pressed.

If you try a cell combination, you are prompted if you want to retain the current cells' properties. As you will not use the sub-cell properties here, select No.

Combine cells in the body rows in col0 and col1.

If you select several cells with the Ctrl key pressed, the Merge Cells item on the context menu will not be activated.

The following table lists the cell values illustrated in this example.

Column

Head Cell: text

Body Cell: text

Column: size

col0

ID

bind:id

80

col1

Name

bind:name

150

col2

Email

bind:email

200

Phone

bind:phone

col3

Company

bind:comp_name

320

Department

bind:department

Specify cell values by selecting the cell and entering the value in the properties window on the right side.

Click OK after entering the value to show the new value on the grid.

Data Test

To test the functionality of the grid, we will add data using a simple script.

Button Click Event

To process data, add a click event to the btnSearch button:

  1. Select btnSearch button.

  2. Right-click properties.

  3. When prompted, add an onclick event with the value divCommand_btnSearch_onclick.

The event script is as follows. It adds a data row to the dataset and designates a value.

this.divCommand_btnSearch_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
     var row = this.dsCustomers.addRow();
     this.dsCustomers.setColumn(row, "id", "TC-001");
     this.dsCustomers.setColumn(row, "name", "Dustin Kim");
     this.dsCustomers.setColumn(row, "email", "ceo@tobesoft.com");
     this.dsCustomers.setColumn(row, "phone", "6987-6543");
     this.dsCustomers.setColumn(row, "comp_name", "TOBESOFT");
     this.dsCustomers.setColumn(row, "department", "0");
     this.dsCustomers.setColumn(row, "comp_phone", "6506-7000");
     this.dsCustomers.setColumn(row, "comp_addr", "Seoul");
}

Generate the Javascript

To implement your new application on a web browser, convert the current code into a JavaScript file by selecting:

[Menu] Build > Generate Application

The Output window should show the JavaScript being created.

Quick View

After executing the web server on Nexacro Studio, QuickViewis executed.

If you want to execute QuickView on a web browser:

  1. Activate the build toolbar.

  2. Change the browser option. (You can use the web browser on your desktop computer.)

When you execute QuickView on a web browser for the first time, you must type in a path in which the QuickView.html file is located. This path may differ from the Generate path.

While the designated web browser is running, you can check Nexacro Platform applications that are processing by clicking the Search button to display data added from the script to the Grid.