@FOEXpluginsLast updated: February 2020

First Steps GuideVersion 4.2.0

foex.at of 2 3

FOEX First Steps Guide, version 4.2.0

Copyright © 2019, FOEX GmbH. All rights reserved. Authors: Peter Raganitsch, Matt Nolan, Dietmar Gabauer

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.

The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing.

Table of Contents

Getting Started 1 ......................................................................................................

Introduction 1 ...........................................................................................................

Prerequisites 1 ..........................................................................................................

Step 1: Installing the FDA 2 ......................................................................................

Install the FDA on Firefox 2 .....................................................................................

Install the FDA on Google Chrome 2 ......................................................................

FDA installation verification 3 .................................................................................

Step 2: Creating a FOEX application 4 ....................................................................

Ensure the sample application is installed 5 .........................................................

Copy the FOEX Template Application 9 ..................................................................

Step 3: Creating your first FOEX page 12 ...............................................................

Step 4: Adding a Grid to a FOEX page 14 ...............................................................

Step 5: Adding a Form to a FOEX page 17 ..............................................................

Step 6: Adding a Tree Grid to a FOEX page 21 .......................................................

Step 7: Integrate the pages into Page 1 24............................................................

foex.at of 3 3

FOEX First Steps Guide Version 4.2.0

Getting Started

Introduction

This document is designed to show you how to quickly get started using FOEX and create your first 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.

foex.at of 1 29

FOEX First Steps Guide Version 4.2.0

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 file http://foex.at/c/DeveloperAddon/latest/fda_firefox.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_firefox.xpi file 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 Webstore and 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 4. Search for the FDA using the top left search field 5. Choose the FDA from “FOEX GmbH” and add it to your browser

foex.at of 2 29

FOEX First Steps Guide Version 4.2.0

FDA installation verification

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.

foex.at of 3 29

FOEX First Steps Guide Version 4.2.0

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 specifically for pages which have the FOEX Viewport or FOEX Desktop plugins defined on them.

If you do not define 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 defined. All other plugins when used on a page are defined as children of the above plugins.

3. If you encounter any issues, please submit your question on our support forum.

foex.at of 4 29

FOEX First Steps Guide Version 4.2.0

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

3. If the application is not installed, please click the Create button

foex.at of 5 29

FOEX First Steps Guide Version 4.2.0

Then select Packaged Application and click Next.

From the list of applications select Sample Database Application and install it.

foex.at of 6 29

FOEX First Steps Guide Version 4.2.0

foex.at of 7 29

FOEX First Steps Guide Version 4.2.0

foex.at of 8 29

FOEX First Steps Guide Version 4.2.0

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

3. Choose a new Application ID and Application Name, then click Next.

foex.at of 9 29

FOEX First Steps Guide Version 4.2.0

4. Confirm your action by clicking the Copy Application button

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

foex.at of 10 29

FOEX First Steps Guide Version 4.2.0

5. Run the the App before we add our first pages

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 satisfied with the provided layout and use it without any changes.

foex.at of 11 29

FOEX First Steps Guide Version 4.2.0

Step 3: Creating your first FOEX page

After setting up the FOEX application, you are now ready to create your first 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).

Enter 2 as Page Id and My First FOEX Page as Page Title Accept the default settings for the layout of the page.

Note: The center pane is always checked since this page is mandatory.

foex.at of 12 29

FOEX First Steps Guide Version 4.2.0

7. You will then instantly see the new page in the Page Designer

foex.at of 13 29

FOEX First Steps Guide Version 4.2.0

Step 4: Adding a Grid to a FOEX page

Now that your first FOEX page has been created, you can use the FOEX Developer Addon to quickly create your first 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

2. A Create FOEX Region dialog will appear: 1. Enter the Region Title (e.g. Grid Example) 2. Check that the Parent Region is Center Pane 3. Select the Grid icon

foex.at of 14 29

FOEX First Steps Guide Version 4.2.0

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

(The Select Statement will be populated automatically)

foex.at of 15 29

FOEX First Steps Guide Version 4.2.0

6. After clicking the Create button, you should see the following structure (e.g. A 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.

7. Save and Run the page and you should see the following:

If you encountered any issues, please submit your question on our support forum (https://forum.foex.at).

foex.at of 16 29

FOEX First Steps Guide Version 4.2.0

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 3Page Title My First FOEX Form

2. Right click on the Center Pane region and select Create FOEX Sub Region from the context menu.

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 the page items for the first column in the list.

Note: The primary key must be a valid page item that exists on the page and as a child foex.at of 17 29

FOEX First Steps Guide Version 4.2.0

item contained within a child field container / field set region of the Form plugin.

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

7. Save and Run the page and you should see the following:

foex.at of 18 29

FOEX First Steps Guide Version 4.2.0

8. Select the Attributes node of the Form Example region

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

foex.at of 19 29

FOEX First Steps Guide Version 4.2.0

11. Save and run the page. Click the newly added First button to load the first record.

If you encountered any issues, please submit your question on our support forum.

foex.at of 20 29

FOEX First Steps Guide Version 4.2.0

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 4Page Title My First FOEX Tree Grid

Right click on the Center Pane region and select Create FOEX Sub Region from the context menu.

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) c) Select the Tree Grid icon

foex.at of 21 29

FOEX First Steps Guide Version 4.2.0

3. Enter the following query sample: 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 AND PAGE_ID = :APP_PAGE_ID

foex.at of 22 29

FOEX First Steps Guide Version 4.2.0

5. Run the page and you should see the following:

If you encountered any issues, please submit your question on our support forum.

foex.at of 23 29

FOEX First Steps Guide Version 4.2.0

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

4. Add List Entries for all created pages

foex.at of 24 29

FOEX First Steps Guide Version 4.2.0

5. Add List Entries for all created pages

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

50 Tree Grid Example 4

foex.at of 25 29

FOEX First Steps Guide Version 4.2.0

6. Open page 1 in the Page Designer and run it

In the Navigation on left, there are your created list items.

foex.at of 26 29

FOEX First Steps Guide Version 4.2.0

7. Now Click on one of the newly created navigation items

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 (fit)because we have only one FOEX Region per page.

Repeat this for pages 2, 3 and 4.

foex.at of 27 29

FOEX First Steps Guide Version 4.2.0

9. Run page 1 and click on one of the 3 modified pages

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 Config 10.3. Change the Prevent Header setting to Yes.

Do this for all 3 Example pages

foex.at of 28 29

FOEX First Steps Guide Version 4.2.0

11. Final Run of page 1

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.

foex.at of 29 29