8.3.2 Managing Interactive Grid Attributes

Interactive grid Attributes control how an interactive grid works. For example, developers use these attributes to determine 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.

Topics:

See Also:

"Managing Pages in Page Designer"

8.3.2.1 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 in the Property Editor.

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

  4. To search for an attribute, enter a keyword search in the Filter Properties field. The groups and attributes containing the term appear.
  5. 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.

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

See Also:

"Right Pane of Page Designer (Property Editor)"

8.3.2.2 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 in the Property Editor.

  4. In the Property Editor, click the Collapse All icon and then expand Edit.

    When an interactive grid is editable, the system automatically creates a process to process the records. When Enabled is set to Yes, additional options appear.

    Configure the following Edit options:

    1. Enabled - Select Yes.

    2. Allowed Operations - Select supported data manipulation operations. Options include: Add Row, Update Row, Delete Row.

    3. Allowed Row Operations Column - To control the allowed operations on a per row basis add a column to your SQL query and select that column here. The column value must be U to allow update, D to allow delete or UD to allow both.

    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.

      Options include:

      • 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. 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 first user to save changes. To prevent this from happening, updates can check the existing column value(s) in the database with the value(s) retrieved when the record was originally queried.

    6. 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.

See Also:

"Right Pane of Page Designer (Property Editor)"

8.3.2.3 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 in the Property Editor.

  4. In the Property Editor, click the Collapse All icon and then expand 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.

    Configure the following Pagination 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.

  5. 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 Packaged Application."

8.3.2.4 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 in the Property Editor.

  4. In the Property Editor, click the Collapse All icon and then expand Toolbar.

    Tip:

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

  5. For Show, select Yes or No to determine if a toolbar displays above the report.
  6. 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.

  7. Add Button Label only displays when the interactive grid is editable. Enter an alternative label for the Add button. The default label is Add Row.
  8. 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 Packaged Application."

8.3.2.5 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 in the Property Editor.

  4. In the Property Editor, click the Collapse All icon and then expand Enable Users To.
  5. For Save Public Report, select Yes.
  6. To save your changes click Save. To save and run the page, click Save and Run Page.

8.3.2.6 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 in the Property Editor.

  4. In the Property Editor, click the Collapse All icon and then expand Enable Users To.
  5. For Save Public Report, select Yes.
  6. For 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.

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

8.3.2.7 Enabling Icon View in an Interactive Grid

Interactive grids support different views of the data. The grid view displays by default and users can also define a chart view. Developers can optionally add an Icon button to the select view button group as shown in the following illustration.

Description of GUID-060A0CB3-C95D-49E7-9DBB-20C2E93BCCA0-default.png follows
Description of the illustration GUID-060A0CB3-C95D-49E7-9DBB-20C2E93BCCA0-default.png

To use Icon view, you must identify the columns used to identify the icon, the label, and the target (that is, the link).

Tip:

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

Topics:

8.3.2.7.1 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:

  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 in the Property Editor.

  4. In the Property Editor, locate and expand 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 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 CSS - Select the column that holds the icon CSS class.
    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. Label Column - Select the column that contains the label to use for the icon item.
  6. To save your changes click Save. To save and run the page, click Save and Run Page.

8.3.2.7.2 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 in the Property Editor.

  4. In the Property Editor, locate and expand 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 - Specify whether you wish to define a custom link for the Icon View. This option provides greater flexibility in defining the content of the Icon View, including the ability to utilize more than one column. Select Yes or No.
    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 CSS - Select the column that holds the icon CSS class.
    5. Link Target - Click Link Target to display the Link Builder - Link Target dialog. Define the link target. The link target defined is followed when the user activates the icon link with mouse or keyboard.
    6. Label Column - Select the column that contains the label to use for the icon item.
  6. To save your changes click Save. To save and run the page, click Save and Run Page.

8.3.2.8 Enabling Detail View in an Interactive Grid

Interactive grids support different views of the data. By default grid view is always included and a chart view can be defined by the user. You can optionally define a detail view, which displays column values using developer defined HTML markup as shown in the following illustration.

Description of GUID-469D06D1-120C-4071-B91F-78EFE8F3EC7C-default.png follows
Description of the illustration GUID-469D06D1-120C-4071-B91F-78EFE8F3EC7C-default.png

Tip:

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

Topics:

8.3.2.8.1 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 in the Property Editor.

  4. In the Property Editor, locate and expand 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.