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:

• Inspecting Oracle APEX Packaged Applications (Part 1)
• Inspecting Oracle APEX Packaged Applications (Part 2)

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: