Monday, February 26, 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:

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

Wednesday, November 22, 2017

I recently created my first set of APEX item plug-ins based on two jQuery plugins created by Felice Gattuso (DateDropper and TimeDropper).

The plug-ins work well on both desktop and mobile and support multiple languages. I included a set of themes to match the color palette of the current APEX 5.1 themes such as Vita, Vita-Dark, Vita-Slate, and Vita-Red.

To download them, you could either go to apex.world or clone them from my GitHub repositories (DateDropper and TimeDropper), where you can also review the documentation with all the available options.

This is a first release and there is still a lot of room for improvements (e.g. they currently do not work on Interactive Grid). Please feel free to report any issues you may find or contribute to the projects on GitHub.

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.

In this part we are going to implement a classic report using the cards template with a faceted search left side bar. In case you are wondering what a "faceted search" is, here is the definition according to Wikipedia:

Faceted search, also called faceted navigation or faceted browsing, is a technique for accessing information organized according to a faceted classification system, allowing users to explore a collection of information by applying multiple filters. A faceted classification system classifies each information element along multiple explicit dimensions, called facets, enabling the classifications to be accessed and ordered in multiple ways rather than in a single, pre-determined, taxonomic order.

Wednesday, May 24, 2017

Oracle Application Express (APEX) provides a set of built-in Packaged Applications that you can install and use in your environment. There are two types of packaged applications: (1) Sample Applications that highlight certain APEX capabilities such as Charts, Dynamic Actions, and so on; and, (2) Productivity Applications that are fully supported by Oracle as long as you don't unlock them.

With every new release, the APEX Team put a lot of effort upgrading these applications to take advantage of new features introduced on that release. For that reason, every time Oracle releases a new APEX version, I like to spend some time exploring some of these built-in Packaged Applications looking for design and functional ideas that I can use in my own projects. Once I find something I like, it's very simple to inspect how they've done it (if it's one of the Productivity applications, it must be unlocked first before you can inspect it on the Page Designer).

For this article, I'll show the step-by-step on how to implement one design and functionality that caught my attention in the latest APEX 5.1, located on the Customer Tracker application, Page 59 - Customers.

Whether possible, I tried to use declarative methods, e.g. Dynamic Actions instead of writing pure JavaScript code, this way I keep things as simple as possible. This is the print screen of the page I'm referring to:

It has three features that I liked and I will explain each of them on separate posts due to the length of this implementation:

Fixed Page Title with Icon and a Description.

A Classic Report with Cards Template and a Faceted Search Left Side Bar.

I setup a demo application with the final results, login using the credentials Demo/Demo. You can also go there and copy the script to generate the sample database objects and data If you want to follow along this demo.

Let's start with the fixed page title with icon and a description.

On your Application, create a new page:

Select a Page Type: Blank Page

Page Number: 4

Name: Movies

Breadcrumb: - don't use breadcrumbs on page -

On Page 4, create a new region:

Title: Movies Report

Text: Track and Manage Movies

Position: Breadcrumb Bar

Template: Hero

Icon CSS Classes: fa-film

Region Display Selector: No

Optionally, you could use one of the images located on the following directory inside the APEX installation folder: apex\images\apex_ui\img\icons_src\pkg-apps, e.g.

Icon CSS Classes: app-script-planner

For this to work, you'll have to go to your application's Shared Components, User Interface Attributes. Select the Desktop interface, under Cascading Style Sheets add the following File URL:#IMAGE_PREFIX#pkgapp_ui/css/5.0#MIN#.css

That's it for this part. On the second part with are going to create a classic report using the cards template with a faceted search left side bar.