13.2 Managing Page-Level Items in Page Designer

An item is part of an HTML form. An item can be a text field, text area, password, select list, check box, and so on. This section describes how to create page-level items in Page Designer.

Topics:

13.2.1 Viewing Page-Level Items in Page Designer

Item attributes affect the display of items on a page. For example, these attributes can impact where a label displays, how large an item is, and if the item displays next to or below the previous item.

To view page-level attributes in Page Designer:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. In either the Rendering tab or the Layout tab, select the item to edit.

    The Property Editor changes to display the attributes.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  3. Edit the appropriate attributes in the Property Editor.

    Tip:

    To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the center pane.

  4. Click Save.
  5. Click Save and Run to view the page.

13.2.2 Creating Page-Level Items

This section describes how to create page-level items by running the Create Item Wizard.

Topics:

13.2.2.1 Creating a Page-Level Item from the Rendering Tab

To create a page-level item from the Rendering tab:

  1. View the page to contain the item in Page Designer.
  2. If necessary, create a region to contain the item.
  3. In the Rendering tab, right-click the region to contain the item and select Create Page Item.
  4. To view all attributes in the Property Editor, click Show All.
  5. To search for a group or an attribute, enter a keyword in the Filter Properties field.
  6. Edit the appropriate attributes in the Property Editor.

    Tip:

    To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the center pane.

  7. Click Save.

13.2.2.2 Adding a Page-Level Item from the Gallery

To create a page-level item by adding if from the Gallery:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. If necessary, create a region to contain the item.
  3. In the central pane, click Layout and then the Items tab in the Gallery.

    Passing the cursor over an item displays a tooltip that describes it.

  4. Select an item and drag it to the appropriate location in the Layout tab.

    Tip:

    You also right-click the item, click Add To, and select the appropriate location.

    The Property Editor displays Page Item attributes.

    The Messages tab displays a red or yellow badge to identify messages you need to address. Selecting a message displays the associated attribute in the Property Editor. You must address red error message before you can save.

  5. Edit the appropriate attributes in the Property Editor.

    Tip:

    To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

  6. Click Save.

13.2.2.3 Creating a Static List of Values

One way to create a static list of values is to edit an item's List of Values definition. Note that this type of list of values is not reusable. As a best practice, create a list of values as a shared component whenever possible.

To create a static list of values:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. Create a new item.
    The Property Editor displays the Page Item attributes.
  3. Edit the appropriate attributes in the Property Editor.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

    Tip:

    To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the center pane.

  4. Under Identification:
    1. Name - Enter the name of this item. Item names must be valid Oracle identifiers. Oracle recommends that item names be no longer then 30 bytes so they can be used as bind variables in SQL Queries.
    2. Type - Select Select List.
  5. Under List of Values:
    1. Name - Select Static Values.
    2. Static Values - Enter the text for this static list of values using the following syntax:
      STATIC[2]:Display Value[;Return Value],Display Value[;Return Value]

      Where:

      • The first keyword may be STATIC or STATIC2.

        If the text starts with STATIC:, the list values displays alphabetically. Alternatively, if the text starts with STATIC2:, the list values displays in the same order they are specified in the text.

      • A semicolon separates the display value from the return value in each entry.

      • Return Value is optional. If a Return Value is not included, the return value equals the display value.

      To see examples, click the Help tab in the central pane.

  6. Click Save.
  7. Click Save and Run to view the page.

Topics:

13.2.2.3.1 Example 1: Four Values Displayed in Alphabetical Order

In this example, the list of values has four values (Cow, Dog, Cat, and Lion) that display in alphabetical order. The return value of each entry equals the display value.

STATIC:Cow,Dog,Cat,Lion

13.2.2.3.2 Example 2: Ten Values Displayed in the Order Listed

In this example, the list of values has ten values that display in the order listed in the definition. The return value of each entry equals the display value.

STATIC2:10,15,20,25,50,100,200,500,1000,10000

13.2.2.3.3 Example 3: A List of Values with Having Both a Return and Display Value

In this example, the list of values has two values: Yes and No (the display value Yes and its return value Y, and the display value No and its return value N).

STATIC:Yes;Y,No;N

13.2.2.4 Creating a Cascading List of Values

By creating a cascading list of values (LOV), one item on a page determines the list of values for another item. App Builder includes cascading LOV support for the following item types: Select List, Shuttle, Checkbox, Radio Group, Popup LOV, and List Manager.

You create a cascading LOV by creating two items. To populate the second item, you specify a Cascading LOV Parent Item when running the Create Item Wizard or by editing the item's attributes.

The following example demonstrates how to create two related select lists where the value of the first list populates the second.

To create a cascading list of values:

  1. Create the first item and name it P1_DEPTNO:

    1. Create a select list item.

    2. For Identification, Type, select Select List.

    3. For Identification:

      • Name - Enter:

        P1_DEPTNO
        
      • Type - Select Select List.

    4. For Label:

      • Label - Enter:

        Department
        
    5. For List of Values:

      • Type - Select SQL Query.

      • For SQL Query, enter:

        SELECT dname as d,
               deptno as r
          FROM dept
         ORDER BY dname
        
      • Display Null Value - Select Yes.

      • Null Display Value - Enter - Select:

        - Select Department -
        
    6. Accept the remaining defaults.

    7. Click Save.

  2. Create the second item named P1_EMPNO:

    1. Create a select list item.

    2. For Identification, Type, select Select List.

    3. For Identification:

      • Name - Enter:

        P1_EMPNO
        
      • Type - Select Select List.

    4. For Label:

      • Label - Enter:

        Employee
        
    5. For List of Values:

      • Type - Select SQL Query.

      • For SQL Query, enter:

        SELECT ename as d,
               empno as r
          FROM emp
         WHERE deptno = :P1_DEPTNO
         ORDER BY ename
        
      • Display Null Value - Select Yes.

      • Null Display Value - Enter - Select:

        - Select Employee -
        
    6. Accept the remaining defaults.

    7. Click Save.

Two select lists appear. Making a selection in the Department select list, determines which individuals display in the Employees select list.

13.2.3 Editing Page-Level Items in Page Designer

This section describes how to edit page-level items in Page Designer.

Topics:

13.2.3.1 Editing Page Item Attributes in the Property Editor

To edit item attributes in the Property Editor:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. In either the Rendering tab or the Layout tab, select the item to edit.

    The Property Editor changes to display Button attributes.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  3. Edit the appropriate attributes.

    Edited attributes display a blue marker to the left of the attribute name until the page is saved.

    Note:

    To learn more about an attribute, see field-level Help. See "Viewing Field-Level Help."

  4. Click Save.

13.2.3.2 Defining Default Values for Page Items

You define default values for an item using the attributes under Default on the Edit Page Item page. The default value is used when the item's value is not derived from session state and when the source value is NULL.

To define a default value for an item:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. In either the Rendering tab or the Layout tab, select the item to edit.

    The Property Editor displays the item attributes.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  3. Locate Default.
  4. Select a Type:
    • Static Value
    • PL/SQL Expression
    • PL/SQL Function Body
  5. Click Save.

13.2.3.3 Configuring Page Item Security

To configure page item security:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. In either the Rendering tab or the Layout tab, select the item to edit.

    The Property Editor displays the item attributes.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  3. Locate and expand Security. Configure the following Security attributes.

    Table 13-2 Property Editor - Page Item, Security

    Attribute Description

    Authorization Scheme

    Select an authorization scheme which must evaluate to TRUE in order for this component to be rendered or otherwise processed.

    See Also: "Providing Security Through Authorization"

    Session State Protection

    Select a Session State Protection level. Options include:

    • Unrestricted - The item can be set by passing the item in a URL or in a form. No checksum is required in the URL.

    • Checksum Required - User Level - The item can be set by passing the item in a URL that includes a checksum specific to the workspace, application and user.

    • Checksum Required - Session Level - The item can be set by passing the item in a URL that includes a checksum specific to the the session.

    • Restricted - May not be set from browser - The item cannot be altered using the URL or POSTDATA. Select this option to restrict what can set the item value to internal processes, computations, and so on. This attribute only applies to items that are not used as data entry items and is always observed, even if Session State Protection is disabled. Use this attribute for page or application items that have the following Display As types

      • Display Only (Save State=No)

      • Text Field (Disabled, does not save state)

    See Also: "Understanding Session State Protection"

    Store value encrypted in session state

    Specify whether to encrypt this item when stored in session state. If the contents of an item contain sensitive data, then you should encrypt the value when it is stored in the Application Express session state management tables. Otherwise, anyone with rights to read the Application Express meta data tables could potentially write a query to extract this sensitive data.

    Values up to 4000 bytes in length can be encrypted. Attempts to encrypt values longer than 4000 bytes produce an error message.

    Escape Special Characters

    This attribute only displays with some item types. Select Yes to prevent Cross-Site Scripting (XSS) attacks. Select No if you want that HTML tags which are stored in the page item or in the entries of a list of value are actually rendered.

    See Also: "Understanding Cross-Site Scripting Protection"

    Restricted Characters

    Select how to restrict the characters that can be saved in session state. Application Express displays an error message if a user tries to save data that does not conform to the selected character restriction. Restricting the characters hardens application security and is a possible counter measure to cross-site scripting (XSS) attacks.

    Available options include:

    • All characters can be saved.

      No restriction applies.

    • Whitelist for a-Z, 0-9 and space

      Only allow characters a-z, A-Z, 0-9, and space.

    • Blacklist HTML command characters (<>").

      Do not allow reserved HTML characters

    • Blacklist &<>"/;,*|=% and --:

      Do not allow &, <, >, ", /, ;, ",", *, |, =, % and "--" (PL/SQL comment).

    • Blacklist &<>"/;,*|=% or -- and new line

      Do not allow &, <, >, ", /, ;, ",", *, |, =, %, "--", and new line characters

    See Also: "Understanding Cross-Site Scripting Protection"

13.2.3.4 Creating a Quick Pick Selection

Quick picks enable users to select predefined values with just one click, rather than typing in text or selecting from a list of available options. If the item type supports quick pick selection, use the Quick Picks attributes to define up to ten selections that display under a give item. Clicking on a quick pick sets the value of item. The following example shows quick picks for 5%, 10%, 15%, and 20%.

To create a quick pick:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. In either the Rendering tab or the Layout tab, select the item to edit.

    The Property Editor displays the item attributes.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  3. Under Quick Picks:
    1. Show Quick Picks - Select Yes.
    2. Link Attributes - Enter HTML attributes that are associated with the display of each Quick Pick link
    3. Label - Enter the label for the each Quick Pick. This label is the text the end user of the application sees.
    4. Value - Enter the value associated with each Quick Pick. This value replaces the existing item value when the user clicks the quick pick.
  4. Click Save.

13.2.3.5 Displaying Conditional Page Items

To display a conditional item:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. In either the Rendering tab or the Layout tab, select the item to edit.

    The Property Editor displays the item attributes.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  3. Locate Server-side Condition. Select a condition Type and enter appropriate information in the field provided.

    Tip:

    To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

  4. Click Save.

13.2.3.6 Displaying Read Only Page Items

To display a read-only item:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. In either the Rendering tab or the Layout tab, select the item to edit.

    The Property Editor displays the item attributes.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  3. Under Read Only , select a Type, and enter appropriate information in the field provided.

    Tip:

    To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

  4. Click Save.

13.2.3.7 Configuring Item Attributes to Warn Users of Unsaved Changes

Developers can use the Warn on Unsaved Changes item attribute to specify if the page item should be included in the unsaved changes check. This check warns the user when they try to navigate away from a page and when the page contains unsaved changes. Items not based on a database column (for example, a search item) may not need to be checked. For those items, set Warn on Unsaved Changes to Do Not Check.

To configure the Warn on Unsaved Changes attribute:

  1. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  2. In either the Rendering tab or the Layout tab, select the item to edit.

    The Property Editor displays the item attributes.

    Attributes are organized into functional groups. To expand or collapse these groups, click the Show CommonShow AllCollapse All, and Expand All icons.

    To search for a group or an attribute, enter a keyword in the Filter Properties field.

  3. Locate and expand Advanced.
  4. For Warn on Unsaved Changes, select one of the following:
    • Page Default - Check for unsaved changes when the button is clicked if Warn on Unsaved Changes is enabled at page level.

    • Do Not Check - Changes to the item are ignored by the unsaved changes check. Select this option items not based on a database column (for example, a search item).

  5. Click Save.

Tip:

The Warn on Unsaved Changes attribute is implemented using the apex.page.warnOnUnsavedChanges API.

13.2.3.8 Viewing Item Utilities

The Utilities page includes Grid Edit pages and reports that enable you to edit items on multiple pages within a selected application.

To access the Utilities page:

  1. On the Workspace home page, click the App Builder icon.
  2. Select an application.
  3. Click Utilities.
  4. From Page Specific Utilities region, click Item Utilities.
  5. Select one of the following reports:
    • Grid Edit of all Item Labels

    • Grid Edit of all Item Help Text

    • Item Help Subscriptions

    • All Page Items

    • Password Items

    • Conditional Items