Managing Interactive Grid Attributes

Report Attributes control how an interactive grid works. Developers edit interactive grid Attributes to control if end users can edit the underlying data, configure report pagination, create error messages, configure the toolbar and download options, control if users can save public reports, and add Icon and Detail Views.

Editing Interactive Grid Attributes

To edit interactive grid Attributes:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups.

    Tip:

    To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

  4. Edit the appropriate attributes.

    Tip:

    To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

  5. To save your changes click Save. To save and run the page, click Save and Run Page.

Making an Existing Interactive Grid Editable

End users can alter the report layout using Column menus and sort options, rearrange columns by dragging and dropping, and change how data displays using options on the Actions menu. However, developers determine whether the underlying data is read-only or editable by users. When an interactive grid is editable, end users can edit the underlying data, add rows, delete rows, and refresh rows. By default, editable interactive grids include a Save button on the toolbar. Developers can determine

To make an interactive grid editable:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups. To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

    Tip:

    To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

  4. In the Property Editor, find Edit and update the following attributes:
    1. Edit - Select Yes.
      Selecting Yes automatically creates a process to process the records. When Enabled is set to Yes, additional options appear.
    2. Allowed Operations - Select supported data manipulation operations. Options include: Add Row, Update Row, Delete Row
    3. Allowed Row Operations Column - Select a column where the column value indicates if the row can be updated and/or deleted.
    4. Lost Update Type - Select how to protect data against lost updates.

      Lost updates occur when two or more users try to update the same data, and the last update overwrites updates made by the previous user. To prevent this, updates can check the existing column value(s) in the database with the value(s) retrieved when the record was originally queried. For an example, see Page Designer Help.

      • Row Values - A checksum value is calculated for each row, when initially querying the data. The checksum is calculated by concatenating all of the updateable columns into a string and then generating a unique value. When committing the updated record, this checksum is compared to the checksum value.

      • Row Version Column - If your database table includes a column which is incremented every time a record is updated, preferably by a database trigger, then this column can be used instead of calculating checksums. Oracle does not recommend this option if your interactive grid updates data in multiple tables.

    5. Add Row If Empty - Specify whether to add a new row if the interactive grid currently has no records returned. When enabled, the No Data Found message never displays since there will always be at least one record.  If no updates are made to the record that was added it will not be inserted when the region is saved.
  5. To save your changes click Save. To save and run the page, click Save and Run Page.

Controlling Interactive Grid Pagination

Pagination provides the end user with information about the number of rows displayed and the current position within the result set.

To change interactive grid pagination:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups.

    Tip:

    To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, click Go to Group and select the group.

  4. Find Pagination.

    Pagination attributes provide the end user with information about the number of rows displayed and the current position within the result set.

    Tip:

    To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

  5. Under Pagination, edit the following attributes:
    1. Type - Select an option:
      • Page - Rows display based on what the end users select in the Actions menu, Format, Rows per Page option. If there are additional rows, controls are added to the report footer which enables users to navigate forwards and backwards between row sets.

      • Scroll - Rows display to fill the height of the interactive grid. As the end user scrolls, additional rows display as needed.

    2. Show Total Row Count - Select Yes or No.
      Selecting Yes displays the total row count in the report footer. Enabling this option requires an additional query which may hinder performance on very large data sets
  6. To save your changes click Save. To save and run the page, click Save and Run Page.

Tip:

Install the sample application, Sample Interactive Grids, to see interactive grid pagination examples. See "Installing a Productivity and Sample App."

Customizing the Interactive Grid Toolbar

All interactive grids include a toolbar at the top of the page. Developers can customize what controls display on the toolbar or remove it.

Note:

Some of the options described in this procedure only apply if the interactive grid is editable. See "Making an Existing Interactive Grid Editable".

To customize the interactive grid toolbar:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups.

    Tip:

    To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, click Go to Group and select the group.

  4. In the Property Editor, find the Toolbar group:
    1. For Show, select Yes or No to determine if a toolbar displays above the report.
    2. For Buttons, select which buttons display in the toolbar.

      Options include:

      • Reset - Reset removes any customizations (such as filters, column width, ordering, and so on) and reloads the report definition from the server.

      • Save - Save is only functional when an interactive grid is editable and the end user has authorization to add, update or delete. Save saves changes made to the interactive grid, without needing to save the whole page.

    3. Add Button Label only displays when the interactive grid is editable. For Add Button Label, enter an alternative label for the Add button. The default label is Add Row.
  5. To save your changes click Save. To save and run the page, click Save and Run Page.

Tip:

To view an example of adding a toolbar button, install the sample application, Sample Interactive Grids, and go to Reporting, Add Toolbar Button. See "Installing a Productivity and Sample App."

Enabling Users to Save Public Reports in Interactive Grids

Users can save an interactive grid as a Public report if the report developer enables that capability. Public reports display on the Saved Reports list on the toolbar and are available to all users. However, only the user who creates a Public report can save, rename, or delete it.

Tip:

The Save Public Report attribute is only available to authenticated users and can be further restricted by the defined Authorization scheme. See "Restricting Who Can Save Public Reports."

To enable end users to save Public reports:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups.

    Tip:

    To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

  4. In the Property Editor:
    1. Find Enable Users To.
    2. Save Public Report - Select Yes
  5. To save your changes click Save. To save and run the page, click Save and Run Page.

Restricting Who Can Save Public Reports

Developers can select an authorization scheme to restrict who can save Public reports. To enable an end user to save a Public report, this authorization scheme must evaluate to TRUE for that user. If an authorization scheme is not selected, then any user may save Public reports.

To restrict who can save a Public report:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups.

    Tip:

    To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, click Go to Group and select the group.

  4. In the Property Editor:
    1. Find Enable Users To.
    2. Save Public Report - Select Yes
    3. Save Public Report Authorization - Select an authorization scheme.

      Select an authorization scheme to restrict who can save public report definitions. To enable an end user to save a public report, this authorization scheme must evaluate to TRUE for that user. If you do not select an authorization scheme, then any user may save public reports.

  5. To save your changes click Save. To save and run the page, click Save and Run Page.

Enabling Icon View in an Interactive Grid

Interactive grids support different views of data. By default, interactive grids display data in a Grid view. Developers can optionally display data as icons. Enabling Icon view adds an Icon button to the select view button group.

About Icon View in an Interactive Grid

Interactive grids support different views of data. Users can switch between these views by clicking the buttons in the select view button group. The following illustration shows an interactive grid with Icon view enabled and the Icon button selected. To enable Icon view, you must identify the columns used to identify the icon, the label, and the target (that is, the link).

Description of ig_icon_view.png follows
Description of the illustration ig_icon_view.png

Viewing a Working Example of Icon View

To see a working example of this Icon view, install the sample application, Sample Interactive Grids and review Reporting, Icon and Detail Views .

Adding Icon View to an Interactive Grid

An important requirement of icon view is that each item in the view must have the same width and height and the item content must not overflow. The width and height are set with CSS rules on elements with a class of a-IconList-item.

To add an Icon view to an interactive grid:

To add an Icon view to an interactive grid:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups.

    Tip:

    To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, click Go to Group and select the group.

  4. FindIcon View.
  5. Configure the following Icon View attributes:

    Tip:

    To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

    1. Show - Specify whether the Icon View is enabled. Select Yes.
    2. Custom - Select No. Selecting Yes provides full control over the icon view item markup but also requires a full understanding of HTML markup.
    3. Icon Type - Select the column type that holds the icon image source. Select Icon CSS Classes. You must also add a column to your SQL statement that has a value that is a CSS class for an icon (for example, a Font APEX icon class name). As an alternative, you can also select Image in URL and then specify the column that contains the URL and Icon Attributes.
    4. Icon - Select the interactive grid column that returns the CSS classes for the icon image source.
    5. Link Target - Click Link Target to display the Link Builder - Link Target dialog. The link target defined is followed when the user activates the icon link with mouse or keyboard.
    6. Link Attributes - Enter HTML attributes that are associated with the display of each Link Target.
    7. Label Column - Select the report column that returns the image label.
  6. To save your changes click Save. To save and run the page, click Save and Run Page.

Adding a Custom Icon View Link to an Interactive Grid

A custom Icon View link provides greater flexibility in defining the content of the Icon View, including the ability to utilize more than one column.

To add custom Icon View link to an interactive grid:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups.

    Tip:

    To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, click Go to Group and select the group.

  4. Find Icon View.
  5. Configure the following Icon View attributes:

    Tip:

    To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

    1. Show - Select Yes.
    2. Custom - Select Yes. Selecting Yes provides full control over the icon view item markup but also requires a full understanding of HTML markup..
    3. Icon Type - Select the column type that holds the icon image source. Select Icon CSS Classes. You must also add a column to your SQL statement that has a value that is a CSS class for an icon (for example, a Font APEX icon class name). As an alternative, you can also select Image in URL and then specify the column that contains the URL and Icon Attributes.
    4. Icon - Select the interactive grid column that returns the CSS classes for the icon image source.
    5. Link Target - Click Link Target to display the Link Builder - Link Target dialog. The link target defined is followed when the user activates the icon link with mouse or keyboard.
    6. Link Attributes - Enter HTML attributes that are associated with the display of each Link Target.
    7. Label Column - Select the report column that returns the image label.
  6. To save your changes click Save. To save and run the page, click Save and Run Page.

Enabling Detail View in an Interactive Grid

Interactive grids support different views of data. By default, interactive grids display data in a Grid view. Developers can optionally display data as in a Detail view. Enabling Detail view adds an Detail button to the select view button group.

About Detail View in an Interactive Grid

Interactive grids support different views of data. Users can switch between these views by clicking the buttons in the select view button group. The following illustration shows an interactive grid with Detail view enabled and the Detail button selected. Detail view displays column values using developer defined HTML markup as shown in the following illustration.

Description of ig_detail_view.png follows
Description of the illustration ig_detail_view.png

Viewing a Working Example of Icon View

To see a working example of this Icon view, install the sample application, Sample Interactive Grids and review Reporting, Icon and Detail Views .

Adding a Detail View to an Interactive Grid

To add a Detail view to an interactive grid:

  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 the Rendering tab, locate the region containing the interactive grid.
  3. Under the region, select the Attributes node.

    The Property Editor displays the attributes. Attributes are organized in groups.

    Tip:

    To find a group or attribute, enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. Or, you can click Go to Group and select the group.

  4. Find Detail View.
  5. Configure the following Detail View attributes:
    1. Show - Select Yes.
    2. Before Rows - Enter the HTML to be displayed before report rows.
    3. For Each Row - Enter the HTML template to use for each report row in the Detail View. Use #COLUMN_NAME# substitution strings for column names and column labels.

      The following substitution strings are available:

      • &COLUMN_NAME. - substitution strings for column labels and names.

      • &APEX$ROW_ID. - the record identifier for the row.

      • &APEX$ROW_INDEX. - the record display sequence number.

      Example:

      <tr><td align="right">&ENAME_LABEL.:</td><td>&ENAME.</td></tr> <tr><td align="right">&JOB_LABEL.:</td><td>&JOB.</td></tr>
    4. After Rows - Enter the HTML to be displayed after report rows.
  6. To save your changes click Save. To save and run the page, click Save and Run Page.