The first row shows the abbreviated name for the current element so we can be sure we are working on the correct page component. The button following this enables us to view or hide the full name of the current element.
The select box then allows us to select what type of control this page element will be shown as. The options are as follows:
Text Box - This option creates this field element as a standard one-line text entry box.
Text Area - This option is similar to the Text Box, with the difference being that both the height (number of lines) and width of this text entry box can be changed using CSS.
Select Box - Choosing this option will create a drop-down list of options from which the user can select.
Combo Box - A Combo Box works in a similar way to a Select Box, but with an additional entry at the end of all the options in which the user can enter their own value. This control is therefore a combination of a Select Box and a Text Box.
Radio Buttons - This will create a set of connected radio buttons from which the user can select one value.
Single Checkbox - This will create a single tick box that the user can tick if required. This is a Boolean (true or false) control.
Multiple Checkboxes (Select Many) - This option is similar to the Radio Buttons control type in that it provides a list of options. The difference is that only one option can be selected for a radio button group, whereas multiple options can be selected together with this control.
Button (Anchor) - This option will create a clickable button for this field. Buttons of this type are created as HTML anchor tags, providing greater flexibility over their styling.
Button (Standard) - This option will create a standard Windows clickable button for this field.
Output - This is used when we want the field to just output some data for display to the user, but without them being able to change the data.
Secret (Password) - This option creates a control that is identical to a Text Box, except that as the user enters data it will be shown as asterisks (*) instead of the actual letters.
Hidden - This option creates a hidden control containing the data, which will not be visible on the page.
Image (Picture) - This option creates a placeholder for an image element. These images can be stored locally, or be accessed through a URL string.
Tabs - This option is only available if this field is being used to control the visibility of one or more groups (See the Group Details section). In this case, this field acts as the control deciding which tab (group) is currently shown. You can drag and drop a tab control from the palette on the Page Structure tab and review the various settings for the tab groups and the controlling field in the Field Details tab.
The following options are dependent on the type of control that is selected as to whether or not they can be entered and to what functions they will perform.
The Value is option for single text value type fields (Text Box, Text Area, Hidden, Secret and Output) specifies whether the value initially shown should be static or dynamic. If static is selected, the required value should be entered into the Value text box. If dynamic is selected, some data binding information will be required for this field to specify where the value should come from (see Data Bindings for more information). If dynamic is selected, we can use the Default Value text box to specify a value that should be used if none is present in the source data for the page.
For list type controls (Select Box, Combo Box, Radio Buttons, Multiple Checkboxes, Tabs) the radio buttons are used to select whether the Options are static or dynamic. This refers to the different options that the user should be able to select from on the page. If static is selected, these values will be taken from the enumeration information specified in the Data Constraints section. If dynamic is chosen, then some data binding information will be required to pull in the values to use (see Data Bindings). With these types of controls the Default Value can be specified to set which entry should be selected if no current value is specified in the data going to the page.
For the single checkbox control, the radio buttons specify whether the Checkbox value is static or dynamic. This is the value that will be returned from the page if the checkbox is selected and will be compared against the data creating the page to determine whether the checkbox should initially be selected. If static is selected, it can be entered into the Checkbox Value box, otherwise data binding information is required. The Default Value option can be used to set the default data value to use if there is none in the data used to create the page. Setting this to the checkbox value will cause the checkbox to be selected by default if there is no data going to the page indicating otherwise.
For a button type control, the caption shown on the button can be static or dynamic by setting the Caption is control. The static caption should be entered into the Caption text box if required. A dynamic caption requires data binding information.
For the image control, the Location (URL) is used to point to where the actual image file for this image element is stored. If it is set to Static, a Location (URL) field is used for pointing to the image; this field is replaced by Default Location (URL) when Dynamic is selected. A dynamic URL will require data bindings to be set. Any valid URL can be specified, including local address references.
The Size option is used with text box type controls (Text Box and Secret) to set their size, (width) and with select box type controls (Select Box and Combo Box), to set how many options (entries) should be displayed vertically at an instance in time.
The Initial drop down entry option can be used with Select Boxes and Combo Boxes to specify an option that will be included at the start of the list. For example, we may wish to enter Please Select into this option so that this message will be shown in the drop down when no entry has been selected. This is an alternative to the Default Value option to set what should be shown before the user has picked a value.
The Editable entry default text option is only used with Combo Box controls, and specifies the default text that should be used for the entry that can be edited by the user.
The Allow multiple selections? option can only be used with Select Boxes and allows the user to select more than one option at a time.
Field Label Details - This section is used to specify what label (if any) should be used for this field. If a label is required, the check box should be ticked, which will enable the other options. The Label Type sets whether the label should be a static value or a dynamic one. If static is selected, the value to use should be entered in the Static Label text box, otherwise some data binding information will be needed. A dynamic label should be used when dynamic data needs to be incorporated into the label text.
The styling options provide control (using CSS) of how the label will appear, by either specifying one (or more) class names and/or a CSS override string. The two types of styling (label and label background) work in the same way as with the control and background styling described in the next section. Any positional or sizing type styling should be applied to the label background, where as you may want to apply more visual properties (eg color, font size, etc) to the label. The exact markup generated will depend on the what the field is contained in, but as an example, if the field is contained within a table structure, the label background styling will be applied to the table cell containing the label, and the label styling will be applied to the <label> tag within this cell. It is this label tag that will actually contain the label text.