How to set up a Grid to Grid master detail in FOEX

How to set up a Grid to Grid master detail in FOEX is part of the FOEX beginner tutorials series – an introduction guide for developers with no or limited experience in building apps using Oracle APEX and the FOEX Plugin Framework.

 

Prerequisites:

 

The end result will be a screen that displays two vertically stacked grids with the top one (an editable grid) showing a list of customers and their contact details and the bottom one (a read-only grid) displaying customer orders.

Here’s how it will look like:

 

FOEX Grid to Grid master detail

 

 

Step 1: Copy the FOEX Template Application

The first thing that we’ll do after logging in to our trial workspace is to make a copy of the FOEX Template Application – Theme 42. We’ll rename the new app as My First FOEX App and assign it a new application ID (in this case: 112233)

Grid to Grid master detail - step 1

 

Step 2: Create a new page in your application

If you have the FDA (FOEX Developer Addon) installed you’ll notice the new Create FOEX Page button that is now visible within the App Builder.

Grid to Grid master detail - step 2

Go ahead and create a new FOEX page!

Grid to Grid master detail - step 2.1

 

Step 3: Create the Customers region

You’ll notice that the new page you just created has a Viewport and Center Pane region set up by default. Select the Center Pane, then use right click to select Create FOEX Sub Region.

Our first grid will display customer info, so let’s name it Customers and select Grid as the component that we’ll use.

Grid to Grid master detail - step 3.1

Since we want to edit the customer data we’ll change the Allowed Operations field to Create, Update, Delete , instead of Read Only.

In the Table/View Name field add: DEMO_CUSTOMERS . As you click out of that field, you’ll notice that the Primary Key Item and the Select Statement get automatically filled in for you (pretty neat, right?).

Now click Create and your editable grid is all set up.

Grid to Grid master detail - step 3.2

Note: By default this editable grid is set to Row Editing mode. FOEX provides you with the option to switch to a cell editing mode in your grid, should that suit your users better.

To make this change:

  • In the App Builder from the left side panel select Attributes, under the Customers region;
  • from the right side panel, under Settings, find the Edit Mode field and change it to Cell Editing

 

 

Step 4: Create the Orders region

To set up your Orders grid simply repeat the process from step 3 (select the Center Pane, then right click and select Create FOEX Sub Region) and make the following changes:

  • The name of your region should be: Orders
  • Leave the Allowed Operation field set on Read Only
  • For the Table/View Name use: DEMO_ORDERS

Grid to Grid master detail - step 3.3

 

Step 5: Stack your regions vertically

At the start of this article we mentioned that we’d like to stack the two grids vertically, therefore we need to change the Layout settings for our Center Pane.

Note: If you run the page at this point your Customers and Orders grids will get displayed in separate tabs (as seen below)

Grid to Grid master detail tab view

 

To get them displayed on top of each other select the Attributes section for the Center Pane and change the Layout field to Vertically Stack Regions (vbox).

 

Grid to Grid master detail vbox

 

 

Step 6: Setting up the Grid to Grid master detail

Up until now we just created two regions Customers and Orders – but there is not connection set between them. Our Orders grid displays all records, independent of which customer is selected in the Customers region.

Let’s change that and make sure that when we click on a row in the Customers grid, our Orders grid displays only the information associated with that particular record. To achieve this we will create a Master-Detail relation between our Customers and Orders regions.

In the App Builder right click on the Customers region and select Create Master-Detail Relation. 

 

Note: In a regular APEX development environment, where the FOEX Plugin Framework is not installed, this Master-Detail wizard is not be available.

 

Grid to Grid master detail FDA wizard

We have now created a new dynamic action, named by default Customers – Master Detail Relation. All we have to do now is to go on the right side of the screen and find the Affected Elements section, where we’ll set the Region field to Orders (FOEX Grid [Plug-In]).

 

Grid to Grid master detail wizard 2

 

Because we also want to make a distinction between these two regions, let’s change the UI settings for the Customers grid.

To do this:

  • select Attributes under the Customers region;
  • on your right side panel, scroll down and click the FOEX Config button;
  • change the UI field value from None to Success;
  • click Ok and run the page

 

Your end result should now look like this:

 

Grid to Grid master detail

 

 

Congratulations!

You now have a functional grid to grid master detail relation between Customers and Orders!

Try selecting some of the records in the Customers region and see how your selection influences the results that get displayed in the Orders region.

 

Although this is a fairly simple example, it serves as a good reference point from which you can start exploring the development flexibility and additional functionality that the FOEX Plugin Framework brings to Oracle APEX.

There are many more types of master detail relations that you can set up by using FOEX components and we’ll explore them in future articles.

Add your comment

Your email address will not be published. Required fields are marked *