JDeveloper: Task Flow with optional Parameters

In one of my current projects, I came across a wired problem concerning a task flow which uses parameters to configure the flow. To make it simple to understand the problem I made up a fictive use case.

Use Case

This is not a real use case, but an abbreviation of it just to show the problem and how to resolve it. It might not make sense in real life, but it allows to show the problem.

We like to see a form to enter some data. One of the fields the user can enter should be used to select a specific layout of the following pages. Ony Layout should be horizontal and one should be vertical.

The layout should allow showing a title with a number, a text part, and a footer part. Each of the parts is optional, only the layout must be specified.

The flow can be used at different points in different flows in the application.

Implementation

The implementation is easy. We build a task flow, build with pages, and add 5 parameters to it. This task flow looks like this:

In a router component, we check the required parameter to decide which layout to use. The ‘none’ page is used if the parameter is not ‘v’ or ‘h’.

For the layout pages, which implement the layout part, I used a af:panelGridLayout with the right number of rows and columns. Here is the vertical.jsf page

Or the source view

The other pages can be found in the sample which was built using JDeveloper 12.2.1.3. You can download the sample using the link at the end of the blog.

Now that we have the reusable task flow we need another task flow (adfc-config.xml in this case) to show how to use the use of the task flow.

We see an index page which calls the task flow using three different navigations (toPageNoParam, toPageAllParam and toPageTextOnly). The difference between the navigations are the parameters set to the task flows.

Here they are

Running the application we get the following output after filling in the form on the index page

WAIT, this doesn’t look right. The page with text only parameters displays the text in the footer section instead of the text section. If we look at the parameters defined for this task flow call we see

Yes, we added the value to the wrong parameter, ‘footer’ instead of ‘text’!

Easy change, we copy move it over to the ‘text’ parameter using copy and paste:

And we get

Great, this looks like it should be.

Problem(s)

WAIT again, in the log window we now get an error message

<oracle.adf.model> <ValueMappingXmlImpl> <parse> 
   <ADFc: /WEB-INF/adfc-config.xml: Failed to parse element input-parameter: null value found for value.>

Why’s that?

If you look closely at the parameters, you’ll notice, that the ‘footer’ value is empty, whereas the other not set values showing a ‘-’. So we add the ‘-’ to the footer parameter:

To get this output running the app:

The error message in the log window is gone 🙂

Hm, but now we see the ‘-’ for the footer value. The value for the ‘title’ parameter looks identical to the parameter ‘footer’. However, we don’t see the ‘-’ for the ‘title’ in GUI.

Solution

Looking at the XML of the task flow call shows:

Now the problem is, that JDeveloper shows a ‘-’ for a parameter which is not set in the XML representation, meaning that the parameter is not in the XML structure at all!

The ‘-’ we typed into the ‘footer’ parameter is visible as value for the parameter and thus it printed when running the application.

The final solution is to remove the ‘footer’ parameter from the XML structure:

This will get us the following display in JDeveloper

The resulting running page now looks like

And we don’t see the error message in the log.

Sample Download

You can download the final application from GitHub BlogTaskFlowParameter. The sample was built using JDeveloper 12.2.1.3.0 and doesn’t need a DB connection.

Advertisements

Adding missing extensions to JDeveloper 12.2.1.3

The current version of JDeveloper 12.2.1.3 is missing some extensions which are popular in the older version of JDeveloper. One of them, which is asked for a couple of times, is the MAF extension. Other extensions like ‘BI ADF ViewRegions’ are missing too.

Here are the images from the update page of JDeveloper 12.2.1.3

As you see, there is no ‘Mobile Extension’.

In general, you have two options to get the missing extensions installed:

  1. Download the extension from the ‘Extension Exchange’ and install it from a local file
  2. Add the ‘Extension Exchange’ to the known sources of extensions and load the extension right from JDeveloper

Personally, I prefer the second way as it only shows the extensions available for your version of JDeveloper. You can only install extensions which are configured for your version anyway.

Extension Exchange on the WWW

You’ll find all extensions available for all version of JDeveloper on the public ‘Extension Exchange’ at

http://www.oracle.com/technetwork/developer-tools/jdev/index-099997.html

From there you can download an extension and install it in JDeveloper from the local file. When you download an extension make sure to load the right version as you can only install extensions which are configured for your version (check the min and max version of the extension!).

Once you have an extension downloaded you can install it from this local file. As a sample show images how to install a MAF extension from a local file. As a sample, we’ll use JDeveloper 12.2.1.3.

Download the extension to your local file system and remember the folder you saved the file to. In JDeveloper go to menu ‘Help’->’Check for Updates’. Select ‘Install From Local File’ and search the file downloaded

Click finish and the extension gets installed.

If you try to install an extension which is not compatible to your JDeveloper version you get

So make sure you download the right version of an extension you like to install.

URL to add the ‘Extension Exchange’

To avoid the hassle of selecting the right version, let JDeveloper do this work for you. We simply add the URL of the ‘Extension Exchange’ to the ‘Update Centers’ and JDeveloper will search for extensions compatible to your JDeveloper version.

The URL we have to add is:

http://www.oracle.com/webfolder/technetwork/jdeveloper/downloads/1213center.xml

Open ‘Help’->’Check for Updates’ again and click the ‘Add’ button

Enter a name for the URL and the URL itself and click OK. Now, after clicking ‘Next’ you’ll get

and can select the ‘MAF Extension’ or any other missing extension right from the dialog. The installation is identical to the one shown in the ‘Extension Exchange on the WWW’ section.

Query and Filter an af:listView

Most of the time we use tables to show tabular data to users. However, JDev and ADF allow for other components like the af:listView to be used to show such data to the user in a more modern way.

The image above shows the normal display of data when an af:query is used together with a table to show the result.

A more fancy, modern look we get if we use a af:listView to show the results as this allows us to style the data

Use case 1

We like to use an af:query to search for employees and show the result in a styled af:listView.

Implementation 1

This is pretty easy as we only have to use an af:listView as the result component of the af:query

And to exchange the af:table with an af:listView. Or you build the page by first dropping an af:query onto the page (without table) and then add the af:listView

Then you get the wizard to layout the list

This will give you a basic layout which can be styles in JDev as

The final result is

which looks more modern. One thing the af:table give you out of the box is the second use case.

User Case 2

We like the af:listView to be able to be filter the result like the af:table can.

Implementation of second use case

Easy you think? Well, the af:listView component doesn’t provide any filter out of the box. There isn’t even a filterModel like there is for an af:table.

So, how do we get this implemented. The idea is to use a af:table component but only use the filter provided by the af:table. The remaining parts like table data, possible scroll bars and status bar or scrollbars we remove.

We start by dragging the EmployeesView1 from the data control onto the page again.

And drop it after the closing af:panelHeader and before the af:listView as ‘ADF Table’

In the image you see that I have removed some available columns. Before we go to hide the part of the table we don’t need, we make the table work together with the af:query and the af:listView. When we use the af:query the table shows the right detail (auto PPR triggers the refresh of the table). However, if you have queried for the ‘Purchasing’ department and then enter an ‘s’ into the ‘First Name’ filter field of the table and hit enter, you get

As you see, the table shows the right result (2 rows) but the listView still shows all employees of the Purchasing department.

To make it work, we need to add a partialTrigger to the listView which points to the table. This way each time the table changes the listView will too.

Save all changes and refresh the page. Now if you enter a value into a filter field and hit enter, the listView will update too.

After the page works we have to get rid of the data below the header of the table. This is easy to accomplish by styling the table. We only need the filter field and the header below the filter fields so that we know which field filters which data. Simply set the maxHeight of the table to the exact height of the the two components. You can use your browser’s developer tools (F12) to measure the height. In my sample it’s 65px. So, setting the tables inlinestyle to

max-height: 65px;

will hide everything below the filter and the header

If you like you can create a skin and create a style class and use this style class instead of setting the max-height directly to the inlineStyle of the table. A nice addon is that the table header sorting is working too for the listView.

You can download the sample from gitHub BlogFilterListView. The sample is build using JDev 12.2.1.3 and uses the HR DB schema. The principle can be used in other JDev versions too.