Data as the starting point

Prerequisites

App Builder is required for this tutorial.

Steps at a glance

This tutorial consists of the following steps:

1. Creating a Zero Resource Model model
2. Creating a form, based on a model
3. Creating a Web page that uses the form and a grid
4. Using the created application

Step 1: Creating a Zero Resource Model

1. Create a new application called StudentDetails, as shown in the following screen capture.

   

2. Click New file -> Zero Resource Model in /app/models -> New model and name the created file studentModel.json..
3. Add a String field and set the following attributes: Name to name, label to Name, and required to true.
4. Add a String field and set the name to Surname and set it as a required field.
5. Add a boolean field. Set its name to isRegistered and its label to Is Registered.
6. Add an Integer field; set its name to sId its label to Student ID and its default value to be -1. Mark this field as required.

   The model editor should now look similar to the following screen capture:

   

7. Click New File -> Resource handler in /app/resources/ and name the created file studentModel.groovy. Set its content to: ZRM.delegate().
8. Switch to the Console tab and run the zero model sync command.

Step 2: Creating a form, based on a model

To create a form, based on an existing model, use the following steps:

1. Click New File -> Zero Resource Form in /public/zero/forms->New form based on model, set the file name to studentForm.json, then select studentModel.json as the model name and use the default.json as the template

   The completed dialog should look like the following screen capture:

   

2. The created form should look like this in the form editor's design tab

   

3. By clicking on the form`s title, change the form title to Student Details.
4. By clicking on the form`s description change the form description to Student details form.

Step 3: Creating a Web page that uses the form and a grid

To create a Web page that uses the form and a grid, use the following steps:

1. Click New File -> HTML page in /public; name it index.html.
2. In the palette, switch to the Data tab and create a ZRM data store called studentStore, as shown in the following screen capture:

   

3. In the palette, switch to the Create tab.
4. Create a Zero data grid (from the Zero section of the palette), set the ID to gridId and the data store to studentStore, as shown in the following screen capture:

   

5. Create a Zero form, set the ID to theForm, the model location to ./zero/forms/studentForm.json and the data grid ID to gridId, as shown in the following screen capture:

   

   The Usage of "data grid ID" attribute simplifies the linkage between the form and the grid. If you want to link the form and the grid in a flexible way, leave "data grid ID" blank, and switch to Source tab of page editor, then add the following code in the script tag:

   dojo.addOnLoad(function(){
   	var zeroGrid = dijit.byId("gridId");
   	// connect form and grid in a syncronized fashion
   	dojo.connect(zeroGrid.grid,"onSelected",function(){
   		var rows = zeroGrid.grid.selection.getSelected();
   		var item = zeroGrid.grid.model.getRow(rows[0]).__dojo_data_item;
   		dijit.byId("theForm").setValues(item);
   	});
   });
   

Step 4: Using the created application

To use the application you have created, use the following steps:

1. Start the application.
2. Open a browser tab in localhost:8080.
3. Enter values to the form and click submit. See that these values are visible in the grid, as shown in the following screen capture:

   

4. Select an entry in the grid and view its values in the form.
5. Stop the application.