List Control Field Properties
Description
Properties available for configuring fields in the List Control, including server-side encryption, client-side display formats, and control-specific settings.
Field Properties
Name
Field name.
Spacer width
Specify the width of the column spacer.
Server-side
Encrypt field
Specify if the data in this field should be encrypted when the table is updated and should be decrypted when the table is read.
Encryption key
Note: Available when Encrypt field is checked.
Specify the encryption key.
Display format
Note: This option is not available if this List is the parent of a child List and it pre-fetches the data for the child List.
Specify how this field should be formatted. Enter an Xbasic expression that uses the <value> placeholder to format the data. It may be necessary to wrap the <value> placeholder in the convert_type() function to ensure that <value> returns the correct data type that your format expression expects.
In-line style
Note: This option is not available if this List is the parent of a child List and it pre-fetches the data for the child List.
Specify the in-line style for this field.
Conditional style
Note: This option is not available if this List is the parent of a child List and it pre-fetches the data for the child List.
Specify the display style for this field. The style is dynamically computed on the server.
Security Groups
Note: This option only applies to 'Column' List layouts. It does NOT apply to 'Freeform' List layouts.
Select which security groups can see this field. If no groups are selected, all users can see the data in this field.
Show/hide expression
Note: This option only applies to 'Column' List layouts. It does NOT apply to 'Freeform' List layouts.
Specify the show/hide expression. The show/hide expression can refer to session variables (but NOT to fields in the current row). Data for the field is retrieved from the server if the expression is true. If the expression is false, or invalid (perhaps because a referenced session variable has not yet been defined), the field is not shown.
Example expression: session.var1="alpha"
Compute summary values
Note: Available only when Data Source type is SQL.
Should summary values be computed for this field? Summary values are computed on the server for all records in the current query (not just records shown in the List). If the List is paginated, then records shown in List is a subset of records in query.
Summary field formatting
Note: Available when Compute summary values is checked.
You can define format expressions for the server-side summary fields. For example, to round the average to 2 decimals, specify: round(<value>,2).
Client-side
Control type
Specify the control type to use to display the data in the List.
Options are: Label, Image, Video, Audio, RawData, CSSIcon, LinkedFile, Ink, StarRating, Integer, Javascript, Map, RadioButtons, CheckBoxButtons, Switch, Hyperlink-phone number, and Hyperlink-email address
If you choose 'RawData' then the data is not wrapped in any HTML tags (such as span or img) and you must add your own html markup to the template.
Use 'CSSIcon' if the data in the field is the name of a CSS font icon (such as Font-Awesome) or an SVG icon.
In-line style
Specify the in-line style for the control. It is more efficient to use this property than the server-side in-line style because this property does not add to the amount of data that has to be sent from the server.
Word-wrap
By default, long character values are truncated when displayed in a columnar list. Specify if the data should be word-wrapped.
Word-wrap option
Note: Available when Word-wrap is checked.
Specify how the text should wrap.
- normal
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary.
- nowrap
Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered.
- pre
Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML.
- pre-line
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
- pre-wrap
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.
- inherit
Specifies that the value of the white-space property should be inherited from the parent element.
- break-word
Allows breaks inside words.
- *none*
Turns word-wrap off.
Class
Specify the CSS class for this control.
Show/hide expression
The expression is evaluated for each row. If the expression is true, the control will be shown.
Use the special expression syntax, which will be converted automatically to Javascript. If you prefer to enter a Javascript expression directly, prefix the expression with Javascript:. Your Javascript expression will need to refer to field values using the data. prefix.
You can also call a Javascript function that returns true or false. For example: javascript:myFunc(data).
Compute summary values
Should summary values be computed for this field? The following summary values are computed: total, count, avg, min and max.
Conditional style
Specify the display style for this field.
Conditional cell style
Specify the display style for cell that contains this field (only applies to tabular layouts).
Transform data type
Unless the List data source is a Javascript function (in which case you have complete control over the data types for each field in the List), all data in the List are string values. This option allows you to transform the data type of the data in this column to a Date, Numeric, or Logical data type.
The ToNumber option uses the Alpha Anywhere $u.s.toNum() function, while ToNumberSimple uses the Javascript Number() function. $u.s.toNum() is more aggressive in trying to convert a string to a number. For example, it will convert a string like '$23.45' to a number, whereas Number() would not convert a string with formatting and currency symbols.
Options: None, ToDate, ToNumber, ToNumberSimple, ToLogical.
Decode value
Note: Available when Transform data type is None.
Specify if the value in this field should be decoded by looking up the value in a list of coded values and corresponding decoded values.
Decode lookup list
Note: Available when Decode value is checked.
Define the JSON list for the decoded values.
Date format
Note: Available when Transform data type is ToDate.
Specify the date/time format so that the date string can be parsed into a a date object.
Date/time display format
Note: Available for Date/Time fields when Transform data type is None.
Specify the format to use for displaying the value in this field.
Numeric display format
Note: Available for Numeric fields when Transform data type is None.
Specify the format to use for displaying the value in this field.
In-place Editing Properties
Control type
The control type to use when editing this field.
Options: Textbox, Textarea, Dropdown, Edit-combo, Auto-suggest, Datepicker, LogicalCheckBox, CheckBox, RadioButton, CustomLookup, ListLookup.
Control settings
Configure settings specific to the selected control type.
Validation - client-side
Specify the Javascript to run to validate the data in the field after is has been edited. The validation code runs when the user saves the edit. If there are any validation errors, the data are not saved.
Validation - server-side
Specify the Xbasic to run to validate the data in the field after is has been edited. The validation code runs when the user saves the edit. Validation code is only run if the row has been edited. If there are any validation errors, the data are not saved.
Allow edit
Specify if this field can be edited.
Conditional allow edit
(Optional) Specify the name of the Javascript function to call to determine if the field allows edits. The function must return true or false. If the function returns false, the field will not be editable.
Security Groups
(Optional) Specify which security groups are allowed to edit the data in this field.
Default value
Specify the Javascript to run to set the default value for this field when a new row is added.
Image Properties
Embed images into HTML
Note: This option is available if Image is selected for Control Type above.
Specify if the image should be base64 encoded and embedded directly into the HTML. This reduces the number of server round-trips to get the image data, but results in a substantially larger initial payload being sent from the server to the browser.
This option is generally only appropriate for 'small' images. Do not check this option if the image is specified by a URL.
Scale image on server
Note: This option does not apply if image is specified by a URL.
Specify if the image should be scaled on the server before it is served. Scaling the image on the server can improve performance by reducing the amount of data that must be transmitted.
Image Data type
Specify if the data in the field is an image file name, or is base64 encoded data.
Options: Name, Base64.
Base64 prefix
Note: Available when Image Data type is Base64.
If the base64 data in the field already has a prefix (e.g. 'data:image/jpg;base64,' ) then you will not need to add a prefix. But if the data in the field is just raw base64 encoded data, you will need to add the appropriate prefix.
Image file transformation template
Note: Available when Image Data type is Name.
If the Image Filename is a relative filename, this transformation expression can be used to convert to an absolute filename.
No image found image
(Optional) If this field does not have any Image data for a particular row, specify an optional image to display instead of an empty image. Specify <None> for no image.
Sign S3 image URLs
You can create List controls that show images stored in an S3 bucket that is not publicly accessible. To do this, the image URLs must be signed so the client can access them securely.
When this property is checked, Alpha Anywhere will generate a signed URL for the image resources using the credentials defined in the specified Storage connection string.
Displaying Images in Private S3 Buckets
Learn how to configure the List control to display images stored in a private S3 bucket by signing the URLs.
Storage connection string
Note: Available when Sign S3 image URLs is checked.
Select the Storage Connection String that contains the credentials used to sign the URL. The Storage Connection String MUST NOT be encrypted.
Detail View Properties
Validation Xbasic
Specify the server-side code (Xbasic) to validate this field value before data are committed to the database.
Default value Javascript
Specify the Javascript to execute to compute the default value for this field in the list Detail View when a new row is added to the List.
Your Javascript must 'return' the value. Example: return 'Alpha';
Your code can access the this context to get a pointer to the List object. For example, to set the default value to the value in the Lastname field from the last viewed record: return this.getData(this.selection[0]).Lastname;
onDetailView Populate Javascript
Specify the Javascript to execute before the Detail View is populated. You can use this event to format data from the List before it is displayed in the Detail View.
Your Javascript must 'return' the value. You can refer to this._value to get the value. Example: return this._value.toUpperCase();
onListUpdate Javascript
Specify the Javascript to execute before the List is updated with the Detail View value. You can use this event to transform data from the Detail View before the List is updated.
Your Javascript must 'return' the value. Your code can reference the this._value variable to get the default value with which the List will be update.
Updateable
Specify if this field can be updated. (If the field is a calculated field then it will not be updateable).
Image capture and storage properties
Note: These properties only apply when the image in this field is set using the 'Image Capture for List-Detail View' action in Action Javascript. Settings do not apply if the list is persisted to IndexedDB.
Specify properties for storing the image (for example, if the bound field is a character field, specify the folder where the image filename should be stored).
Check for write conflicts
Should a check for write conflicts be done when updating this field on the server?
Blank is NULL
Treat blank values as NULL.
Security groups
Specify which security groups have permission to update this field. If blank, all groups have permission.
Server-side permission expression
(Optional) Specify a server-side expression. If this expression evaluates to .t. (or is blank) then this field will be updateable. The expression will typically reference session variables.
Sanitize field data
Specify if the data in this field should be sanitized. If checked, certain HTML tags (e.g. <link>) will be encoded as link>)
QBE Properties
Control type
Specify the control type for this field in the QBE.
DateRangeNames can be used for date and datetime fields to display a list of friendly names (such as 'This year', 'This quarter', etc.)
Options: Textbox, Dropdownbox, DateRangeNames.
Default search operator
<Default> is Contains for a character field, and Equals for a non-character field.
Options: <Default>, Contains, Equals, Greater than or equals, Less than or equals, Greater than, Less than, Starts with, Ends with.
Default search value
Specify the default value for the QBE search field.
Exclude field from QBE
Should this field be excluded from the QBE?
Videos
Displaying Images in Private S3 Buckets
It is often a requirement to store images in a S3 bucket where the images are not publicly accessible. In this video we show how the image URLs can be signed so that the images can be viewed in the List.
See Also