You are here: User interface > User interface rules > Harness and section forms > Autocomplete Properties - Presentation tab

Autocomplete Properties — Presentation tab

Click the View properties icon of an autocomplete control to display the properties panel, and then click the Presentation tab to configure the display of the autocomplete control.

Field

Description

Edit options

Select an edit mode for this control. The edit mode of the control, specified here, takes precedence over section and harness settings.

  • Auto — Control is editable depending on the edit mode of the enclosing section or harness. If the section is set to Read Only, then the control cannot be modified. If the section is set to Auto, then the control uses the edit mode of the harness. For example, a New harness is editable, while a Review harness is not.
  • Editable — Control is editable, regardless of the edit mode of the enclosing layout.
  • Read Only — Control presents a read-only property value always, or based on a when condition rule or client-side test, even when the enclosing layout is in read-write mode.
Read-Only value

For read-only formats, select to display one of the following:

  • Property value — Displays the value of the selected property.
  • Another property's value — Displays the value of the property that you specify. In the field that displays, select the property for which you want to display the value.
  • Constant — Displays the value of the constant that you type in the field.
  • Localize property value — Displays the localized value of the property.
Display as combo box (field and button) Select the Display as combo box (field and button) check box to configure the autocomplete control as a combo box.
Specify size

Specifies the width of the drop-down list.

  • Select Auto if you want the layout to determine the width of the control area. This is the default.
  • Select Custom if you want to specify a fixed width for the drop-down list and the returned results. Specify the width of the autocomplete input box as the Field width and the width of the returned search results as the Listing width.
Results display

Select a display format for the autocomplete search results.

  • In a table - Results are displayed in a table where the first column contains the primary field values and the next columns contain the additional nonprimary field values.
  • In a list - Results are displayed as a list of primary field values. Additional nonprimary field values are displayed as secondary text under their primary values in the list separated by a semicolon.

Select the Display results full screen on phone check box if you want the search results to cover the full screen of your mobile device.

Select the Allow free-form input check box to allow users to enter values that are not part of the autocomplete source list.

Control

Specify a format for the autocomplete control. You can style autocomplete controls and create additional formats in the skin rule.

Label

Specify a format for the autocomplete control label.

Read-Only format
Type

Select a format (read-only) used with this property. Your selection filters the format options.

  • None — The property is not formatted. There are no options.
  • Date — Renders DateTime and Text property types in date-only format (hours and minutes are not displayed).

    Specify the format in the Date Format field.

  • Date/Time — Renders DateTime and Text property types in date and time format.

    Specify the format in the DateTime Format field.

  • Number — Numeric properties on output.
  • Text — Unedited text, which may contain spaces, tabs, line break characters, and other control characters.
  • True/False — Boolean values.

    Specify the format in the True Label and False Label fields.

DateTime format

or

Date format

Appears if Type is Date/Time or Date.

Select one of the following:

  • A DateTime format (for example: 1/1/01 1:00 AM), or a Date format (for example: 1/1/01). Both the DD/MM/YYYY and MM/DD/YYYY formats can be selected from the Date format drop-down control. The number of characters displayed is the same regardless of the date inputted (for example, 1/1/2014 displays as 01/01/2014).

    You can also create a custom date when using either of these formats. For example, entering EEE, MMM D, YY H:MM A in the "Custom" field displays as Sat, May 1, '99 2:00 PM.

  • The elapsed time format (2 days, 5 hours ago or 2d, 5h ago). The system displays the value calculated as the difference between the current system date/time and the date/time value of the property. For example:

Current = 3/21/2011

Property value of 3/20/2011 = 1 day ago

Property value of 3/22/2011 = 1 day from now

The units of measure are minutes, hours, days, and years. If greater than 59 minutes, the value is represented in two units (unless the difference is exactly one unit). For example:

1 hour, 10 minutes

2 days, 20 hours

1 month, 4 days

1 year, 3 months

If less than a minute, the value is displayed as "less than a minute ago" (or from now). For the 2d, 5h ago date/time format, the past and future indications such as ago or from now can be excluded from the time stamp by selecting the Do not display past or future text check box.

To calculate months and days, the system uses today's numerical day in the previous month(s). For example, if today is March 21, one month ago was February 21, not one month, six days ago.

If the property is a Date type or the format is Date, minutes are excluded.

Text alignment

Appears if Type is Number.

Select left, right, or center alignment.

Decimal places

Appears if Type is Number.

A non-negative integer to control the number of digits presented after the decimal place. The default is Auto, which displays a maximum of three decimal places (placeholder zeroes are not added). Select to remove all digits after the decimal point and round to the nearest integer. Select All to include all digits.

Scale

Appears if Type is Number.

Select a label indicating the scaling you wish to apply to the number. The scales are K for thousands, M for millions, B for billions, and T for trillions. For instance, if you select Thousands, a value of 20,000 appears as "20 K." If Percentage, the value appears as a percentage sign (.8 appears as "80%").

Negative format

Appears if the Type is Number.

Select a format (minus sign or parenthesis) for displaying negative numbers.

You can also specify a CSS class if you select one of the Style Ref options. By default, the class name is NegativeNumber.

Symbol

Appears if Type is Number. When a symbol is specified an additional character(s) is prepended to the value. Currency automatically uses the localized currency symbol, constant uses a string, and reference uses a property value.

Select an option for representing the number as

  • Currency — Formats the number as a currency using the default locale.
  • Constant — A text string or character (for example, "%") ASCII character that you enter.
  • Reference — A property value.
Separators

Appears if Type is Number.

Select to use a thousands' separator. Depending upon the default locale, a comma or period is used.

Obfuscated

Appears if the Read-only format Type is Text.

Select Yes if you want the characters entered by the user to appear as a string of bullets. The input characters are initially added to the clipboard as unencrypted, clear text values. The system computes the hashed value only as the page is committed to the PegaRULES database. Thereafter, the hashed value appears in both the clipboard and the database row.

Auto prepend

Appears if Type is Text and the control is not obfuscated.

Select a property or constant that you want to add either before the displayed property value. For example, when the user name appears, the system can automatically prepend the user's title.

Auto append

Appears if Type is Text and the control is not obfuscated.

Select a property or constant that you want to add after the displayed property value. For example, when the user name appears, the system can automatically append the full mail extension to the name.

Show value as

Appears if the Type is True/False.

Select to label either outcome using Text or an Image.

True image

False image

Appears if the Type is True/False and Show Value As Image is selected.

Select an image to label either outcome. Used with a boolean type.

True text

False text

Appears if the Type is True/False and Show Value As Text is selected.

Enter a text string to label either outcome. Used with a boolean type.

If the Localize? check box is selected on the section's HTML tab, a SmartPrompt Appears in the Constant field in the Parameters dialog. Select a field value rule if you plan to localize the text. If this text is to be localized, enter no more than 64 characters. A field value rule with pyCaption as the second key part and this text as the final key part is needed for each locale.

Advanced Presentation Options

Instead of creating a new custom format in the skin, you can adjust elements in a cell by applying Cascading Style Sheet (CSS) helper classes. For example, you can use a CSS helper class to center an element in a cell or to double the standard right margin for the element.

  • Cell read-write classes – Click the Open helper class picker icon to specify one or more CSS helper classes to apply to this cell when the form is displayed in read-write mode. You can enter several helper classes, separated by a space. Alternatively, you can enter the name of a custom style to apply to this cell.

  • Cell read-only classes – Click the Open helper class picker icon to specify one or more CSS helper classes to apply to this cell when the form is displayed in read-only mode. You can enter several helper classes, separated by a space. Alternatively, you can enter the name of a custom style to apply to this cell.

  • Inline style (not for production use) – You can use this field to define an inline style by entering CSS code. However, entering an inline style results in a guardrail warning. For maintainability and reuse, the recommended approach is to use read-write or read-only classes.

For more information, see CSS helper classes.