Friday, May 26, 2017

Inspecting Oracle APEX Packaged Applications (Part 3)

This is the third and last part of a series of blog post. You can access the first and second parts here:

In this last part we are going to create a "Display As" pill button with two options using a List of Values with a custom template to switch between the Cards View created on the previous article and a new Interactive Report.
  1. Create a button under the new Movies Report region:
      • Button Name: ADD_MOVIE
      • Label: Add Movie
      • Button Position: Next
      • Hot: Yes
      • Under Template Options:
      • Spacing Left: Large
      • Action: Redirect to URL
      • URL: #0
  2. Go to Shared Components, List of Values:
      • Click on Create
      • Create List of Values: From Scratch
      • Name: DISPLAY_AS_LOV
      • Type: Static
      • Display Value #1: Cards View
      • Return Value #1: CARDS
      • Display Value #2: Report View
      • Return Value #2: REPORT
      • Create List of Values
  3. Edit the DISPLAY_AS_LOV list of values:
      • Edit the Cards View Display and add the following Template: <span class="t-Icon fa fa-cards" title="#DISPLAY_VALUE#"></span><span class="u-VisuallyHidden">#DISPLAY_VALUE#</span>
      • Edit the Report View and add the following Template: <span class="t-Icon fa fa-table" title="#DISPLAY_VALUE#"></span><span class="u-VisuallyHidden">#DISPLAY_VALUE#</span>
  4. Back on Page 4, create a sub region under the Movies Report region:
      • Title: Display As
      • Template: Blank with attributes
  5. Create a page item under the Display As sub region:
      • Name: P4_DISPLAY_AS
      • Type: Radio Group
      • Number of Columns: 2
      • Template: Hidden
      • Under Template Options:
        • Size: Large
        • Radio Group Display: Display as Pill Button
      • List of Values Type: Shared Component
      • List of Values: DISPLAY_AS_LOV
      • Display Extra Values: No
      • Display Null Value: No
      • Default Type: Static value
      • Static Value: CARDS
      • Escape special characters: No
  6. Create a new region:
      • Name: Report
      • Type: Interactive Report
      • SQL Query:
      • Page Items to Submit: P4_DISPLAY_AS
      • Under Template Options:
      • General: Show Maximize Button
      • Static ID: reportRegion
      • Custom Attributes: style="display: none;"
      • Region Display Selector: No
  7. Create a Dynamic Action:
      • Name: Toggle Display As
      • Event: Change
      • Selection Type: Item(s)
      • Item(s): P4_DISPLAY_AS
      • True Action #1:
        • Action: Execute JavaScript
        • Code:

That's it. Below are two print screens of the final result:

No comments:

Post a Comment