8.9.7 Managing Interactive Report Column Attributes

Edit column attributes to control the display, features, and behavior of interactive report columns.

• Editing Common Interactive Report Column Attributes
  Edit columns attributes to change the column heading, determine how a column renders, and control how users can manipulate a column.
• Creating a Column Link in an Interactive Report
  Configure Column Attributes to create a link from a report to another page in your application or to a URL
• Defining a Column as a List of Values in an Interactive Report
  Add a list of values in an interactive report to improve the speed of built-in filter tools.
• Enabling Single or Multiple Row Selection
  Enable single or multiple row selection and optionally display a row selector control.
• Formatting Columns in an Interactive Report
  Customize column display with HTML expressions.
• About Filtering on Conditional Links in Interactive Report Columns
  Learn about about filtering on conditional links in interactive report columns.

See Also:

Editing Pages in Page Designer

8.9.7.1 Editing Common Interactive Report Column Attributes

Edit columns attributes to change the column heading, determine how a column renders, and control how users can manipulate a column.

This topic only covers commonly used column attributes.

To edit column 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 and expand the Columns node.
   The columns appear in the Rendering tab.
3. Select a column to edit.
   The Property Editor displays the attributes for that column. 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 a group.
4. Edit the appropriate attributes.

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

5. Identification, Type - Select the relevant column display type to define how column values display.
6. Heading - Available attributes include:
   1. Heading - Enter the report column heading text.
   2. Alternative Label - Enter the alternative label to use in dialogs and in various column heading placements. Use an alternative label when the heading contains extra formatting, such as HTML tags, which do not display properly.
   3. Alignment - Select the heading alignment. Note that your alignment selection must be supported by the selected report template. Available options include:
      • start
      • center
      • end
7. Single Row View, Use Column Heading - Enable this switch to use the column heading text as the label in the Detail View.
8. List of Values, List of Values - Select the name of an existing list of values.
9. Layout - Layout attributes include:
   1. Sequence - Enter the display sequence for this item. The sequence and other layout settings determine where this item displays in relation to other items within the region.
   2. Column Alignment - Select the column display alignment. Note that your alignment selection must be supported by the selected report template. Available options include:
      • start
      • center
      • end
   3. Group - Select the group for this column. Groups are used to display columns in logical groups in the Single Row View.
10. Accessibility, Value Identifies Row - Define the column value, or combination of column values that help to identify the row of data. For example, for person data this could be the first and last name. For customer data, this could be the customer name.
    To learn more about accessibility best practices, select the attribute in the Property Editor and click the Help tab in the central pane.
11. Appearance, Classes - Enter CSS classes to apply to each cell in this column. You may add multiple classes by separating them with spaces. For example:

    u-bold u-color-13

12. Enable Users To - Control how users can manipulate a column. For each attribute select On or Off.

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

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

8.9.7.2 Creating a Column Link in an Interactive Report

Configure Column Attributes to create a link from a report to another page in your application or to a URL

To create a column link to another page:

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 and expand the Columns node.
   The columns appear in the Rendering tab.
3. Select a column to edit.
   The Property Editor displays the attributes for that column. Attributes are organized in groups.
4. Identification, Type - Select Link
5. Find Link and click No Link Defined.
   The Link Builder - Target dialog appears.
6. To create a link to another page, in the Link Builder - Target dialog:
   1. Type - Select Page in this Application.
   2. Page - Specify the target page number.
   3. Set Items - Select a Name and Value to specify session state for an item.
   4. Clear/Reset, Clear Cache - Specify the page numbers on which to clear cache. To specify multiple page, enter a comma-delimited list of page numbers.
   5. Clear/Reset, Action - Select one of the following:

      • None - No clear or reset action when page loads.

      • Clear Regions - Clears all region settings on the page.

      • Reset Regions - Resets all regions on the page back to the default state, including sort orders, hidden columns and so on.

      • Reset Pagination - This option enables backwards compatibility.

   6. Advanced, Request - Specify the request to be used.
   7. Click OK.
7. To create a link to a URL, in the Link Builder - Target dialog:
   1. Type - Select URL.
   2. URL - Enter the URL address.
   3. Click OK.
8. To save your changes click Save. To save and run the page, click Save and Run Page.

8.9.7.3 Defining a Column as a List of Values in an Interactive Report

Add a list of values in an interactive report to improve the speed of built-in filter tools.

To define a report column as a 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. In the Rendering tab, locate the region containing the report.
3. In the Rendering tab, locate the region and expand the Columns node.
   The columns appear in the Rendering tab.
4. Select a column to edit.
5. Configure Column Filter:
   1. Find Column Filter.
   2. For Type, select how to derive the filters provided in the report column drop down list. Options include:

      • None - No column filter is provided for this report.

      • Default Based on Column Type - STRING and NUMBER columns derive the list of values from distinct column values. DATE columns derive the list of values from predefined date ranges.

      • Use Defined List of Values to Filter Exact Match - Derive the list of values from a defined list of values SQL query to create an equal filter.

      • Use Defined List of Values to Filter Word Contains - Derive the list of values from a defined list of values SQL query to create a contains filter.

      • Use Named List of Values to Filter Exact Match - Derive the list of values from the named list of values to create an equal filter.

      • Use Named List of Values to Filter Word Contains - Derive the list of values from the named list of values to create a contains filter.

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

8.9.7.4 Enabling Single or Multiple Row Selection

Enable single or multiple row selection and optionally display a row selector control.

Single or multiple row selections can be useful to facilitate bulk updates or other operations on the selected rows. You can create dynamic actions or server processes that act on the current selection. The primary keys of the selected rows can be made available in a designated page item by specifying it in the Current Selection Page Item attribute.

Tip:

The single or multiple row selections can be copied to the clipboard with standard keyboard shortcuts. On Windows: Ctrl+ C. On Mac: Command+C.

Tip:

The selection can also be accessed with the interactiveReportRegion JavaScript API.

The following example shows how to create row selector on a column in an interactive report built on EBA_PROJECT_TASKS table. The EBA_PROJECT_TASKS table is available in the Project Data sample dataset.

To enable single or multiple row selection in an interactive 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.
2. In the Rendering tab, locate the region containing the report and expand the Columns node.
3. Select the column to be configured as a Row Selector.

   The column Attributes display in the Rendering tab. In the Property Editor, edit the Column attributes:

4. Identification, Type - Select Row Selector.
5. Row Selection - Configure the following attributes:
   1. Row Selection, Enable Multi Select - Enables the selection of multiple rows. Turn on Enable Multi Select.
   2. Row Selection, Show Select All - If enabled, a Select All option displays in the column header and users can select all rows using Ctrl + A. If disabled, the Select All rows option does not display in the using a checkbox in the column header.
   3. Row Selection, Hide Control - Enabling this attribute, hides the checkbox or radio-control displayed on each row.
   4. Row Selection, Current Selection Page Item - Enter a page item used to store the selection state. This attribute holds information about all selected records and their primary key values and stores these values as a string separated by colons.

      In the following example, the PROJECT_ID column is selected and the following attributes are enabled: Enable Multi Select and Show Select All.

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

   If you run the page, the interactive report page displays with the check box displaying in the PROJECT_ID column. Note that a Select All check box also appears in the column header.

8.9.7.5 Formatting Columns in an Interactive Report

Customize column display with HTML expressions.

To define column formatting:

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 and expand the Columns node.
   The columns appear in the Rendering tab.
3. Select a column to edit.
4. Column Formatting, HTML Expression - Enter HTML expressions to be shown in this column. Use #COLUMN# syntax to show column values in HTML.

   • Example 1: Change the background and text colors

     <span style="background-color: yellow; color: red;">#EMPLOYEE_STATUS#</span>

   • Example 2: Use Heading 2

     <h2>#EMPLOYEE_NAME#</h2>

   • Example 3: Use a dynamic class from the SQL query

     <span class="#COLUMN_CLASS#">#EMPLOYEE_STATUS#</span>

     The #COLUMN_CLASS# and #EMPLOYEE_STATUS# substitutions in this example are columns selected in the report SQL query.

   • Example 4: Show an image, and a tooltip on hover

     <img src="#IMAGE_NAME#" alt="#EMPLOYEE_NAME#" title="#EMPLOYEE_NAME#">

   The next two examples demonstrate the use of template directives. To learn more, see Using Template Directives.

   • Example 5: Loop over a comma separated list of values

     <ul>{loop "," TAGS/}<li>&APEX$ITEM.</li>{endloop/}</ul>

   • Example 6: Use an "if" directive for a column with a quoted identifier

     {if Mixed Case Name/}<strong>#"Mixed Case Name"#</strong>{endif/}

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

8.9.7.6 About Filtering on Conditional Links in Interactive Report Columns

Learn about about filtering on conditional links in interactive report columns.

If an interactive report has a column value that is a link and the link markup is constructed in the report query, attempting to define a filter on this value from the column header menu fails. Oracle APEX is not be able to render the link correctly in the column header menu because the column values are themselves rendered as links, such that they can be selected to apply the filter. If the developer wanted to conditionally render the link based on query logic, the link may have been defined in the report query as opposed to using the declarative column link support.

For filtering to work on conditional links in columns, developers have two options:

• Option 1: Use an HTML Expression column:
  1. Add another column to your query that selects the equivalent of the link text from the link and define a column alias of my_link_display. This column alias will be the value used in the column header menu.
  2. Change the my_link column to be of type Hidden.
  3. In the my_link_display column, set the column heading to be the same as the my_link column and set HTML Expression to be #MY_LINK#. Keep the default Escape Special Characters as Yes.

  4. Run the page.

     If needed, reorder the columns so that the new column in the same position as the old one. Select the Actions menu and then Select Columns.

  5. Save a new default report. Select the Actions menu, Save Report, and then Save as Default Report Settings.

  The link still renders fine in the report and the column header menu now renders just the my_link_display value which sets the filter correctly.

• Option 2: Use a custom Column Filter for the link column, where you could query for the link text.

See Also:

Editing Common Interactive Report Column Attributes