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.
- you should have an active FOEX free trial account (if you don’t, use this link to register for a FOEX free trial). To log in to your trial workspace click here;
- you should have the FOEX Developer Addon installed on either Google Chrome or Firefox.
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:
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)
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.
Go ahead and create a new FOEX page!
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.
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.
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
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)
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).
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.
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]).
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:
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.