Appendix A: About Item Types

Review descriptions of the item types available in App Builder and important attributes in Page Designer that control item behavior.

An item can be part of an HTML form or used in an interactive grid column. An item can be a text field, text area, password, select list, checkbox, and so on. Developers can control how a page item works by editing the item attributes in Page Designer. To learn more about specific item attributes, select the attribute in Page Designer and select the Help tab.

Tip: Your application may also include plug-in items. Plug-ins display as <My Plug-in> [Plug-in]. See Implementing Plug-ins.

See Also: Managing Page Items

Checkbox

Displays a single checkbox, enabling the user to check or uncheck it.

A checkbox item always has one of two values, the checked value or unchecked value.

Page Designer attributes that control behavior:

Checkbox Group

Displays multiple values as checkboxes, enabling the end user to select multiple values.

Note: For Yes/No checkboxes (that is, a checkbox with only one value), Oracle recommends using a checkbox or a Switch item type.

A list of values is required for items displayed as checkboxes. The values corresponding to the checked boxes are stored in a single colon-delimited string.

The following example displays employee names (ename), but returns employee numbers (empno):

SELECT ename, empno FROM emp;

See Also: APEX_UTIL in Oracle APEX API Reference for information about breaking up returned values

Page Designer attributes that control behavior:

See Also: Creating a Cascading List of Values

Color Picker

Displays a control for choosing or entering a color depending on the Display As setting. End users can enter a color value or select one from an inline or popup color spectrum.

Page Designer attributes that control behavior:

Combobox

Displays a text item with a list of values icon.

Oracle recommends using a combobox item for small lists where end users can add their own text. When the end user clicks the icon, a popup window appears with a suggestion drop-down of values. A combobox item supports filtering and free text input. If the Multiple Values attribute is enabled, the combobox displays selected options as chips.

Tip: For selections without free text input, consider using a Select List, Select One, or Select Many. For large result sets, consider a Popup LOV. See Select List, Select One, Select Many, and Popup LOV.

Page Designer attributes that control behavior:

Tip: To create this item type, you must define a list of values. See Creating Lists of Values at the Application-Level, Working with Multiple Select List Item, and Creating a Cascading List of Values.

Date Picker

Displays a text field with a calendar icon. End users can either enter the date directly into the text item, or click on the calendar icon to select a date, and optionally a time, from the calendar popup.

Time is only displayed in the calendar popup if the Format Mask for this item includes time components.

Page Designer attributes that control behavior:

Date Picker (jQuery) (Desupported)

Displays a text field with a calendar icon. End users can either enter the date directly into the text item, or click on the calendar icon to select a date, and optionally a time, from the calendar popup.

Note: The Date Picker (jQuery) item type is desupported and should no longer be used. Existing apps do not automatically switch to using the new date picker to preserve possible customizations. You can switch all the date pickers in your app to use the new date pickers by using Upgrade Application in the Utilities section of your application in App Builder. See Running Application Upgrade

Time is only displayed in the calendar popup if the Format Mask for this item includes time components.

Page Designer attributes that control behavior:

Display Image

Displays an image stored in a database BLOB columns, or based on an image URL.

Note: This item type is not supported for interactive grid columns.

Page Designer attributes that control behavior:

Display Map

Displays a map based on coordinates in GeoJSON point format.

Page Designer attributes that control behavior:

Display Only

Displays a non-enterable text item.

Page Designer attributes that control behavior:

File Upload

Displays a text field with a Browse button. The Browse button enables the user to locate and upload a file from a local file system.

Note: Not supported for interactive grid columns.

Page Designer attributes that control behavior:

Geocoded Address

Provides geocoding functionality that turns a postal address to a coordinate.

Geocoding is performed by the browser using a REST request to the Oracle Elocation Geocoding Service (https://elocation.oracle.com/elocation/home.html). In order for geocoding to work, the user’s browser must be connected to the internet.

Geocoding input data comes from other page items which are mapped to parts of an address such as Street, House Number, Postal Code, or City. The Geocoder displays a popup window with a list of possible matches. After choosing a match, the item’s session state value will be the address coordinate in GeoJSON format.

The Structured Address attribute determines whether the address parts are provided to the geocoding service in a structured or unstructured manner. Structured means that explicit page items are mapped to address parts such as Street, Postal Code, City or Region. A structured address has more accurate geocoding results, and also allows for address correction to be sent back to the page item. Unstructured means that only one item is used for the whole address and the address parts are separated by comma. Unstructured mode does not support address corrections.

A Geocoded Address item needs at least one other input item to work and for an exact address requires a maximum of eight input items.

If Structured Address is Off, the item maps to only one text field or text area where end users enter address parts, separated by comma. The following item attributes display under Settings in the Property Editor:

If Structured Address is On, the following item attributes display under Settings in the Property Editor:

Note:

The Geocoded Address and Display Map items both work with the Oracle Elocation Map Cloud service (https://maps.oracle.com/elocation/ajax/index.jsp). This service is accessed by the browser, not by the APEX database on the server. Be aware this may result in data protection consequences for users. The geocoding items as and display map items store a coordinate in GeoJSON format (https://de.wikipedia.org/wiki/GeoJSON) Note that only the “geometry” portion is used. Currently only “Point” geometries are supported, for example:

{
  "type": "Point",
  "coordinates": [
    13.74081,
    51.05363
  ]
}

Image Upload

Displays an Image Upload item which enables users to upload one or multiple images from a local file system or device. Images can be optionally cropped or resized.

The Image Upload item type includes attributes specific to previewing, uploading, resizing, and cropping an image.

From the user’s perspective, this item type displays an upload input or dropzone which enables users to select the image (or images). If cropping is enabled, a dialog appears that enables the user to zoom in or out, or move the image around before cropping. Once cropping is complete or immediately after uploading, if cropping is not enabled, an image preview appears. Image resizing is handled on the client side but in the background.

Page Designer attributes that control behavior:

Hidden

Hidden items are included within the page source but are not rendered.

Hidden item values are saved in session state. They are generally used to store values required by page processing or other page items, but should not be displayed to the end user.

Page Designer attributes that control behavior:

Markdown Editor

Displays a simple text editor that enables you to use Markdown shorthand syntax to add formatting to text.

Note: Markdown Editor is not supported for interactive grid columns.

Page Designer attributes that control behavior:

See Also: Markdown Guide

List Manager

Displays a text item with a popup list of values icon, Add and Remove buttons, and a list of selected values.

Note: Not supported for interactive grid columns.

You can type in the value or pick from the list of available items. You can then utilize the buttons to manage the values selected. The selected values are stored in a single colon-delimited string.

Page Designer attributes that control behavior:

See Also: Creating a Cascading List of Values

Number Field

Displays as a number field and supports automatic formatting.

Numbers are formatted on the client after data entry according to the format mask. This item type automatically checks if the entered value is a number. No extra validations are required. Validation is done on both client and server.

Note: Number Fields are limited to a precision of about 15 to 17 decimal digits due to JavaScript representing numbers in IEEE 754 format. This limit affects applying a format mask and validating that the input is a valid number. This is typically enough precision for most use cases. The Oracle Database can handle numbers with larger precision. It is often primary key columns that use very large numbers and for these, or other large numbers Oracle recommends using a Text Field.

Page Designer attributes that control behavior:

Password

Displays an HTML password form element. As the end user enters text a black dot is displayed for that character, instead of the actual character entered.

Page Designer attributes that control behavior:

See Also: About Session State and Security

Percent Graph

Displays the value as a percentage graph. The value retrieved must be between 0 and 100.

Popup LOV

Displays a text item with a popup list of values icon. When the end user clicks the icon, a popup window appears with a search field, and a list of supported values.

Popup LOV is best suited for large lists since end users can enter search criteria to reduce the available values displayed. For relatively small lists Select List is often better suited.

SELECT ename name, empno id FROM emp

If one of the columns is an expression, remember to use an alias. For example:

SELECT ename||' '||job display_value, empno FROM emp

Page Designer attributes that control behavior:

See Also: Creating a Cascading List of Values

QR Code

Encodes the selected source value into a QR code and displays it.

A QR code is a barcode that contains a machine-readable optical image. A QR code can be scanned using a smartphone camera and a QR code reader app and can be used to store or share information.

Page Designer attributes that control behavior:

Radio Group

Displays multiple values as radio group options, enabling the end user to select a single value.

The following example displays employee names (ename), but returns employee numbers (empno):

SELECT ename, empno FROM emp;

Page Designer attributes that control behavior:

Rich Text Editor

Displays a text area with comprehensive text formatting options.

End users can enhance the content displayed in a similar fashion to using a word processor, such as Microsoft Word. End users can also cut and paste documents that are in rich text format (RTF) file format into this item.

Page Designer attributes that control behavior:

Select List

Displays an item with a built-in list of values selector. When the end user clicks the item, the list of supported values displays directly inline with the current item.

Select List is best suited for relatively small, discrete lists. End users can very quickly select a value from the list without needing to change focus to a popup dialog. For large lists, consider using a Popup LOV.

select [displayValue],
       [returnValue]
  from ...
 where ...
 order by ...

Page Designer attributes that control behavior:

Note: To create this item type, you must define a list of values. See Creating Lists of Values at the Application-Level, Working with Multiple Select List Item, and Creating a Cascading List of Values.

Select Many

Displays a drop-down list that supports multi-select and search filtering.

A Select Many item displays a LOV-based item that shows suggestions that allow multi-values. When the end user clicks the field, a popup window appears with a list of suggested values. A Select Many item provides a more user-friendly select item compared to a Popup LOV and supports filtering, groups, and template directives.

Page Designer attributes that control behavior:

Note: To create this item type, you must define a list of values. See Creating Lists of Values at the Application-Level, Working with Multiple Select List Item, and Creating a Cascading List of Values.

Select One

Displays as an item with a list of values icon which supports the selection of one value and search filtering.

When the end user clicks the field, a popup window appears with a list of suggested values. A Select One item provides a more user-friendly option compared to a Select List item and supports filtering, groups, and template directives.

Page Designer attributes that control behavior:

Note: To create this item type, you must define a list of values. See Creating Lists of Values at the Application-Level, Working with Multiple Select List Item, and Creating a Cascading List of Values.

Shuttle

Displays as a multiple select list that includes two boxes containing lists. The left list displays the source list of values that have not been selected and the right list shows the currently selected values.

End users can select one or more values in a list then use the shuttle controls to move the selected values or all values. The current values are stored in a single colon-delimited string.

Page Designer attributes that control behavior:

Note: To create this item type, you must define a list of values. See Creating Lists of Values at the Application-Level, Working with Multiple Select List Item, and Creating a Cascading List of Values.

Textarea

Displays a multiple-row text area.

Page Designer attributes that control behavior:

Star Rating

Displays a star rating (maximum of 10) that end users can click to set a numeric value.

Page Designer attributes that control behavior:

Switch

Displays as a flip toggle switch.

Page Designer attributes that control behavior:

Text Field

Displays the item as a text field.

Page Designer attributes that control behavior:

Text Field with Autocomplete

Displays a text field that displays a list of possible values based on the text already entered by the end user, inline with the text item. The list is further refined as the end user types in more text.

Consider the following example:

select [column]
  from ...
 where ...
 order by ...

Page Designer attributes that control behavior:

Textarea

Displays a multiple-row text area.

Page Designer attributes that control behavior: