Data Field Modifier Builder

 

 

In this topic ...

How do I...

Specifying Inputs

Using Arguments with Formatter Class Methods

Standard Formatter Class

 

Related Topics ...

Overview: Creating Forms

Altering Form Layout

Formatting and Validating Form Values

How to Use the Data Page Builder

The Data Field Modifier builder modifies one or more elements in the form structure created by a Data Page builder call. Use the Data Field Modifier builder to perform the following tasks:

  • Prevent elements from being displayed in the form

  • Alter the behavior of elements in the form from their default behavior

  • Alter the display and layout of elements in the form

  • Specify formatting and validation logic for elements in the form

See the list of related topics for more information about each of these tasks.

 

How do I...

Set up an Application-Wide Date/Time Format

Format an Individual Date or Time Entry

Validate a Date or Time User Input

 

Specifying Inputs

The Data Field Modifier builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see "Using the Builder Call Editor"

Input Name Description
Name Enter a name for this builder call. The Designer displays this name in the Builder Call List.
Field Selector Tool We can determine how you want to search the available fields in the data page structure by specifying one of the following options:

  • By Name -- Select this to display a "List of Fields to be Modified" table in the Builder Call Editor. Each row in the table provides a picker that displays each field name in the structure on which the data page operates as the nodes of a tree. We can specify the nodes on which the Data Field Modifier operates by selecting nodes in this tree.

  • By Type -- Select this to display a "List of Field Types" table in the Builder Call Editor. Each row in the table provides a picker that displays a list of field types in the structure on which the data page operates. We can choose a type representing the fields you want.

  • Using both techniques --Select this to display both tables. We can now specify the fields on which this Data Field Modifier operates by both name and/or by type.
Fields Use the chooser to select the element that you want to modify with this Data Field Modifier builder call. To specify more than one element, make multiple element selections.
Hide Element(s) Enable this check box to remove the selected fields (as well as any children) from the form.
Generate Labels If enabled, the Data Field Defintion creates a label in addition to the HTML control for each element on which this Data Field Modifier operates.
Label Enter  the text for the label. This new label applies to all the elements on which this Data Field Modifier operates
Element is Repeated Specify whether the Data Field Modifier alters the data page's default behavior for repeated elements by specifying one of the following options:

  • Do Not Change -- Do not alter the Data Page's default behavior for the selected element(s).

  • Yes -- Treat the selected element(s) as a repeated element in the structure.

  • No -- Do not treat the selected element(s) as a repeated element in the structure.
Container Settings
Children Make UI If enabled, the Data Field Modifier adds HTML controls for each child element of the of the specified form field.
Children Gen. Labels If enabled,  the Data Field Definition creates a label in addition to the HTML control for each child element of the of the specified form field.
Container Display Dir. Specify the layout for this element by selecting one of the following options:

  • Do Not Change -- If you are using the Data Field Modifier to alter other aspects of the element, leave this option selected.

  • Automatic - Builder will determine optimum layout

  • Vertical -- Child elements will be displayed vertically.

  • Horizontal -- Child elements will be displayed horizontally.
Enable Data Paging If you choose to repeat over the contained elements, we can display some number of child elements at a time, by enabling the Enable Data Paging input.
Page Size Enter the number of child elements to display at a time. For more information about paging through data, see "How to Use the Paging Assistant Builder."
Field Settings
Lookup Table Used This input replaces the Field Selector input above if the model in which this Data Field Modifier builder is located also contains one or more Lookup Table builders.

Use this input to choose the name of the Lookup Table builder call whose results you want to display with this Data Field Modifier builder call.

The Data Field Modifier builder call will display the results of the Lookup Table's builder's GetLookupTable method. The displayed content is determined by the Lookup Table builder call's "Value Tag" and "Label Tag " input settings.

Field Behavior We can determine how the form renders the selected element(s) by setting the Field Behavior input to one of the following values:

  • Do Not Change -- Let the field behavior be determined by the element's container or by the default behavior for the Page Type specified in the Data Page builder call.

  • Data Entry -- Allow the user to set the value for this element. When you set the Field Behavior to Data Entry, the list of values available for the Control Type changes to: Text Input, Text Area, Select, Radio Button Group, or Check Box.

  • View Only -- Display the value of the element as a read-only field in the form. When you set the Field Behavior to View Only, the list of values available for the Control Type changes to: Text, Image, Manually Specified Output.

  • Action Field -- Display an action control such as the value for this element. The specified action control can display the element's value as the link text or button label, so choosing Action Field for an element does not preclude you from displaying its value. When you set the Field Behavior to Action Field, the list of values available for the Control Type changes to: Link, Button, or Image Button.
Is Required Select whether this field should be considered to be 'Required' if it is an input type.
Content Type Depending on the value you set for the Field Behavior input, the Control Type input displays different options.
     (Data Entry) Text Input Choosing Text Input for the Control Type offers no additional inputs.
     (Data Entry) Text Area Specify values for the following inputs if you choose Text Area as the Content Type:

  • Cols -- Specify the width of the text area in characters. For example, a value of 70 yields a text area 70 characters wide.

  • Rows -- Specify the height of the text area in text rows. For example, a value of 10 yields a text area that accommodates 10 lines of text.

  • Wraps -- Specify whether the lines in the text area wrap onto the nest line (true) or if they extend beyond the bounds of the text area (false).
      (Data Entry) Select Specify a value for the following input if you choose Select as the Content Type:

  • Enumeration Options -- Specify how the options displayed in the Select box will be determined: From the schema, the HTML, or by using the Specify Below option, specifying the inputs listed below.

  • Select Data -- Specify an indirect reference to a variable or method that contains/returns an XML structure or a Java Collection. We can also use a comma-delimited list.

  • Value Element -- If using an XML structure, enter the name of the element whose value will be passed as the Select control's value. For example, option/value.

  • Label Element --If using an XML structure, enter the name of the element whose value will be displayed as an option for the Select control. For example: option/name.
      (Data Entry) Radio Button Group Specify a value for the following input if you choose Radio Button Group as the Content Type:

  • Enumeration Options -- Specify how the options displayed in the Radio Button Group will be determined: From the schema, the HTML, both, or by using the Specify Below option, specifying the inputs listed below.

  • Select Data -- Specify an indirect reference to a variable or method that contains/returns an XML structure or a Java Collection. We can also use a comma-delimited list.

  • Value Element -- If using an XML structure, enter the name of the element whose value will be passed as the Select control's value. For example, option/value.

  • Label Element -- If using an XML structure, enter the name of the element whose value will be displayed as an option for the Select control. For example: option/name.
      (Data Entry) Check Box Specify values for the following inputs if you choose Check Box as the Content Type:

  • Label After Check Box -- Specify the text to display to the right of the checkbox.

  • Checked Value -- Specify the value to be passed when the user enables the check box. For example, true or yes.

  • Unchecked Value -- Specify the value to be passed when the user leaves the check box unchecked. For example, false or no.
      (Data Entry) Hidden Input Specify a value for the following inputs to create a Hidden Input for the selected form fields:

  • (optional) Initial Value -- Specify an initial value for the hidden input. If the selected form elements have values when the page is rendered those values will be used. If the form elements do not have values, the initial value gets passed as a hidden form input.
      (Data Entry) Manually Specified Input We can create your own builder to display a control to allow the user to specify a value for the selected element(s). If you have done so, choose the "Manual Specified Input" Control Type and specify values for the following inputs:

  • Rendering Builder -- Enter the Builder ID of the builder you created to render the form elements on which this Data Field Modifier operates. This builder must define three inputs: Name, PageLocation, and Value, where Value is the value for the element in the structure passed to the Data Page builder call.

  • (optional) Initial Value -- Specify an initial value to be passed to the rendering builder.
      (View Only) Text No other inputs to set for Text controls.

Choosing this Control Type prompts the Data Page to display the value for the selected element(s) as read-only text.

      (View Only) Image Specify values for the following inputs if you choose Check Box as the Content Type:

  • Image Name Prefix -- Specify text that will be prepended to the element value. We can use this value to specify the common path to all the form's images, allowing the element value to determine the specific image to display. For example, if the images for the form are stored in the servable_content_root/acme/images directory, specify "/acme/images" as the value for the Image Name Prefix.

  • Image Name Suffix -- If the element value does not specifically refer to an image file, we can use the Image Name Suffix to define an image format file extension (e.g. ".gif") that gets appended to the element value. For example, if the element value is an employee ID, we can use the Image Name Prefix and Image Name Suffix to specify the path to an image of each employee: /acme/images/ + 1111 + .gif
      (View Only) Manually Specified Output We can create your own builder to render the value of the selected element(s). If you have done so, choose the "Manuall Specified Output" Control Type and specify values for the following inputs:

  • Rendering Builder -- Enter the Builder ID of the builder you created to render the form elements on which this Data Field Modifier operates. This builder must define three inputs: Name, PageLocation, and Value, where Value is the value for the element in the structure passed to the Data Page builder call.

  • (optional) Initial Value -- Specify an initial value to be passed to the rendering builder.
      (Action Field) Link Specify values for the following inputs if you choose Link as the Content Type:

  • Link Text Source -- Specify whether to use the element's label or value as the text to be displayed as a link. We can also manually enter the text you want displayed as the link.

  • Action Type -- See "Specifying Inputs" in the help for the Link builder.

  • Action -- See "Specifying Inputs" in the help for the Link builder.

  • Target -- See "Specifying Inputs" in the help for the Link builder.

  • Argument Name for Data -- Specify the name of the argument you wish to assign this value to. (This argument name should match the name of the argument in a specific method that you are calling.)
     (Action Field) Button Specify values for the following inputs if you choose Button as the Content Type:

  • Button Label Source -- Specify whether to use the element's label or value as the text for the button's label. We can also manually enter the text you want displayed as the button label.

  • Action Type -- See "Specifying Inputs" in the help for the Button builder.

  • Action -- See "Specifying Inputs" in the help for the Button builder.

  • Target -- See "Specifying Inputs" in the help for the Button builder.

  • Argument Name for Data -- Specify the name of the argument you wish to assign this value to. (This argument name should match the name of the argument in a specific method that you are calling.)
     (Action Field) Image Button Specify values for the following inputs if you choose Image Button as the Content Type:

  • Image Name Prefix -- Specify text that will be prepended to the element value. We can use this value to specify the common path to all the form's images, allowing the element value to determine the specific image to display. For example, if the images for the form are stored in the servable_content_root/acme/images directory, specify "/acme/images" as the value for the Image Name Prefix.

  • Image Name Suffix -- If the element value does not specifically refer to an image file, we can use the Image Name Suffix to define an image format file extension (e.g. ".gif") that gets appended to the element value. For example, if the element value is an employee ID, we can use the Image Name Prefix and Image Name Suffix to specify the path to an image of each employee: /acme/images/ + 1111 + .gif

  • Action Type -- See "Specifying Inputs" in the help for the Image Button builder.

  • Action -- See "Specifying Inputs" in the help for the Image Button builder.

  • Target -- See "Specifying Inputs" in the help for the Image Button builder.

  • Argument Name for Data -- Specify the name of the argument you wish to assign this value to. (This argument name should match the name of the argument in a specific method that you are calling.)
Do Not Change The form uses the control type defined by the HTML or schema for the specified fields.
Initial Value Enter a value which will be saved into the Variable when the Model is first loaded for each user.

If you specify an initial value, the Data Page builder call adds a pageName_Initialize method to the WebApp. We can use this method to reset the form to its initial state. For more information, see "Resetting a Form."

Formatting
Formatter Class Enter the fully-qualified name of the Java class that contains the methods to format, translate, and validate the data displayed and entered into a form.

The specified Java class must implement the IInputFieldFormatter interface. See "Creating a Formatter Class," for more information.

A Standard Formatter class is also available.

Format Expression Choose one of the available format expressions to apply to the field data being displayed. Formatting refers to modifying data for display.

For example, Social Security numbers might be stored in the data as strings without spaces, hyphens, or other formatting. A format method could insert hyphens in the appropriate places to make the Social Security number easier to read.

Similarly, the Credit Card ####-####-####-####" formatter places dashes every 4 digits and  ignores errors.

Format Expression Argument This input is available when you choose DateTimeFormat(FormatString) as the Format Expression input above.

Use this input to provide an indirect reference to the argument you want to provide to the Format Expression. The argument will be evaluated at runtime and passed to the method as part of the operation name.

For example, if you choose the format expression DateTimeFormat(FormatString) then the string "FormatString" will be replaced with the evaluated version of what the user entered in the Format Expression Argument input before it is passed to the Formatter.

If you  write your own Formatter class we can make use of this input by putting parentheses in the name of any operations. The contents of the parentheses will be replaced.

Translate Expression Choose one of the available translate expressions to apply to the field data being submitted. Translating refers to modifying user input for storage as data.

For example, a user may insert dashes when entering a Social Security number in a form. A translate method could remove the hyphens from the user input, creating a value that can now be stored as data.

Similarly, the "Credit Card 16 digit" expression removes "-" and " " from a string and ignores errors

Translate Exp Argument Available when you choose Translate(data$Display) as the Translate Expression to  explicitly translate from one format to another.

The argument entered should take the form of Data$Display.

Example:

To translate 07-04-2004  to 04/07/2004

You would enter the following argument:  dd/MM/yyyy$MM-dd-yyyy

Validate Expression Choose one of the validate expressions to apply to the field data being submitted. The validate method implements server-side validation and operates on the value returned by the translate method (if translate is used).

The following date comparison methods are available to support date validation:

  • Compare Date | today

  • Compare Date >= today

  • Compare Date = today

  • Compare Date <= today

  • Compare Date < today

Validate Expression Argument This input is available when you choose RegularExpression(RegExString) as the Validation Expression input above.

Use this input to provide an indirect reference to the argument you want to provide to the Validate Expression. The argument will be evaluated at runtime and passed to the method as part of the operation name.

For example, if you choose the validation expression RegularExpression(RegExpString) then the string "RegExpString" will be replaced with the evaluated version of what the user entered in the Validate Exp Argument input before it is passed to the Formatter.

If you  write your own Formatter class we can make use of this input  by putting parentheses in the name of any operations. The contents of the parentheses will be replaced.

Attribute Settings for Fields
Attribute List Select the name of the HTML attribute that you want to add or modify for the HTML element(s) pointed to by the Page Location syntax and enter a value for the selected attribute.

For more information about the attributes listed in the Name column, refer to HTML documentation.

Overwrite Rule If the element(s) on which this attribute setter operates already has the specified attribute set, select one of the following:

  • Overwrite HTML value -- To replace existing attribute value with the specified attribute value.

  • Prepend new value -- To prepend pecified value to existing attribute value. Typically used for building JavaScript expressions. For example,

onClick="newJavaScriptExpression";"oldJavaScriptExpression"

  • Append new value -- To aAppends specified value to existing attribute value. Typically used for building JavaScript expressions. For example,

border="oldJavaScriptExpression";"newJavaScriptExpression"

  • Don't overwrite HTML value -- To not set the attribute value.
Append/Prepend Separator Enter the separator to use when an attribute value is prepended or appended. The default separator is ";".
   
HTML Class Settings
Template File Select an HTML Page Automation template file that will be used to generate all pages in the application.

Click here for information about working with HTML Page Automation templates.

Label Class Used for the label text for leaf nodes (elements that do not contain other elements). The corresponding CSS class name is .label.
Section Label Class Used as the label for branch nodes (elements that have child elements). The corresponding CSS class name is .sectionLabel.
Output Data Class Used for the data contained in leaf nodes. The corresponding CSS class name is .outputData.
Entire Table Class Used for all rows in a table of repeated elements. The corresponding CSS class name is .entireTable.
Table Head Used for the first row in a table of repeated elements. The corresponding CSS class name is .tableHead.
Table Row Enter the HTML Class attribute to be used on the Table Rows. Note that this is ignored if TableRowOdd and TableRowEven have values. The corresponding CSS class name is .tableRow.
Odd Table Row Used for oddly numbered rows in a table of repeated elements provided that you use a Data Field Modifier builder call to set this style for the associated element in the data. The corresponding CSS class name is .tableRowOdd.
Even Table Row Used for evenly numbered rows in a table of repeated elements provided that you use a Data Field Modifier builder call to set this style for the associated element in the data. The corresponding CSS class name is .tableRowEven.

 

Formatting and Validation of Individual Fields

Three fields in the Advanced section of this builder support using arguments with the methods on the Formatter class. When the Formatter class declares its methods, it can include an argument in parentheses. This allows you to format and validate an individual field. For example, the StandardFormatter now has the formatting choices:

  • Integer

  • Float

  • Date Time

  • Data Only

  • Number(NumberFormat)

  • Date(DateFormat)

If you choose one of the last two, then the builder will display an "Argument" input where we can enter the NumberFormat or the DateFormat. (These strings are identical to those used in the Java NumberFormat and DateFormat classes.)  The formats can be indirect values (and are selected with the appropriate picker). Formats will apply only to the fields which are selected by the builder. We can use multiple Data Field Modifiers to set different formats for different fields.

This technique is also available in the validation and translation operations. In the StandardFormatter, a validation operation is available:  

RegularExpression(RegExString)

As with the formatting operation, an input will be displayed where you can enter a RegEx expression which will be used for field validation. RegEx expressions are available to support a wide variety of operations. Click here to access a library of these expressions and examples of their use.

 

The Standard Formatter Class

If you create a Data Field Modifier that references a field that is not a container, we can apply formatting to the field. The inputs used to apply the formatting are in the Formatting group. The first field you need to specify is the Formatter Class that you want to use. WebSphere Portlet Factory supplies a Standard Formatter class to get you started (com.bowstreet.builders.webapp.pageautomation.StandardFormatter).  It contains several formatting methods used to. When you specify a class, the Format Expression, Translate Expression and the Validate Expression fields populate with the available methods provided by the class.

 

Format Expression

The Format Expression field is populated with the following methods: Boolean, Date Time, Date Only, Time Only, NumberFormat(FormatString) and DateTimeFormat(FormatString).  When using these methods, the data is formatted but retains it's original value.

For example, given a Date Time of  05/19/2004 12:14:22, if  Date Only is specified, 05/19/2004 is displayed on the page. The variable, however, will continue to hold the full value of 05/19/2004 12:14:22.

If the field being formatted is a String and you select  DateTimeFormat(FormatString) for the Format Expression, the method will attempt to parse the String into a Date Time. It will use the format of the String to determine how to display the Date Time by default. For example, if the String is 05/19/2004 12:14:22, the string  will be displayed just like that. However, we can integrate a Data Page Formatter builder and specify how Date Times should be displayed and therefore specify how this String gets formatted.

Custom Date Formatting Options

Date formats can be specified on a model wide basis or on a field by field basis. Properties that control format behavior must be added to the override.properties file. We can change the values of the properties to deal with your specific formats.

There are two properties that apply to date formats, two that apply to dateTime formats, and two tjat apply to time formats. Each property set consists of a property for data and a property for display.

To activate these properties add them to the override.properties file and restart the application/portal server.

The Two Date Properties:

# Set the format string for the data value of dates

# bowstreet.pageautomation.date.data=MM/dd/yyyy

 

# Set the format string for the display of dates

# bowstreet.pageautomation.date.display=MMMM dd, yyyy

The first property is used to parse your date strings. This means that all of your dates should be in this format to start with. The second property represents the format you want to use to display dates. In the example above, dates should look like "07/04/2004" before parsing. Once formatted they will look like, "July 04, 2004."

The Two Date/Time Properties:

# Set the format string for the data value of dateTimes

# bowstreet.pageautomation.dateTime.data=MM/dd/yyyy hh:mm:ss

 

# Set the format string for the display of dateTimes

# bowstreet.pageautomation.dateTime.display=long

 

The Two Time Properties:

# Set the format string for the data value of times

# bowstreet.pageautomation.time.data=hh:mm:ss

 

# Set the format string for the display of times

# bowstreet.pageautomation.time.display=hh:mm

To specify formats by individual element, add a Data Field Modifier builder. Select the date element you want to format. In the Formatter Class field, select the com.bowstreet.builders.webapp.pageautomation.StandardFormatter class. Select the Format(Data$Display) method for the Format Expression. Supply an argument in order to specify the formats for this particular date. The argument should be entered in the Format Exp Argument. It should take the form of Data$Display.  For example, specify dd/MM/yyyy$MM-dd-yyyy if your date is in the form of 04/07/2004 and you want it formatted to be displayed as 07-04-2004.

Lastly, note that if your dates are stored as longs, we can specify this format too. In the override.properties file use bowstreet.pageautomation.date.data=long or in the Data Field Modifier Builder use long$DisplayFormat (where DisplayFormat is the format you want to use to display the date).

 

Translate Expression

The Translate Expression field is populated with the following methods: Boolean, Date Time, Date Only, Time Only, integer - blank becomes zero and Floating Point - blank becomes zero. Using one of these Translate Expression methods will actually change (translate) the value in the variable rather than changing only what is displayed.

Use the method Translate(Data$Display) to explicitly translate from one format to another. The argument should be entered in the Translate Exp Argument. It should take the form of Data$Display.

For example, specify dd/MM/yyyy$MM-dd-yyyy if your date is displayed on the page in the form of 07-04-2004 and you want to translate it to 04/07/2004

 

Validate Expression

The Validate Expression field is populated with the following methods: Required String, Required Boolean, Required integer, Required Floating Point Number, Required Date Time, Required Time Only, Required Date Only, Required byte, Required long, Optional Boolean, Optional integer, Optional Floating Point Number, Optional Date Time, Optional Time Only, Optional Date Only and Regular Expression(RegExString).

Using one of the Required methods will cause validation to be applied to the field for the specified type. For example, Required Date Time will ensure that a value is entered by the user for this field and that the value entered is in fact a Date Time.  Anything else including a Date will fail the validation and cause an error to be displayed on the page.

Using one of the Optional methods allows a data entry field to be left blank yet still validate correctly. For example, we can select Optional Date Time to force a field to validate a date/time entry or allow the field to be left blank.

Dates can also be validated using Required Date(FormatString) and Optional Date(FormatString). Specify the format that the date needs to be in as the Validate Exp Argument. When the user enters a date and attempts to submit the form, an attempt will be made to parse the date. If it can't be parsed with the specified format, validation will fail.  If no format is specified in the Data Field Modifier, the bowstreet.pageautomation.dateinput property will be used if it is set.