First Steps Guide. Version Last updated: April 2021

(1)

First Steps

Guide

(2)

This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or de-compilation of this software, unless required by law for interoperability, is prohibited.

(3)

Getting Started

Introduction

This document is designed to show you how to quickly get started using FOEX and create your ﬁrst FOEX application.

It does not go into any detailed explanation about the plugins or features available in the FOEX Plugin Framework. Please see the documentation

application for more complex examples of using FOEX plugins and submit any questions on our support forum.

Prerequisites

This document is based on the assumption that on the Oracle APEX instance you intend to test, the FOEX Plugin Framework is already installed and together with the demo applications.

If that is not the case, please refer to the FOEX Plugins Installation Guide, which is part of the FOEX Software Package.

Alternatively, to evaluate FOEX online visit http://www.foex.at and sign up for a free trial that will have everything you need to complete this guide.

For developing FOEX applications a current version of either the Firefox or Google Chrome browser is required.

(5)

Step 1: Installing the FDA

The FOEX Developer Addon (FDA) is a browser extension for Firefox or Google Chrome that improves the usability of handling FOEX components in the Oracle APEX Application Builder.

Install the FDA on Firefox

1. Download this ﬁle http://foex.at/c/DeveloperAddon/latest/fda_ﬁrefox.xpi and save it to your computer

2. Start Firefox

3. Log in to your APEX workspace, open the Application Builder and edit a FOEX application

4. Take the fda_ﬁrefox.xpi ﬁle and drag it onto the Application Builder 5. When the browser asks if you want to install this addon, press install

6. When refreshing the page you should see the FOEX Developer Addon toolbar at the bottom of the Application Builder page.

Install the FDA on Google Chrome

Visit the Google Chrome Webstoreand install the FDA extension from there. If this link doesn’t work for you, then follow these steps:

1. Open Google Chrome

2. Go to the Extensions page (Window - Extensions)

3. Click the “Get more extensions” link in the bottom left corner, which will open the Chrome Webstore in a new tab

(6)

FDA installation veriﬁcation

After a successful install of the FDA you should see the blue FOEX logo at the top right corner of the APEX 5 application builder page.

Notice that you are inside an application. If you don’t, please log an entry on forum.foex.at.

(7)

Step 2: Creating a FOEX application

To start creating a new FOEX application we strongly recommend that you copy the FOEX Template App.

To be fully functional, FOEX applications require certain objects like: plugins, application items, templates, application processes, pages etc. The template application contains all these things already, so this is easiest way to get started.

Important notes:

1. The default Page template of the template application is “FOEX Page”. It is designed speciﬁcally for pages which have the FOEX Viewport or FOEX Desktop plugins deﬁned on them.

If you do not deﬁne a FOEX Viewport or Desktop plugin on the page please change your page template to a standard APEX page template e.g. “No Tabs – Left Sidebar”.

Using the “FOEX Page” template for regular APEX pages (without FOEX Viewport) will result in a long FOEX loading icon and then a blank page.

2. The FOEX Viewport, FOEX Desktop and FOEX Window plugins are always the top level region i.e they never have a parent region deﬁned. All other plugins when used on a page are deﬁned as children of the above plugins.

(8)

Ensure the sample application is installed

Note: We will use tables in this guide which are installed by the sample database

application. You can skip this step if you have signed up for a trial on our website as we pre-install the Sample Database Applications supporting objects which are required for this guide.

1. Log in to your workspace 2. Open the Application Builder

(9)

Then select Packaged Application and click Next.

(10)

(11)

(12)

Copy the FOEX Template Application

Your workspace should contain the Sample Database Application, FOEX Documentation application and the FOEX Template App as seen below:

1. Click on the FOEX Template App

2. From the Tasks bar on the right, choose Copy this Application

(13)

5. Now, you have a new application with everything you need to start using the FOEX Plugin Framework.

(14)

The Template App provides basic components to speed up the development process.

For your future applications you can use this as it is or build your own Template App with your own Layout Style.

In the following examples we are satisﬁed with the provided layout and use it without any changes.

(15)

Step 3: Creating your ﬁrst FOEX page

After setting up the FOEX application, you are now ready to create your ﬁrst FOEX page containing a Viewport and Panes.

1. Open the Application Builder

2. Open the application you created in the previous step 3. Click the Create FOEX Page button

Note: If you can’t see this button, then the FOEX Developer Addon is not installed correctly. Please ensure that it is activated / enabled in your browser’s addons / extensions section.

4. A modal window will appear where you can enter the Page ID, Title and choose which panes your page should contain e.g. (North, South, East, West).

(16)

(17)

Step 4: Adding a Grid to a FOEX page

Now that your ﬁrst FOEX page has been created, you can use the FOEX Developer Addon to quickly create your ﬁrst Grid component.

1. Open your newly created page, e.g. My First FOEX Page, in the APEX Page Designer.

Right click on the Center Pane region and select Create FOEX Sub

Region from the context menu.

Note: If you can’t see this menu item, then the FOEX Developer Addon is not installed correctly

(18)

4. Check the Allowed Operations are Read Only 5. Enter DEMO_CUSTOMERS into Table/View Name

(19)

grid plugin region with a child report region):

Note: The report is set to Never since FOEX only uses the meta data of this region for the grid plugin.

(20)

Step 5: Adding a Form to a FOEX page

1. Create a new FOEX page in the APEX Page Designer like we did in Step3.

Page Id 3

Page Title My First FOEX Form

2. Right click on the Center Pane region and select Create FOEX Sub

3. In the Create FOEX Region:

a) Enter the Region Title (e.g Form Example)

b) Check that the Parent Region is set to a child region of a pane (e.g. in this example we’ll select the Center Pane)

c) Select the Form icon

3. Accept DML (Table/View) as the default form type

4. Enter the table name (e.g. DEMO_CUSTOMERS ). Once you enter a valid table name, a list of columns, that can be included, will be displayed. 5. By default the Primary Key Item will be chosen for you and is the name of

(21)

6. Check / Uncheck the desired actions and columns which you want to include. Click the Create button.

(22)

9. Find the Order By attribute and add CUST_LAST_NAME to order the form by the customer’s last name and automatically add navigation buttons to the form.

10. Find and select the Attributes node for the Form Example – Field Container region and set Default Label Width to 200

(23)

ﬁrst record.

(24)

Step 6: Adding a Tree Grid to a FOEX page

1. Create a new FOEX page in the APEX Page Designer like we did in Step3.

Page Id 4

Page Title My First FOEX Tree Grid

Right click on the Center Pane region and select Create FOEX Sub

2. In the Create FOEX Region:

a) Enter the Region Title (e.g Tree Grid Example)

b) Check that the Parent Region is set to a child region of a pane (e.g. in this example we’ll select the Center Pane)

(25)

SELECT REGION_ID AS ID , PARENT_REGION_ID AS PID , REGION_NAME AS TEXT , NULL AS URL

, DISPLAY_SEQUENCE AS DISPLAY_SEQ , 'fa fa-bars' AS CSS_CLASS , NULL AS INFO , NULL AS CUSTOM , DISPLAY_SEQUENCE AS DISPLAY_SEQUENCE , ITEMS AS ITEM_COUNT , BUTTONS AS BUTTON_COUNT , SOURCE_TYPE AS SOURCE_TYPE FROM APEX_APPLICATION_PAGE_REGIONS r

WHERE APPLICATION_ID = :APP_ID

(26)

(27)

Step 7: Integrate the pages into Page 1

Page 1 is provided by the FOEX Template App, so we only have to integrate all previous created pages.

1. Open Shared Components

2. Click on Lists (Navigation)

3. Click on Navigation Menu

(28)

a. Enter the List Entry Label

b. Tick on FOEX Navigation radio button to show the FOEX settings for a navigation region.

c. Enter a suitable Tooltip d. Select a suitable Icon

e. Enter the Page number that should be connected with the list entry

Sequence List Entry Label Page

30 Grid Example 2

40 Form Example 3

(29)

(30)

As you can see, there is a second tab shown (marked in red). This is caused by the Center Pane’s default Layout setting in pages 2, 3 and 4. 8. Change the Layout of the Center Pane to Only 1 Child Region (ﬁt)

because we have only one FOEX Region per page.

(31)

The text in the Tab (List Item Name) and the Header of the Grid (Region Name of the Grid) is the same. To save space we can omit the Region Header.

10. Open an Example Page (2, 3, or 4) in the App Builder, 10.1. Click on Attributes of the FOEX Example Region 10.2. Click on FOEX Conﬁg

(32)

We hope this guide helped you gain a good understanding of how you can get started with the FOEX Plugin Framework and how quick and easy it can be to create pages and regions.

For more details and examples on using FOEX plugins see the 2-days Developer Guide and the Documentation Application and edit the demo pages to get a better understanding on how to use them.