OraCoolAPEX | Blog About Oracle Application Express (APEX): February 2018

If you are not familiar with the HELP function in the APEX_APPLICATION package, I'd recommend you first read about it in the APEX API Reference Documentation. The Example section provides the steps on how to implement this function in your application to display help information.

I tend to use this function in my projects since I like the idea of creating a reusable page to display help across the entire application. Unfortunately, it is limited to Page and Item(s) Help Text and, I find the parameters to customize the HTML output hard to work with.

I recently started working on a new project an decided to try a different approach. Instead of using the APEX_APPLICATION.HELP function, I'm querying the APEX Views to retrieve the metadata and using a Hero Region to display the page information and a Media List to display the items information.

I created a sample form using all the different item types and help text defined in the "Available Item Types" section on the APEX App Builder User's Guide to illustrate how the list looks like for each type of item:

As you can see, I'm using the same Page Designer icons to differentiate the Item Types, which provides additional visual information:

In case you are interested in doing something similar in your applications, below are the steps to accomplish this. Please let me know in the comments if you have any suggestions or feedback. And, as always, you can access my APEX Demo Application (Username/Password = Demo/Demo). Once you are in the Available Item Types page, click on "Help" on the upper right corner on the Navigation Bar List.

Finally, these are the steps (it assumes the Help page will be number 10):

Create the Navigation Bar List entry with the Help link:

Go to Shared Components
Under Navigation, go to Navigation Bar List
Select the existing list, Desktop Navigation Bar
Click the Create Entry button
List Entry Label: Help
Page: 10
Set these items: P10_PAGE_ID
With these values: &APP_PAGE_ID.

Create the dynamic Help list that queries the APEX view:

Go to Shared Components
Under Navigation, go to Lists
Click the Create button
Create List: From Scratch, Next
Name: Help List
Type: Dynamic, Next

SQL Query:

	select
	1 lvl,
	label label,
	'#' target,
	null is_current_list_entry,
	'a-Icon icon-item-' \|\| case
	when display_as_code like 'NATIVE%' then replace(lower(display_as_code),'_','-')
	else 'plugin'
	end image,
	null image_attribute,
	null image_alt_attribute,
	'<div style="color: #737373; font-size: 1.4rem; line-height: 2.0rem;">' \|\| item_help_text \|\| '</div>' attribute1,
	'Required: <b>' \|\| is_required \|\| '</b>' attribute2
	from
	apex_application_page_items
	where
	application_id = to_number(:APP_ID) and
	page_id = to_number(:P10_PAGE_ID) and
	item_help_text is not null and
	display_as != 'Hidden'
	order by
	region_id,
	display_sequence

view raw page_10_help_list_query.sql hosted with ❤ by GitHub

Click the Create button

Create the modal Help page:

Go to the App Builder section in your application
Click on Create Page
Select a Page Type: Blank Page, Next
Page Number: 10
Name: Help
Page Mode: Modal Dialog, Next
Accept the defaults, then Finish

Adjust the Help page properties:

Width: 800 (I found by not specifying a width, the report was overlapping the modal dialog window instead of wrapping the content.)
Under the CSS section, specify the File URLs: #IMAGE_PREFIX#apex_ui/css/core/IconFont.css?v=#APP_VERSION# (This IconFont.css is where the item types icons are defined.)