File Maintenance Generator

Grid

Step 6: Field Layout

Note:
The Grid option is only available when the HTML Page check box is selected for Form Type.

The Add a Webster+ Grid window is used to add (and edit) a Grid control on the file maintenance HTML page only. It is not available for file maintenance NOMADS panels.

(The ability to add/edit a Grid was added in PxPlus 2022.)

To invoke this window, use one of the following methods:

• Click the Add Object button (above the Layout Grid) and select the Grid option. OR

• Right click on a cell in the Layout Grid, select Add Object from the popup menu and then select the Add or Edit a Grid option.

The data entered in the Column Definitions grid is used to define the Webster+ [grid] and [col] short codes, which are needed to render a Grid on the generated HTML page. See Using Grids in Webster+.

For an example of a Grid definition, see Grid Example.

This window consists of the following:

Grid Variable

Enter the name of the Grid variable that will be the handle to the memory file used to load the Grid.

The Grid must be associated with an HTML Interface Program (entered in Step 1: Definition) that contains a method for loading the Grid using a memory file. The HTML interface program must contain the method:

LOAD_xxxx

Where:

xxxx (case insensitive) is the Grid Variable entered (e.g. ADD_GRID_1).

For an example of a Grid definition with a sample Load_MyGrid method, see Grid Example.

The Grid Variable defaults to ADD_GRID_1, ADD_GRID_2, etc.; however, it can be changed to any numeric variable. Other events that are associated with entering values in the Grid at run time are also added to this interface program.

Size

Width

Enter the width for the Grid either in number of Columns (Default) or as a Percentage of the column width.

When Columns is selected, the width defaults to Auto. In Webster+, a width of Columns - Auto will result in the Grid being just wide enough to display all of the columns or fill the section. To set it back to Auto, enter 0. Otherwise, enter the desired value or use the spinner control. Valid entries are 0 to 300.

When Percentage is selected, the percentage defaults to 100%. Otherwise, enter the desired percentage or use the spinner control.

Height

Enter the height for the Grid in number of lines or use the spinner control. Valid entries are 0 to 255. Default is 10.

Appearance

Grid Class	Controls the appearance of the cells in the Grid. A single Grid Class can be entered (e.g. bold). Multiple classes can be entered, separated by either spaces or commas. When spaces are used as the delimiter, the values must be within double quotes (e.g. "bold text_red fill_cyan" or bold,text_red,fill_cyan). See Webster+ Defined Classes.
Header Class	Controls the appearance of the Grid header row. A single Header Class can be entered (e.g. bold). Multiple classes can be entered, separated by either spaces or commas. When spaces are used as the delimiter, the values must be within double quotes (e.g. "bold text_red fill_cyan" or bold,text_red,fill_cyan). If no text color is specified for the Header Class, the text color for the Grid Class will be used. See Webster+ Defined Classes.
Grid Lines	Check box to indicate that lines will be shown between the Grid columns and rows. By default, this check box is selected.
Include Drag Column	Check box to indicate that the first column in the Grid will be a "Drag" column, which will have a triple bar symbol that is used to drag a row up/down in the Grid. By default, this check box is not selected.
Include Delete Column	Check box to indicate that the last column in the Grid will be a "Delete" column, which will have a trash can symbol that is used to delete a row in the Grid. By default, this check box is not selected.

(Header Class was added in PxPlus 2022 Update 1.)

Interfaces

Initialization Program

The program and method (separated with a ; semi-colon) that is to be run to load the Grid memory file.

If an HTML Interface Program has been entered in Step 1: Definition, the Initialization Program will default to that interface_program+';load_'+grid_variable (e.g. interface_program;load_ADD_GRID_1).

If the Grid is being defined elsewhere in the interface program (such as the FM_INIT method), the Initialization Program may be left blank (shows <none>).

(Initialization Program was added in PxPlus 2022 Update 1.)

Column Definitions

The data entered in the Column Definitions grid is used to define the Webster+ Short Codes on the generated HTML page.

For each column to be added to the Grid, define a new row with the following details:

Definition Type

Type of Grid column being defined: Simple Variable, File or Data Class. Defaults to Simple Variable for the first column when defining a new Grid.

To select a Definition Type, click the Query button (magnifying glass) to invoke the Grid Column Definition Type window:

All Nodes Collapsed

Specific Nodes Expanded

This window displays a tree view and consists of the following:

Simple Variable	If the Grid column does not relate to a field in a data file or to a data class, select Simple Variable.
File	If the Grid column relates to a field in a particular data file, expand the File node and select a file from the list of data files in the data dictionary, organized by group.
Data Class	If the Grid column relates to a particular data class, expand the Data Class node and select a data class from the list of defined data classes. See Data Classes.
Expand (Collapse)	Toggle button that either expands or collapses the entire tree view. To collapse or expand a single "parent" node, click the corresponding + plus or - minus sign.
Ok	Enters the selected Definition Type into the Column Definitions grid.
Cancel	Cancels any selections and returns to the Column Definitions grid.

When a File is selected, the Definition Type is populated with the group and file name, and the Variable column drop box is loaded with fields from that file. At the same time, a new row is added to the Column Definitions grid with Definition Type defaulting to the same file name. By defining a Grid column in this way, the usefile=xxx option will be used with the [col] short code, allowing additional options (i.e. format, default, etc.) to be set from the data dictionary.

When a Data Class is selected, the Definition Type is populated with the data class. The values for Variable, Title, Width and Cell Type default into the Column Definitions grid based on the data class definition; however, this can be changed. By defining a Grid column in this way, the dataclass=xxx option will be used.

When Simple Variable is selected, any options that are needed must be specified in the Other Options column.

Variable

If the Definition Type is Simple Variable, enter a unique name for the variable in the Grid definition.

If the Definition Type is File, select a field from the Variable drop box, which will be loaded with fields from the selected data file.

If the Definition Type is Data Class, the name of the selected data class is defaulted as the variable; however, this can be changed.

The variable must also correspond directly to the variable in the IOList that is used in the HTML Interface Program entered in Step 1: Definition to load the memory file corresponding to the Grid.

Title

Enter the title to display for the Grid column.

Width

Enter the width for the Grid column. It should be wide enough to display the Title and the data.

Align

Select the alignment for the data in the Grid column: Left, Right or Center. Default is Left.

Cell Type

Select the type of cell being defined:

Normal	*(Default)* Normal text cell that contains one line of data.	See [input] short code.
Button	Contains a button.	See [button] short code.
CheckBox	Contains a check box with no 3D effect.	See [checkbox] short code.
DropBox	Allows a selection to be made from a drop-down list.	See [list] short code.
Image	Contains a specified image.	See [image] or [picture] short codes.
ListBox	Allows a selection to be made from a list box.	See [list] short code.

Lck

Check box to indicate that the Grid column will be locked to prevent its contents from being changed. Defaults to On if Definition Type is a File and the selected field (in the Variable column) is defined as Read Only in the data dictionary.

Note:
If a data dictionary field is defined as Read Only but the Grid column being defined should not be locked, uncheck the Lck check box and enter locked="" in the Other Options column. See locked short code option.

Other Options

Specify other short code options that are associated with the [input] short code or other cell types (if needed).

See Webster+ Short Code Options.

Examples:

class=bold,text_red	See class=xxx short code option.
event=button_event	See event=xxx short code option.
format="###.00"	See format=xxx short code option.
query=scrnlib.en;client.q	See query=xxx short code option.
tip="Enter Client Name"	See tip=xxx short code option.

Multiple options can be entered for each column with a space separating each option.

For an example of a Grid definition with options entered, see Grid Example.

Insert Above
Insert Below

Adds a blank row above or below the currently selected row for creating a new column.

Delete

Removes the currently selected row, which also removes the column from the Grid being defined.

Move Up
Move Down

Changes the order of the existing columns in the Grid being defined.

Grid Example:

The example below shows a Grid definition with eight rows of data entered in the Column Definitions grid:

•	Rows 1, 2, 3 and 5 define columns that are based on the SalesRepCode, Name, ImagePath$ and ytdOrders fields in the Salesreps data file.
•	Row 4 defines a column that is based on the Department data class.
•	Rows 6, 7 and 8 define columns that are based on Simple Variables named email$, image$ and comments$.

The following program, which contains an event (Mail) and a method to load the grid (Load_MyGrid), was defined as the HTML Interface Program:

! grid_interface demo program
!
     goto lno(_event$,err=*next)
     %webster'msgbox("Invalid event: "+_event$,"Internal Error - "+pgm(-3),"!")
     exit
!
Mail:
! code needed when Mail button is pushed
     %webster'msgbox("Pushed Mail button","Button event","!")
     exit
!
Load_MyGrid:
     enter MyGrid
     if MyGrid<>0 \
          then exit
     open (hfn,iol=*)"salesreps"
     reps=lfo
     open (hfn,iol=MyGridIOL)"*memory*"
     MyGrid=lfo
     select * from reps
          write (MyGrid)
     next record
     close (reps,err=*proceed)
     exit
!
MyGridIOL: \
     iolist SalesRepCode$,Name$,ImagePath$,Department$,ytdOrders,Email$,Image$,Comment$

When the HTML file is generated, the Webster+ short codes for this Grid look like this:

[grid MyGrid program="test_interface;Load_MyGrid" gridlines size=Auto/10 class=""]
     [col width=5 ttl="Drag" align=center event=*Rowdrag][symbol reorder][/col]
     [col usefile=Salesreps source=SalesRepCode$ ttl="Sales Rep Code" width=20 align=left class=bold,text_red]
     [col usefile=Salesreps source=Name$ ttl="Name" width=25 align=left]
     [col ttl="Image" width=6 align=center][picture file=(ImagePath$) size=6/2][/col]
     [col ttl="Department" width=24 align=left][list Department$ dataclass=Department program=*class;ClassList,"Department"][/list][/col]
     [col usefile=Salesreps source=ytdOrders ttl="YTD Orders" width=15 align=right locked]
     [col ttl="Send Email" width=12 align=left][button email$ size=auto   size=11/1.5 event=mail][symbol envelope] Email[/button][/col]
     [col ttl="Fixed Image" width=12 align=left][picture size=auto file=*plus/inomads/sysimage/book_open.png][/col]
     [col source=comment$ ttl="Comment" width=20 align=left tip="Enter Comment"]
     [col width=4.5 align=center ttl="Del"][symbol trash event=*Rowdel][/col]
     [/grid]

In Webster+, the Grid looks like this:

This Grid shows the following, based on the Grid Definition:

•	The Drag column is shown because the Include Drag Column check box was selected.
•	The Grid is loaded with records from the Salesreps file in the data dictionary. All the columns are populated, except for Comments, which is not a field in the Salesreps file.
•	The Sales Rep Code column contains a query button because the SalesRepCode$ field was defined with a query in the data dictionary. The data in this column is red and bolded because a class was entered in the Other Options column.
•	The Image column was defined with a Cell Type of Image and contains the image referred to in the ImagePath$ column of the Salesreps file with a width of 6 and a height of 2. If no size was specified in the Other Options column, the cell would be made large enough to fit the image.
•	The Department column shows a drop-down arrow in each cell because the Department data class was defined for a Drop Box control, which the Cell Type column indicates.
•	The YTD Orders column is locked because the ytdOrders field was defined as Read Only in the data dictionary. The data in this column is right aligned because Right was selected in the Align column.
•	The Send Email column shows a button in each cell because Button was selected in the Cell Type column. The button's size, symbol, text and event are based on the text, symbol, size and event options that were entered in the Other Options column. When the button is clicked, the mail event in the HTML interface program will be triggered. This needs to be coded to determine the email address and launch the email program.
•	The Fixed Image column is defined with a Cell Type of Image and displays the file specified in the Other Options column in all rows of the Grid.
•	The Comments column shows a tip when you hover over it because a tip option was entered in the Other Options column.
•	The Del column is shown because the Include Delete Column check box was selected.

File Maintenance Generator

Note: The Grid option is only available when the HTML Page check box is selected for Form Type.

Note: If a data dictionary field is defined as Read Only but the Grid column being defined should not be locked, uncheck the Lck check box and enter locked="" in the Other Options column. See locked short code option.

Grid Example:

Note:
The Grid option is only available when the HTML Page check box is selected for Form Type.

Note:
If a data dictionary field is defined as Read Only but the Grid column being defined should not be locked, uncheck the Lck check box and enter locked="" in the Other Options column. See locked short code option.