Grid Fields

Grid Field Properties

The Grid Fields page is where you define what fields you will use in your grid, insert special controls, and set properties for individual controls. To display an individual field's Properties menu simply select that field in the Selected: Fields list. The properties for each field control you select are defined on the right side of the screen. These Field Properties change depending on the control selected, whether that control is editable or not, and the nature of the grid layout selected. The default values for these properties produce a useable starting configuration for your grid. This means that you can largely ignore these optional properties when you are learning to build grids or you expect to gradually refine your design in later revisions.

By default the Field Properties for any given field are displayed by Category. Right clicking on the white space in the Field Properties list will display other options. These include Categorized , the default, which displays menu options in groups; Alphabetical , which displays all menu options in a single alphabetized group; The Toolbar visible option, which displays buttons that switch between Categorized and Alphabetical display modes; and the Help visible option, which displays help for the currently selected property at the bottom of the property menu

Display Settings

Control type

If your grid is ' Read only ', then the fields that you put on the grid will be displayed by default using Label  controls. If the grid is Updateable , then the fields initially will be displayed using textbox controls. Label controls display the value of the field but do not have a width setting. In contrast, Textbox controls always have a specified character width, even if the field is Read only. For some data types, such as Images  and dates, you will have to manually select the control type. You can select other control type by using the Control Type dropdown under Display Settingsin the Field Properties list. The types of controls that you can place on a grid are:

Control javascript

You can specify Javascript for each control in the Grid's Grid part or Detail View part. This makes it very easy to use 3rd party libraries, such as jQuery, to decorate controls. When you define the Javascript for a control, you can use the special {grid.controlId} placeholder. This placeholder gets replaced at run-time with the actual Id of the control. Example code to use the jQuery datepicker (ignore any markers you see):

Display format

If the control type is Label, Link, TextBox, or TextArea, the Display Format property allows you to automatically change the presentation of your data. For example, a money value could be displayed with its currency symbol and commas, and with the correct number of decimal characters. An In-Line style overrides the formatting of the cascading style sheet. If you wanted the text to be bolded, or in a different font, point size, or color, this is where you would define the formatting. You may want to allow only certain users to see a field. To do this set a minimum user security level required before the field will display. You may want to allow the user to see the fields in a grid, but not edit, delete, or insert records. To do this, set three different permission properties that control grid update. You may also want to define validation rules to improve the quality of user input.

This expression formats the data after it has been entered into the field. Click to display the Display Format dialog box. This property should be set to one of the following values: Null (empty) An Xbasic expression that returns a character value. The expression should use & < value> as Placeholder for the field value, as in the following example: f_upper(& < value>).  Optionally, click Select Pre-Defined Format to select a format from the Pre-Defined Formats dialog box. Note : There are no predefined display formats for short time (Y) fields. However, you can write your own. Note : If the control type is "TextBox" and the field type is "Date", then a Date Picker will appear. You must set the tmpl.Field_Info[N].DatePicker.DateFormat to the same style. See Date Picker DateFormat.

Initial value

Bubble help

Validation rules

The Validation rules property defines how your grid component will respond when a user inputs data into an editable field. As with the Field Properties list, these rules change depending on what type of control you are working with.

• Invalid data type error message

  The 'Invalid data type error message' rule works with all fields except character fields. This rule allows you to define a message that will display if the user types in an invalid date, time, short time, or number into an input field.

  

Validation Xbasic

Immediate validation

Has help

Client Side Properties

'Client-side' properties for a Grid include Calculated Fields, Show/hide Fields, Enable Expressions, Conditional Styles, and Client-side Formatting. Client-side Calculated fields are computed using Javascript. The calculation is performed as soon as any of the operands, i.e. javascript variables, in the client-side calculation change. You must therefore add formatting logic into your client-side calculated expressions. To see an example watch this video.

• Watch Video

Show/hide Fields

Show/hide Fields can be used with any field or Container. If you want to show/hide multiple fields at once, wrap the fields in a the show/hide expression for the container. Hiding fields can be useful. For example, you might have a grid with a 'billing address'field, a 'shipping addressfield', and a " shipping address is the same as billing address' field. If the later is checked, you might then want to hide the entire shipping address part of the grid. Here is the video.

• Watch Video

Enable Expression

Enable Expression allows you to enable or disable an input control. Conditional Styles contain conditions that are evaluated in a Browser using Javascript. This makes it possible to dynamically style controls without having to make Ajax callbacks. For example, if a user enters an exceedingly large value into a Quantity field, the entry can immediately be displayed in red to show it is too big. In contrast to 'client-side' conditional styles, 'server-side' conditional styles use conditions that are expressed using Xbasic expressions. These conditions are then evaluated on the server. The video below shows how client-side conditional styles can be used to display a different font and background color depending for different ranges of values.

• Watch Video

Client-side Formatting

can be used to define masks for character fields or number formats for numeric fields. For example, you might use a mask in formatting a US Phone number: ( ) -. For more on using client side properties check out this video.

• Watch Video

Control Properties

Label Properties

• In-line style

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

  tmpl.Field_Info[N] .Label.InLineStyle as C

TextBox Properties

The most important properties of a TextBox control are the Size and MaxLength properties. The MaxLength should match the field definition in your table. The size can be large>

• HTML5type

• Size

  Sets the width of the field in characters.

  No matter what you specify for height and width of a control, if the content is larger, then your browser will expand the table cell for you. There is no way to avoid this from the design of your grid or HTML. You can trim your data if it is crucial that your cells never expand. And even then, you have no control over the fonts being used by your user's browser so they could have things set to be really large and still be larger than the table cell.

• MaxLength

  Sets the maximum length of the user's input in characters.

• In-line style

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

• Container in-line style

• Is a password field

  If this is a password field, the characters will be replaced with bullets.

• Watermark

  Sometimes, the size of screen matters when a user is accessing an application you've created. So how do you build an effective application to be used when screen real estate is limited, such as an Ajax Web app that will run on an iPhone? That's why "liquid" forms are an increasingly popular platform for running Web applications today. Liquid forms automatically reconfigure themselves based on the screen size. That's necessary for something like a smart phone,ine- color: initial; " This first video  we put together will show how the grid makes it easy to design liquid forms. Watermark fields    are also an effective tool for dealing with small screen sizes. Watermark fields let you put the field label inside the field itself. This is a great way to save space when you don't have space to spare.

  • This first video
  • Watermark fields

• Custom attributes

• Code Examples

  • Size

    tmpl.Field_Info[N] .Textbox.Size as N

  • MaxLength

    tmpl.Field_Info[N] .Textbox.MaxLength as N

  • Date Picker

    Specifies whether the control should have a pop-up calendar.

    tmpl.Field_Info[N] .DatePicker.Display as L

  • In-line style

    tmpl.Field_Info[N] .Textbox.InLineStyle as C

  • Is a password field

    tmpl.Field_Info[N] .Textbox.IsPassword as L

  • Control In-line error style

    Specifies style attributes that are used when a validation error occurs. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.Field_Info[N] .Textbox.ErrorInlineStyle as C

TextArea Properties

The most important properties of a TextArea control are the Rows and Columns properties, which define its size.

• HTML editor

  If you are creating an Updateable grid you can check the HTML editor property checkbox and add an HTML editor to your grid. This will allow users to easily add HTML to their records. If you want to add this property to a number of fields then you will need to go to Display Settings in the Field Properties list and change the Control Type for each field to TextArea . After creating a second TextArea control, simply check the HTML property again for that control, or use the eyedroppertool.

• The HTML editor comes with a number of additional properties. HTML editor width defines the width between columns that the unopened editor fills. Similarly HTML editor height specifies the row height of the unopened editor. These properties are for the default editor, where a user clicks on a given TextArea control to open the HTML editor for that record. However, you can also define a Popup mode by checking the HTML editor is popup property checkbox. When you add a popup HTML editor to the Grid, to edit HTML fields, the data in the Grid is not saved when the user closes the popup HTML editor. The data is only saved when the user clicks the Submit button. The Save grid data when closing popup editor property allows you to automatically submit the data in the Grid as soon as the popup HTML editor is closed. Unopened HTML editor width

  

• An Open HTML editor

  
• 

• Rows

  Sets the height of the control by specifying the number of rows.

  tmpl.Field_Info[N] .TextArea.Rows as N

• Columns

  Set the width of the control by specifying the number of columns.

  tmpl.Field_Info[N] .TextArea.Cols as N

• In-line Style

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

  tmpl.Field_Info[N] .TextArea.InLineStyle as C

• Watermark

  Sometimes, the size of screen matters when a user is accessing an application you've created. So how do you build an effective application to be used when screen real estate is limited, such as an Ajax Web app that will run on an iPhone? That's why "liquid" forms are an increasingly popular platform for running Web applications today. Liquid forms automatically reconfigure themselves based on the screen size. That's necessary for something like a smart phone,ine- color: initial; " This first video  we put together will show how the grid makes it easy to design liquid forms. Watermark fields    are also an effective tool for dealing with small screen sizes. Watermark fields let you put the field label inside the field itself. This is a great way to save space when you don't have space to spare.

Link Properties

An essential decision about a link control is what it will display. The options are: Value in field, Value from other field(s), Static text, Static image, Image in another control Link controls have choices for the Link address type. The link could be: a URL (presumably also a field value), an email address (presumably also a field value), a link to the detail view form, a value that is computed (see Link Address Builder ), a value that specifies filter, order, and/or linking informationfor the records in a second grid

with tmpl.field_info[N] .link.InLineStyle as C

• In-line style

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

• Display what in link?

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details. Specifies what is displayed in the link. The options are:"Value in field", "Value from other field(s)", "Static text", "Static image", "Image in another control"

  Field(s) to display - Specify the HTML to display in the link. Use field placeholders to include values from other fields in the grid. Typically, the fields that you reference will have the Hide row or Hide column properties checked. Static text - Specify the text to display in the link. Static image - Specify the image to display in the link. Dynamic image control - Specify the control that contains the image to display. Link address type

  with tmpl.field_info[N] .link.DisplayType as C

• Using Images in Link Fields:

  • Open the Grid Builder . On the Design tab click on the Component Type page and select Tabular in the Grid Layout menu.

  • Open the Data Source page and select either .dbf or SQL .

  • On the Query(DBF) or Query(AlphaDAO) page select the table you will work from.

  • Open the Fields page. Select several fields and move them from the Available Fields: list into the Selected: fields list; using the arrows between the two list.

  • Select the field that you want to contain the linking data.

  • Go to the selected field's Field Properties list. Under the Display Settings section find the Control type property. Set the control type to 'link '.

  • Now go to the Link Properties section of the Field Properties. Find the Display what in link? property and select "Image in another control ".

  • While in Link Properties set the Dynamic image control property to the name of the image field you wish to display. For the Link address type property select "DetailView link ".

  • Images may be used in hyperlinks and in link fields to detail view forms.

    

  • Preview of the grid showing both ID and Thumbnail fields before modification.

    • 1. For the field that contains the linking data:

      • 1. In Display Settings > Control typeset the control type of the field to "link".

      • 2. In Link Properties > Display what in link?select "Image in another control".

      • 3. In Link Properties > Dynamic image controlselect the name of the image field that you wish to display.

      • 4. In Link Properties > Link address typeselect "DetailView link".

    • 2. For the field that contains the image you wish to display:

      • In Column Properties > Hide columncheck the check box. Preview of the grid after modification showing the Thumbnail image in the ID field:

        

• Static Text:

  You use the Link Display Valuedialog box to compose the HTML code that will be displayed in a link. The link may contain references to any of the fields on the grid.

  with tmpl.field_info[N] .StaticText as C

  • 1. Select the field placeholders in the Available Fieldslist that you want to use in the link expression.

  • 2. Arrange the field placeholders in the order that you want to see them in the expression.

  • 3. Optionally, add any text that you want around the fields.

  • 4. Optionally, click HTML Editorto use it to format the expression.

  • 5. Click OKto save your work or Cancelto discard it.

• Link address type

  You can specify that the link address type is 'Javascript'. Any Javascript function call or command can be added to the 'onclick' event. The Javascript will be executed when the link is clicked. "Field Value is a Link address" , "Field Value is an email address" , "DetailView link" , "Computed from fields in the grid" , "Javascript"

  with tmpl.field_info[N] .Link.Type as C

  

• Javascript link with an onClick event opening an alert box.

  

• Link Address

  When the Link address type is "Computed from fields in the grid", this field appears. Click to define the link address in the Link Address Builder .

  with tmpl.field_info[N] .link.ComputedAddress

  • Link Address Builder

    A common requirement is to open a page that contains a grid component, showing just records that match certain values. For example, assume that when you click the hyperlink, you want to open a page named CustomerInfo.A5w. We will make the following assumptions about this page:

    • The page contains a Grid component named customers.

    • The table has a field named Customer_ID.

  • Alpha Anywhere .DBF Syntax

    If the data is coming from an Alpha Anywheretable, the filter expression that we want to apply to the customersgrid on the CustomerInfo.A5wpage is therefore:

    customer_id="{customerID}"

  • where {customerID}is the value in field for which we are defining the Link control. Grid components understand two special parameters: _Filterand _Order. So, to open the CustomerInfo.A5wpage showing just the records that we want, the computed link address is:

    CustomerInfo.A5w?customers_filter=customer_id="{customerID}"

  • Other example computed link address are:

    CustomerInfo.A5w?customers_filter=firstname="{firstname}".and.lastname="{lastname}"?customers_order="{lastname}" OrderInfo.A5w?orders_filter=orderid="{orderid}"

  • SQL Syntax

    The syntax for the "Filter" and "Order" parameters must be appropriate for the database on which the Grid component is based. SQL syntax typically uses single quotes for character values and "AND" and "OR" to join conditions (as opposed to .AND.and .OR.which Alpha Anywhere uses for querying local tables). So the above examples would become:

    CustomerInfo.A5w?customers_filter=customer_id='{customerID}' CustomerInfo.A5w?customers_filter=firstname='{firstname}' AND lastname='{lastname}'?customers_order={lastname} OrderInfo.A5w?orders_filter=orderid='{orderid}'

  • Composing a Link Address:

    If you have a field in your grid where the Display Settings > Control Type is "Link":

    • Click or in the Link Properties > Link Address field to display the Link Address Builder.

    • Select a page from the Pages in Project list and click Insert Page.

    • Position the cursor in the Link Address text box, select a field placeholder from the Grid Fields list, and click Insert Field. Repeat as Necessary.

    • Add additional syntax elements as Necessary to the Link Address text box.

    • Click OK to save your inputs or Cancel to discard them.

    • See Also, Creating Grid Components, Automatically Populating Linking Field Values

• Target frame or window

  The default is "Explicit". Defines where to display the linked page. The default is Null. The options are: Blank (opens in a new window) "Explicit", "WindowName" (e.g. "Window2"), "_blank", "_parent", "_self", "_search", "_top"

  tmpl.Field_Info[N] .Link.targetFrameOrWindow as C

  • Clear Parameters

    The default is .F. . Specifies whether the target URL preserves existing parameters.

    tmpl.Field_Info[N] .Link.ClearParameters as L

  • Scroll to Detail View

    The default is .T. . Specifies that the page should scroll down to display the detail view form when a record is selected.

    tmpl.Field_Info[N] .Link.ScrollToDetailView as L

  • Additional Code Reference

    • Field(s) to display

      with tmpl.field_info[N] .link.DisplayExpression as C

    • Static image

      with tmpl.field_info[N] .StaticImage as C

    • Dynamic image control

      with tmpl.field_info[N] .link.AlternateImageControl

Image Properties

This concerns Image properties for images based on field controls. For more information about using image files as Links, see using images in Link Fields.

• In-line style

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details .

  tmpl.Field_Info[N]         
  .Image.InLineStyle as C

• Text description

  The text description of the image. 

  tmpl.Field_Info[N]         
  .Image.Alt as C

• Embed image in HTML

• Scale image on server

• No image found image

• New record image

• Related Properties

  • Image name

    The name of the image to display. 

    tmpl.Field_Info[N]         .Image.Imagename as C

  • Is Hyperlink

    Is the image a hyperlink?

    tmpl.Field_Info[N]         
    .Image.IsHyperLink as L

  • Hyperlink target

    The page to display when the link is clicked. 

    tmpl.Field_Info[N]         
    .Image.hyperlinkTarget as C

  • Target frame

    The name of the window that will display the new page.

    tmpl.Field_Info[N]         
    .Image.hyperlinkTargetFrame as C

  • Image path

    For image file references: the folder where the images are stored. 

    tmpl.Field_Info[N]          
    .Image.ImagePath as C

DropDownBox Properties

DropDownBoxes are appropriate when you want to select a value from a large list of alternatives. The most important properties for a dropdownbox control is the definition of its choices and its height. A height of 1 produces a combo box. A height greater than 1 produces a list box. If you set the height to be more than 1 line, you can also set the multi-select allowed field to "Multiple". This allows the user to select more than one value to insert into the field. (Commas will separate the resulting selections) Note :DropDownBoxes do not allow the user to enter new values.

RadioButton Properties

RadioButton controls are appropriate when you want to select between a small number of choices. The most important property for a check box control is the definition of its choices. When you allow the user to select multiple values, the control returns an array. To convert an array to a character value, you need to use an expression like the following:

TargetVariable=crlf_to_comma(ControlName.dump()

CheckBox Properties

Check boxes are appropriate when you want to set a True/False value into a logical field. The most important property for a check box control is the definition of its choices.

• Choices

  Click to define the true and false choices set by the check box. Refer to Defining Choices for Check Boxes, Radio Buttons, and Drop Down Listsfor details.

• Orientation

  The orientation of the label. The choices are: "Horizontal" "Vertical"

  with tmpl.field_info[N]       .CheckBox.Orientation as C

• In-line style

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

  with tmpl.field_info[N]       .CheckBox.InLineStyle as C

• Not in list rule

  Specifies the value to set if the user input does not match a specified choice. The options are:

  • "First Entry" - use the first entry in the list

  • "Null" - set the field to NULL

  • "Do Nothing" - accept the user input

  • with tmpl.field_info[N]      .CheckBox.NotInListRule as C

Date Picker Properties

A date picker is a variation on a TextBox control. The date picker option appears in a TextBox control if the grid is updateable.

Custom Control Properties

The Custom control is a control where the data contents and formatting of a column (or row) is defined by your Xbasic and HTML code. A custom control can reference a number of grid component and data variables, including the value of data in other grid cells. A custom control can create its own variables to carry values between cells of the grid. There are no important constraints upon what the grid cell of a custom control can display, other than that it must contain valid HTML code. This means, for example, that row-by-row, the type of web control that appears in a grid cell could vary from label to textbox to drop down listbox.

A custom control with a dynamic background and font.

The following will show how to create a custom control similar to the one above. This is a custom control where Xbasic dynamically sets the font and background properties, depending on whether the Unit Price value is above or below the average. The Average for this grid is computed by simply adding an average Summary value to the component.

Variables

You may dimension local variables of any type within the fieldname_render()function. However, if you want to create variables that have scope beyond the current grid cell, you must define it as an element of either the:

• argspointer (valid for the grid page)

• sessionpointer (valid for the session)

For example, this code is able to create a running total of the Extensionfield by adding values to session.rt.

if eval_valid(" session.rt") = .f. then  
    session.rt = Data.EXTENSION  
else  
    session.rt = session.rt + Data.EXTENSION   
end if

Define Xbasic For Custom Control Dialog

As the example above on creating a custom control demonstrates, getting to the Define Xbasic for Custom Control Dialog is fairly straightforward. After defining a grid table you go to the Fields page and add some fields to the Selected: fields list. You then go to the Field Properties list and change the Control type of the selected field control to Custom . From there you go to the Custom Controls Properties and click the button next to the Definition property.

When the Define Xbasic for Custom Control dialog loads, you will see some code that lays out a default function for you based on whatever field you selected as your custom control. This is only a framework, you will have to create the code that determines what you want your custom control to do. There are, however, some tools to help make this task easier. The Insert button at the top of the dialog can add Row values, Grid Data Values, Summary values, and System variables to your function's code through a series of point and click events. To insert Current Row Values , i.e. the value of any field in the Current Row, click Insert select Data and then choose the FieldName that you want to add to your code . To insert Grid Data Values , or the value of any of the fields on any of the rows of the current grid page, click Insert > Args > Data > RowNumber > FieldName . If the grid has any Summary values , then you can insert any of them by clicking Insert, selecting Args, then Summary, FieldName, and finally the SummaryType you want. Finally, The Define Xbasic for Custom Control dialog provides several System variables that you can use in your calculations by clicking Insert > Args > Info > System variable .

Hidden Properties

The Hidden control type displays a grid column (or row), but does not display any data. This is different from the Hide property, that hides a grid column (or row). In this example we would like to achieve three goals:

1. Set the value of a field with a script in the CanInsertRecordevent

2. Display the value of said field.

3. Prevent the user from editing the field.

[Tab Control]

A tab control allows you to selectively hide and display different groups of fields. Refer to Setting Grid Tab Properties.

[Tab Pane]

[Tab Control End]

[Frame Begin]

When designing a grid component with Columnar formatting, you may position controls by placing them into frames. A frame has a label and places a box around selected fields. You can use the frame feature in columnar layouts, such as columnar grids, search forms, and detail view forms. This example shows how to create a columnar grid with 2 frames.

Using Frames for Control Positioning:

1. Open the Grid Builder and create a new blank grid. On the Component Type page select Form (Columnar) under the Grid Layout menu.

   

2. Under Data Source select either .dbf or SQL .

3. On the Query(DBF) or Query(AlphaDAO) page connect to the table that you will use to extract data. If using SQL make sure to set the primary key to a field you will use from your table.

4. Go to the Fields page. There should be a number of fields in the Available Fields: list. Highlight a field

5. Click the right arrow to move fields from the Available fields: list to the Selected: fields list.

   

6. Add three more fields to the Selected: fields list. Next, check the editable? checkbox next to the Selected: fields title.

   

7. The Notice dialog will appear. Select all fields and click OK .

   

8. The fields you selected should now appear as textbox controls. Highlight the first two fields in your Selected fields: list by holding down the Shift key and clicking on each field.

   

9. Click the Insert.. hyperlink underneath the Available fields: list.

   

10. The Insert Special Control dialog will open. Select a [Frame begin] control and click OK .

    

11. An Insert Frame dialog will appear. Give the frame a Label name that describes the two fields you selected. For example, Customerfor a Firstand a Lastnamefield or Locationfor an Addressand a Cityfield.

    

12. You should now see a [Frame:] control and a [Frame End] Control around the first two field controls in the Selected: fields list.

13. Add a second [Frame] control around the last two fields in your Selected fields list using the same steps.

    

14. Go to Live Preview . You should see something like this:

    
    On the Grid > Properties page, under the Layout Options section, there is a Number of 'Layout' Columns  property that specifies the number of columns inside each record column. By default this is set to 1. Below you can see how changing this property will alter the look of your [Frame] control.

15. Go to the Layout Options section on the Grid> Properties page. Change the Number of 'Layout' Columnsproperty to 2. Go back to Live preview, Framed fields now appear next to each other on the same row:

    

16. On the Grid Properties page go to the Layout Options section and set the Repeating Columnsproperty to 1 and the Rows of Data property to 2. Go to Live Preview :

    

17. On the Fields page add a third field to your second [Frame] control. You can use the Up and Down arrows to the right of the Selected: fields list to position the field vertically. Check field is editable?

    

18. Layout Options > Number of "Layout" Columnsproperty to 3. The three framed fields appear in the same row.

    

[Frame End]

[Container Begin]

[Container End]

[ Static Text]

Unbound controls (these are in the Layout Controls section) There are a number of 'unbound' controls available in the Layout Controls section.

• Static image (can be conditional based on data in the grid. Can also be based on comparisons with summary values)

• Static text

• Image based on a value in the grid and unbound text

  

[Column Spacer] Properties

When designing a dialog component or a grid component with columnar formatting (where the Layout Options > Number of "Layout" Columnsproperty is greater than 1), you may position controls by inserting column spacers after controls.The following example shows the effects of adding column spacers. In this case the grids Number of 'Layout' Columnsproperty has been set to 2 and its Rows of data  property is 3. Both of these properties can be found in the Layout Options section of the Grid Properties page.

[Row Spacer]

[Merge Cells Begin]

Merges can be used to position controls in groups for both grid and UX components. Merging controls is only possible when the grid format is columnar and the Number of Layout Columns property, found under the Layout Options on the Properties page, is set to a value greater than 1. Merges can be used to combine multiple fields under one title. For example, if you have a firstnamefield and a lastnamefield, you could combine them under one merged group and give it the title 'Full Name'.

[Merge Cells End]

[Merge Cells End] is used in conjunction with [Merge Cells Begin] to encapsulate fields inside a single cell. [Merge Cells End] does not contain any Field properties, these are defined in [Merge Cells Begin]. For more information on how to use merge cells see the example in [Merge Cells Begin]  .

[Button]

[Hyperlink]

Lookup Properties

The Lookup property allows you retrieve one or more field values from another grid. Your grid must be Updateable before you can add a Lookup property. You can set a field to be updateable from the grid Fields page by clicking the (editable?) checkbox above the Selected: fields list. Lookups open in an Ajax window. This makes the lookup perform quickly and causes the Lookup window to open on the page, without requiring a new Browser window. Because of Ajax, popup blockers will not prevent the Lookup from opening. When you check the checkbox next to the Lookup property, you will notice that two additional properties appear. These are the Lookup Type and Lookup definition properties.

Lookup

When checked, makes the Textbox or Textarea control able to open a secondary lookup grid and retrieve field values.

Lookup Type

Lookup Type has a dropdown select list with these options: Grid Component , Auto-Suggest List , and Edit-Combo List . The Auto-Suggest list option creates Lookups that function much like a Google search toolbar. As you start typing into a textbox, a list of suggestions is supplied. With Grid Component Lookups, the suggestions can come from either a static list of values or, more commonly, from a table. For more on auto-suggest fields watch this video or this short video . Both the Auto-suggest and edit-combo controls allow you to enter multiple values in the field you are editing. For example, say you have a field called 'Send to' and you want to support a comma delimited list, such as 'Smith,Jones,King,Cohen' and you want the user to be able to select each entry in the list from the pick list. The edit-combo, or auto-suggest control can be used for this; video. For more on edit combo boxes you can check out this video and also this video on edit-combo box fields and how you can include edit-combo boxes in your grid components. 

Lookup Definition

Lookup definition allows you to define what component and/or fields will be used in you Lookup, what filters will be used, and more. Both dynamic and static filters can be applied to a Lookup depending on what type of Lookup it is. Using a dynamic filter will cause the lookup to be created from data already entered into the Grid. For example, if a user were to enter the state 'ma' then only customers in 'ma' will be shown when the lookup is open. Going a step further, the list of choices can be filtered based on other fields previously filled in. For example, say that you have defined a "city" field to be an auto-suggest field. If you previously entered "CA" into the "state" field, then when you enter a "city" field, the list of suggestions will only show cities in California. While Lookups require an Updateable grid there are some options in terms of user interface. Lookups can be configured to force a user to select from the lookup, while not permitting users to enter data into the field with the lookup.

A text box control on a grid component or ux component may have an associated lookup window that can be used to set the values of one or more fields with a single click. If you want to define a lookup for a text box control that is on the Search Part of a grid, then go to the Search Properties page and in the Search Options section set the Search style property to "1" and the Allow 'Query By Form ' property to "False".

Creating a text box Grid Component type Lookup takes three steps. 1.) First a Lookup grid needs to be defined. This is the "source" grid that will appear on the 'destination' when the Lookup is called. The Lookup grid can include all of the same or different tables as the destination grid. Being its own grid component it can also include such features as a Quick Search. 2.) Secondly, you must set the properties of the field control that initiates the Lookup. 3.) The final step is setting the properties of the field controls that will receive lookup values.

Javascript

Desktop Applications and Working Preview - Action Javascript to Print Report

If you use the 'client-side Xbasic' feature to add a button to a Grid component to print a Report, the report will also render when the Grid is running on the Desktop and Working Preview. This as opposed to the report only rendering if the Grid was running in the Browser or in Live Preview.

• Watch Video

Ajax Windows

• Animation

  Animation effects have been added for pop-up Ajax windows. Ajax windows that contain IFrames, which in turn contain display PDF files, cannot be animated. As a result, the Animation property has not been made available for Ajax windows that host .a5w pages, since .a5w pages are hosted in an IFrame. There are several animation methods that have been exposed. The 'slide' and 'fade' methods are based on methods in the jQuery core library. All of the other methods are based on method in the jQueryUI library. By default, both of these libraries are loaded. The Web Project Properties dialog contains settings which control if these libraries are loaded, and from where they should be loaded. You can control the animation effect for the window display and the window close. You can also control the animation speed. If you use the smart field to choose an animation, the animation builder will pop up.

  

• Certain animation styles will mess up the positioning of windows. If you find this to be the case, you should stick with the 'Fade' style for the 'show' animation.

  • Watch Video

• Background Style Property

  You can now set a background style property for pop-up Ajax windows. This will allow you, for example, to set a background color, or background image for the window.

• Centering Content

  Ajax Windows that display Grids, UX, or Custom Components can now automatically center the content in the window. You can specify if you want vertical, horizontal or both vertical and horizontal centering. The image below shows a pop-up Ajax window where a background color has been set, and the window contents has been centered on both the vertical and horizontal dimension.

  

See Also: JQuery Support

Time Picker Properties

You can enable a Time Picker for Short-time fields and Character fields. To turn on the Time Picker for these field types, check the 'Time Picker' property in the new 'Time Picker Properties' section. The Open how property lets you define whether a user clicking on an icon (ClickIcon) or clicking on a field (Focus) will open the Timepicker. The Time format property allows you to set how the time is displayed, there are , , and options. Checking the User must select from Time picker property will automatically open the time picker when the field control it is in gets focus. The OK button label property and Cancel button label property simply change the text on the OK and Cancel buttons that appear on the time picker. As with other labels you can introduce HTML directly into the label definition, to give the OK and Cancel buttons the appearance you want.

Column Properties

Set Columnor RowProperties There are situations where you will want to hide a column or row. This will be true if you are placing the field in a different column or row using a Freeform template. A freeform layout allows to insert any HTML code plus any combination of fields on the grid into a grid column. For example, although your database had firstname and lastname fields, a freeform layout could display a single name field that combined these two values. In almost all cases you will want to define the column or row heading. If you want to control access to this field, you may set a minimum security level requirement (V7). A users with a too low security level will not be able to see the column. The column's cell in-line style field defines additional HTML formatting that you want to apply to the cell of the grid. If you wanted to change the border or background of the cell, this is where you would do it. The can sort property enables and disables the ability to click on the column heading and sort the current page based on the values in the selected column.

• Hide column, Hide row

  Hides the column or row that would contain this field. You might choose to hide the field if it was displayed in a free-form layout.

  tmpl.Field_Info[N] 
  .Column.Hide as L

• Column heading, Row heading

  The label that identifies the column o row.

  tmpl.Field_Info[N] 
  .Column.Heading as C

• Column in-line style, Row label in-line style

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

  tmpl.Field_Info[N] 
  .Column.LabelInLineStyle as C

• Heading prefix, Label prefix

  Specify HTML text or the path to and name of an image to be displayed to the left of the row or above the column heading.

  tmpl.Field_Info[N] 
  .Column.Heading_Left as C

• Row label position

  • The position of the label in relationship to the control. The options are:

    • "Left"

    • "Right"

    • "Above"

    • "Below"

  • tmpl.Field_Info[N] 
    .Column.LabelPosition as C

• Can sort

  Specifies whether the grid will be sorted when the user clicks on the column or row heading.

  tmpl.Field_Info[N] 
  .Column.Sort as C

• Sort field

  Specify the field(s) to sort on when user clicks on the column or row title. Put commas between field names.

  tmpl.Field_Info[N] 
  .Column.Sort as C

• Freeform layout

  Specify if this column or row should display just this field, or allow a free-form layout. The options are: "Freeform"

  tmpl.Field_Info[N] 
  .Column.Type as C

• Freeform template

  Click the to display the Freeform Column Layoutdialog box to define the fields and formats to display in this grid cell.

  tmpl.Field_Info[N] 
  .Column.FreeFormTemplate = <<%html% 
  ' code here 
  %html%

• Cell in-line style

  Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

  tmpl.Field_Info[N] 
  .Column.InLineStyle as C

• Security level

  If the user is logged in with a security level that is lower than the security level you specify here, the column or row will be hidden. Set the security level to 0 to always show this column or row.

  tmpl.Field_Info[N] 
  .Column.SecurityLevel as N

• Bubble Help Text

  Optionally, set an initial value for the control to display.

  tmpl.Variable_Info[N] 
  .BubbleHelp as C

• Label Bubble Help Text

  Optionally, set an initial value for the control to display.

  tmpl.Variable_Info[N] 
  .BubbleHelpLabel as C

• Break Type

  • Forces a new row either before or after a control. The options are:

    • "None"

    • "Break before"

    • "Break after"

    • "Break before and after"

  • tmpl.Variable_Info[N] 
    .Breaktype as C

• Column Span

  The number of columns to group together.

  tmpl.Variable_Info[N] 
  .nCols as N

Formatting Grid Controls

• Opening a Grid Component

  • Select "Web Components" in the left pane, so that you can see your new grid component.

  • Select "AlphaSports_Customer_Grid" and click Edit.

  • At this point your new grid should look something like the following (using the default cascading style sheet).

    

• Modifying Grid Controls

  There are many formatting options available through the Grid Component Buildermenus. We will just make a few modifications to some of the (textbox) controls show you how easy it is.

  • 1. Display the Grid > Fieldspage.

  • 2. Select "Customer_Id" in the Selected Fieldslist.

    • 1. Change its Column Properties > Column headingto "ID".

    • 2. Change its Column Properties > Heading in-line styleto "text-align: left;".

  • 3. Select "Firstname" in the Selected Fieldslist.

    • 1. Change its TextBox Properties > Sizeto 10.

    • 2. Change its Column Properties > Column headingto "First Name".

    • 3. Change its Column Properties > Heading in-line styleto "text-align: left;".

  • 4. Select "Lastname" in the Selected Fieldslist.

    • 1. Change its TextBox Properties > Sizeto 10.

    • 2. Change its Column Properties > Column headingto "Last Name".

    • 3. Change its Column Properties > Heading in-line styleto "text-align: left;".

  • 5. Select "Company" in the Selected Fieldslist.

    • 1. Change its TextBox Properties > Sizeto 20.

    • 2. Change its Column Properties > Heading in-line styleto "text-align: left;".

  • 6. Select "Phone" in the Selected Fieldslist.

    • 1. Change its TextBox Properties > Sizeto 17.

    • 2. Change its Column Properties > Heading in-line styleto "text-align: left;".

  • 7. Select "Fax" in the Selected Fieldslist.

    • 1. Change its TextBox Properties > Sizeto 17.

    • 2. Change its Column Properties > Heading in-line styleto "text-align: left;".

  • 8. Select the Live Previewtab. The grid should now look something like this.

    

See. Suppressing Blank Fields in an Address, Creating a Grid that Looks Like a Dialog

Dynamic Column and Row Grid Headings

If you would like to be able to dynamically change the title of a grid column or row, the solution to creating conditional headings in grid components is to define a variable that contains the column or row heading that you want to display. Change "component_name" to the name of your component. Change "[1]" to reflect the index number of the column or row you wish to modify. Add additional Xbasic code to set the value of var1.

with tmpl_1
    componentName = "component_name"
    with field_info[1]
        .Column.Heading = var1
    end with
end with

See Also: Column Properties

Row Properties

• Cell in-line Style

  The appearance of a control and the grid cell that contains it are set by the style sheet attached to the grid component. In the Grid or UX Component Builders, two properties can override these style sheet settings. These are the In-line style property found in the control's properties settings (i.e. Label Properties, Dropdown Properties, etc..) and the Cell in-line style property found in the Column (or Row) Properties section of the Field Properties list. The picture shows what this can look like. Here is a grid component with four field rows, Company Name, Contact Name, City, and Country. The last field, Country, has had its Cell in-line style properties modified so that the background and the border are green. Cell in-line style for Country field.

  • 1. Open the Grid Builder. On the Design tab in the Component Type page select Grid is: Read Only.

  • 2. Open the Data Source page and select either dbf or SQL.

  • 3. On the Query(DBF) or Query(AlphaDAO) page select a table you want to use, click Select Primary Key to choose field you will use.

  • 4. On the Fields page move a number of fields from the Available Fields: list to the Selected: fields list using the arrows between the two lists.

  • 5. Select one of the fields in the Selected: fields list. In the Field Properties list scroll down to either the Column Properties section or the Row Properties section depending.

  • 6. In this section find the Cell in-line style property. Click the button next to it. This will open the Style Editor.

    

  • 7. In the Style Editor set the Background color, border style and color, font type and size, and other style attributes to your liking.

  • 8. Now go to Live Preview and see how your styling looks. Cell in-line style on Contact Name field:

    
  

• Break

  The Break property works only with columnar formatting where the Number of 'Layout' Columns property is greater than 1. The Number of Layout Columns property is located in the Layout Options section of the Grid Properties page. A Break can be inserted before, after, or before and after and control. When a break is added to a grid is appears as a carriage return symbol in the Selected: fields list on the fields page.

  • Using the Break property for Control Positioning:

    
  • 
    This causes the Contact Name, City, and Country fields to wrap to a second row. The effect only visible on the City field due to the fact that this is the only field that would not wrap to the next row by default. By default, the grid also only shows the labels of the first row of controls. However, this can be overcome by changing the Column heading property.

• Column span

  The Column span property only works with columnar grids when the Number of 'Layout' Columns , found in the Layout Options portion of the grid Properties page, is set to a value greater than one. Changing the Column span value of a control helps position that control inside a grid or UX component. This is often achieved in concert with other layout properties such as the Number of "Layout" columns and the Repeating columns property.

  • Using Column span for Control Positioning:

    1. In the Grid Builder go to the Design tab and open the Component Type page. In the Grid Layout menu select a Form (Columnar) grid.

    

  • 2. Open the Data Source page and select either .dbf or SQL as a data source.

  • 3. Click on the Query(DBF) or Query(AlphaDAO) page and connect to the table that you will pull data from. Click Select Primary Key and choose a field you will use.

  • 4. Open the Fields page. Move 6 fields from the Available Fields: list into the Selected: fields list using the arrow buttons.

    

  • 5. Now go to the grid Properties page . In the Layout Options section find the Number of 'Layout' columns property and set it to 2.

    

  • 6. Find the Repeating columns property, also located under Layout Options, and set the Repeating columns property to be 3.

    

  • 7. Now go to Live Preview and see how the records on your grid look:

    

  • 8. Return to the Design tab and on the Fields page click on the first field control in your Selected: fields list.

  • 9. Go to the Row Properties section of the Field Propertie s list. Find the Column spanproperty and set its value to 2.

    

  • 10. Now go to Live Preview again. Notice how changing the column span for the first field pushes the other fields down.

    

  • 11. Go back to the Fields page. Select the fourth field in your Selected: fields list. Go to the Field Properties list and again find the Row Properties section. Set the Column spanvalue for this property to 2.

  • 12. Open the grid in Live Preview :

    

Update Settings

If the grid is editable and the control type is editable, you may optionally suppress editing of the field that you view through the control. You may also set a minimum security level required to change the field's contents.

• Updateable

  Specifies whether the field can be edited.

  with tmpl.field_info[N]         .Updateable as L

• Table alias

  This property defines the alias of the table that contains the field.

  with tmpl.field_info[N          .Table_Alias as C

• Field to update

  Specifies the field that binds to the control.

  with tmpl.field_info[N]         .FieldToUpdate as C

• Security level

  Specifies the minimum security level required to edit the contents of the field.

  with tmpl.field_info[N]       .UpdateSecurityLevel as N

Summary Values

Summary values display various types of information about a field as it appears throughout the entire table. In other words these calculations summarize all values on all pages of the grid, not just values displayed on the visible page. Summary types include: Total (numeric fields only), Count (numeric fields only), Average (numeric fields only), Minimum, Maximum, Standard Deviation (numeric fields only), Variance (numeric fields only), First, and Last. You can have summaries of as many columns as you want. Summaries can appear on all pages or on the last page only.

Four Summary Values

• Total

  Displays the total value of the fields in all the records of the table.

  .Summary.total.has as L 
  .Summary.total.displayformat as C

• Count

  Displays the count of the fields in all the records of the table.

  .Summary.count.has as L 
  .Summary.count.displayformat as C

• Average

  Displays the average value of the fields in all the records of the table.

  .Summary.average.has as L 
  .Summary.average.displayformat as C

• Minimum

  Displays the minimum value found in the field.

  .Summary.min.has as L 
  .Summary.min.displayformat as C

• Maximum

  Displays the maximum value found in the field.

  .Summary.max.has as L 
  .Summary.max.displayformat as C

• Standard Deviation

  Displays the standard deviation of the fields in all the records of the table.

  .Summary.stddev.has as L 
  .Summary.stddev.displayformat as C

• Variance

  Displays the variance of the fields in all the records of the table.

  .Summary.var.has as L 
  .Summary.var.displayformat as C

• First

  Displays the first value found in the field.

  .Summary.first.has as L 
  .Summary.first.displayformat as C

• Last

  Displays the last value found in the field.

  .Summary.last.has as L 
  .Summary.last.displayformat as C

• All summary types of a grid.

  

Calendar Properties

The Calendar control is a control that a user can place on Grid and Dialog components. Compare it to the date picker control, which is a text box with a button that opens a calendar in a pop-up window. The Calendar control always displays the calendar on the page. The user does not have to click a button to open the calendar in a new window. The Calendar control can be read-only or set the value of table field.

• Date format

  Specify the format in which date values are passed to the calendar control. e.g. mm/dd/yyyy .

  with tmpl.field_info[N] 
  .Calendar.DateFormat as C

• Read only

  Specify if the calendar control is for displaying date values only, or should it allow the user to also set date values. If the calendar control is read only, then the user cannot click on any of the days, and the buttons at the top of the control to change the year and month are hidden.

  with tmpl.field_info[N] 
  .Calendar.Readonly as L

• Switch year

  This property is available on if the Read only property is not set. If a date value has a two digit year, specify which year to switch from 1900 to 2000.

  with tmpl.field_info[N] 
  .CalendarSwitchYear as N

• Combo boxes

  When enabled, displays the combo boxes for the year and month pickers.

  with tmpl.field_info[N] 
  .Calendar.UseComboBoxes as L

• Low year

  Specifies the low year in the year picker.

  with tmpl.field_info[N] 
  .Calendar.LowYear as N

• High year

  Specifies the high year in the year picker.

  with tmpl.field_info[N] 
  .Calendar.HighYear as N

A columnar grid with a calendar control.

Date Picker Properties

Here are the Date Picker Properties

• Date format

  Refer to Date and Time Format Elementsfor supported formats.

  with tmpl.field_info[N] 
  .DatePicker.DateFormat as C

• Date picker icon

  Selects the icon that appears to the right of the field. The options are:

  with tmpl.field_info[N] 
  DatePicker.IconNumber as N

  

• Switch year

  The number that is used to place 2 year dates into the current or prior century.

  with tmpl.field_info[N] 
  .DatePicker.SwitchYear as N

• Use combo boxes

  Enables or disables the month and year combo boxes.

  with tmpl.field_info[N] 
  .DatePicker.UseComboBoxes as L

• Low year

  The lowest number year shown in the year list box.

  with tmpl.field_info[N] 
  .DatePicker.LowYear as N

• High year

  The highest number year shown in the year list box.

  with tmpl.field_info[N] 
  .DatePicker.HighYear as N

The Calendar control appears when the user clicks the calendar icon to the right of the date field.

The size of the pop-up calendar of the date picker is defined in a JavaScript file named a5_html_calendar.js . To change the size of the calendar modify the pixel offset values associated with offsetWidth (30) and offsetHeight (40) in the following line in this file.

'<body class="'+style+'PAGEBODY" 
on load="fill_calendar('+old_month+', '+old_year+', settings, '+month_type+', '+day_type+'); 
window.resizeTo(document.getElementById(\'cal_layout_table\').offsetWidth+ 30  , 
document.getElementById(\'cal_layout_table\').offsetHeight+ 40  )" style="margin:0px; 
overflow: hidden;">\n'+

Drop down list, radio button, and check box controls. Dropdown list controls optionally allow multiple selections.