APEX 5.0 Beyond basics

iAdvise presented the APEX 5.0 roadshows in the first half of 2015. Besides the presentation about the new features, we provided 3 tutorials which helped the visitors to explore Oracle Application Express 5.0. Now we offer these tutorials through our blog. In this article the second tutorial is presented.

This tutorial guides you through some more basic steps. It continues where the tutorial for a basic application ends. If necessary it is possible to import a copy of this basic application.

In this tutorial we talk about Oracle Application Express when Oracle APEX is mentioned.

The intention of this tutorial is to become familiar with APEX 5.0 and it’s features.

Step 1: The basic application where we start from

Before we start we have to import a basic APEX 5.0 application. Navigate to page https://goo.gl/cg2izy and click Tutorial 3 – APEX 5.0 Beyond Basics. There you will find the SQL-script f_basic_application_beyond_basics.sql. Download this file and import it in the Application Builder.

In a nutshell, this is the way to import the application.
Make sure you are in the Application Builder. Click the icon ‘Import’ on top of the page.

Now a page appears where you can select a SQL-file to import. Navigate to where you downloaded the mentioned SQL-file. Choose the file ‘f_basic_application_beyond_basics.sql’ as provided by iAdvise and click ‘Next’. In the following pages of this wizard leave all defaults and keep clicking ‘Next’ until a page appears with the button ‘Install Application’. Click this button.

When your application is succesfully installed, you will see this.

In this blogpost (Creating a basic application in APEX 5.0) we can read about a few SQL-files you have to insert into your application. Follow these steps and then continue this tutorial.

Step 2: Change the application title

Let’s change the application title. To illustrate what we exactly mean, take a look at the next image. You have to change ‘My APEX 5.0 Application’.

Navigate to the Application Builder of the application. At the right upper side of the page you will see a button ‘Edit Application Properties’. Click this button.

On the next page you see four headers on top (Definition, Security, Globalization, User Interface). Click ‘User Interface’. It will bring you on a page where you can set a lot of information about the layout of the application.

Navigate to section ‘Logo’. Choose ‘Text’ at ‘Logo Type’ and change the value in ‘Logo’. For example choose ‘APEX 5.0 – Beyond basics’.

Click ‘Apply Changes’ and you will return to the Application Builder. Now run your application by clicking the ‘Play’ button at the right upper side of your screen. A runtime version of your application will be shown on a new tab page (Google Chrome) or a new window (Firefox, IE).

Your application title has changed!

To prevent any confusion we also change to title that appears in the Application Builder. To illustrate this, take a look at the following images.

To change this title, click ‘Edit Application Properties’. Take a look at Image 5 to see which button we mean. Navigate to section ‘Name’ and change value for item ‘Name’ into ‘APEX 5.0 – Beyond basics’. Click ‘Apply Changes’.

You will return in your Application Builder. There you can see immediately that the application name is changed.

Even when you look in the Workspace where all available applications are shown, you see the application name over there also changed.

Step 3: Add icon to create button

One of the pages in the basic application has a ‘Create’ button at the right top of the page.

We want add an icon to this button so an image and text will appear on the button.
Navigate to your Application Builder and click Page 3 – Employees or click ‘Edit Page 3’ in the developer toolbar to arrive in the Page Designer for this page.

Navigate to the ‘Create’ button. Do this by navigating through the tree page at the left side
(Page 3: Employees ? Regions ? Content Body ? Employees ? Region Buttons ? Create) or by clicking in the Grid Layout in the center of the Page Designer.

At the right side of the Page Designer you see sections with properties of the button. Make sure you see section ‘Appearance’. Change ‘Button Template’ into ‘Text with Icon’ by selecting this value from the select list. Change ‘Hot’ to ‘Yes’.

Finally, choose a value for ‘Icon CSS Classes’ by selecting a value from the list. In ‘Category’ leave the default ‘Web Application’. Navigate to ‘fa-plus-square’ by using the scrollbar or enter this value in the search field. Click on the icon name to select it.

Now ‘Appearance’ will look like this:

Click ‘Save and Run’ at the top of your page to take a look at the result.

The ‘Create’ button now looks like this.

Step 4: Edit template options for regions

In this step you will see the effects of template options on your page. We will work with page 3 and 4 from our application. To illustrate the situation we start from we show screenshots of this pages.

Page 3:

Page 4:

Make sure you are in the Page Designer for page 3 and navigate to region Employees. Click on the region in the center part of the Page Designer or navigate through the Rendering tab at the left site of the Page Desinger (Page 3: Employees > Regions > Content Body > Employees).

At the right side, navigate to section ‘Appearance’ and you will see an item with the label ‘Template Options’. Click ‘Use Template Defaults’. A window will appear where it is possible to change several properties. You see two sections in the pages: Common and Advanced options.

Concering Common options change ‘Remove Borders’ and ‘Show Maximze Button’ by clicking the checbox at the left side of the text. Now ‘Save and Run’ to see what the effect is.

In this image it’s hard to see but if you take a good look at your screen you will see that borders which formerly appeared around the report now are not drawn. At the right upper side of your screen the icon for maximizing your screen is visible. Click this icon and you will see the maximized report on your screen.

Click again the symbol to return to the ‘normal’ view of the report.

Now return to the Page Designer and navigate to page 4. You can do this by navigatiging to the Application Builder and click page 4. Or use the navigator at the top of your Page Designer. You can just fill in the page number and click ‘Go’ or show the list and select the page you want to navigate to.

For region ‘Employee’ navigate to ‘Appearance’ at the right side of the Page Designer and click ‘Use Template Defaults’. Adjust the next settings:
• Item Size > X Large
• Item Width > Stretch Form Fields
• Label Alignment > Left
• Label Position > Show Form Labels Above

Click ‘Ok’, save the page and navigate in your application to the model page to see what has changed.

Items are bigger (Item Size), alignment of items is more equal towards each other (Item Width), labels are aligned at the left side (Label Alignment) and at top of the items (Label Position).

Step 5: Add validation to a field

In this step we will add validation to the e-mail address on (modal) page 4. Make sure you are in the Page Designer for page 4. At the left side, click the icon to navigate to Processing and Validating.

You will now see an overview of options concering processing and validations. Right click ‘Validating’ and then click ‘Create Validation’.

At top of the page a red icon in tab ‘Messages’ appear. Click on it and you see the messages which have to be fixed.

This messages will disappear after we filled in some properties.

At the right side you have to give values to these properties:
Section ‘Identification’
• Name > ValidateEmailAddress
Section ‘Validation’
• Type > PL/SQL Function Body Returning Boolean (from select list)
Section ‘Error’:
• Error Message > The e-mail address may not be a Yahoo or Hotmail account.
• Display location > Inline with Field
• Associated item > P4_EMAIL_ADDRESS (Use select list).

Now you see the number at top besides Messages has turned into 1.

The final step for this validation is to enter PL/SQL code into ‘PL/SQL Function Body Returning Boolean’. You can find this in the section ‘Validaition’. Click the symbol as shown below.
Image 38
A code editor will appear. We want to avoid employees use a Yahoo or Hotmail account. You can add this code to the editor:
• if lower(:P4_EMAIL_ADDRESS) like ‘%yahoo%’
or lower(:P4_EMAIL_ADDRESS) like ‘%hotmail%’
then
return (FALSE);
else
return (TRUE);
end if;

You can click on the ‘Validate’ icon to check whether you entered valid code or not. In this situation, your code is valid. So click ‘OK’.

You will see the red bullet beside tab ‘Messages’ will disappear.
Now it is time to check if the validation works fine so navigate in your application to the modal page.
In your ‘runtime’ application navigate to the page with employees (page 3) and click the edit icon. The model page will appear.

Change the e-mail address of this employee so it becomes a Hotmail account. Then click ‘Apply Changes’. You see that 2 messages will appear.

Step 6: Expanding functionality

Step 6a: Create a modal page and add items in Page Designer using the gallery
In this step you will create a select list in page based on a list of values. You will add functionality to page 2 (Department Employees).

First, we have to create a new modal page. In this tutorial we will guide you through this several steps but less comprehensive as in the tutorial for a basic application.

• Make sure you are in the Application Builder. Click ‘Create Page’.
• Leave preselected defaults and click ‘Blank Page’.
• Leave ‘Page Number’ as defaulted, in ‘Name’ type ‘Add department employee’ and for ‘Page Mode’ select ‘Modal Dialog’ and click ‘Next’.
• In the next page again click ‘Next’ without changing the defaults.
• Finally, click ‘Finish’.

Now the new page will be shown in the Page Designer. You can see there are no regions. In the center part of the Page Designer, the grid layout, you see a little arrow you can click on.

When you click the arrow, a section will appear where your can select a lot of things for Regions, Items and Buttons. In Oracle APEX this is called ‘the gallery’.

Make sure ‘Regions’ is selected and scroll down until you see ‘Static Content’. Drag and drop this item into section ‘Content Body’. Take a look at the changes in your Page Designer.

You see a section ‘Items’ in section ‘Content Body’. Now select button ‘Items’ in the gallery as shown in Image 41. Scroll through this section until ‘Select List’ appears. As described before, drag and drop this item but this time into section ‘Items’.

Regarding tab Messages and regarding the red colored item P5_NEW we have to edit some properties to make this page work in a good way.
At the right side you can enter values for properties. We did this before so here shortenend instruction what you have to add.

Section Identification:
• Name > P5_DEPARTMENTS
Section Label:
• Label > Select department
Section Appearance:
• Template > Required
Section List of Values:
• Type > SQL Query
• SQL Query (this will appear when Type is filled with SQL Query) >
select name
, dpt_id
from iadv_departments
order by name

In the same way, add a ‘Select List’ where you can select an employee. Name this item ‘P5_EMPLOYEES’. The query you can use looks like this:
• select first_name || ‘ ‘ || last_name
, epe_id
from iadv_employees
order by 1

Probably now you know how to add a date picker. Do this twice. One has to be named ‘P5_START_DATE’, the other has to be named ‘P5_END_DATE’.
For start date, use the label ‘Required’, for end date the optional can be used.

Step 6b: adding navigation between pages

The modal page we just created has to be called by page 3 (Department employees). Make sure you are in the Page Designer for this page and navigate to the gallery. Select ‘Buttons’ and drag and drop a ‘Text with Icon’ button left to the button ‘GoToEmployees’.

Now select this button and change the following properties in the property editor.

Section Identification
• Button Name > ADD_DEPARTMENT_EMPLOYEE
• Label > department employee
Section Appearance
• Icon CSS Classes > fa-plus-square (see images 15 and 16)
Section Behavior
• Action > Redirect to Page in this Application

For Target (Behavior), click ‘No Link Defined’.

A window appears where you can enter information about the page you want to navigate to. It is called ‘Link Builder.

Click on the arrow at the right side of ‘Page’ and this window will appear.

Click page 5 and you wll return to the Link Builder. Now repeat this action for ‘Clear Cache’. Select page 5 and then click ‘OK’. Again, click ‘OK’ and then click ‘Save and Run’ to take a look at the results. You will see a new button at top of the interactive report.

Click this button and the new modal page will be shown.

Step 6c: modifying a region on a (modal) page.
As you can see, this page needs some more options and adjustments.
• Hide region title New.
• A Cancel button is needed.

To hide region title New:
Make sure you are in the Page Designer for page 5. In Grid Layout select ‘</>New’. At the property editor navigate to section ‘>’ and click ‘>’. At header, select ‘Hidden’ and then click ‘OK’.

Add a cancel button:
From the gallery, drag and drop a ‘Text’ button into the Grid Layout. Drop it in the position of ‘Previous’.

Change the properties for this button.
Section Identification
• Button Name > CANCEL
• Label > Cancel
Section Behavior
• Action > Redirect to Page in this Application
• Target > Like Images 50 and 51, let’s navigate this button to a page. In this case it is page 2.

Step 6d: adding a dynamic action, a process and a branch
Right here, we will apply this to our page:
• Add functionality to hide items ‘Employees’, ‘Start date’ and ‘End date’ when ‘Departments’ has no value.
• A button to send data to the database has to be added.

To show ‘Employees’ when ‘Departments’ has a value:
At the top of the tree pane you can navigate to ‘Dynamic Actions’. Right click ‘Page Load’ and then click ‘Create Dynamic Action’.

Now you see this on your screen.

The highlighted items are the ones we have to adjust a little. First click ‘New’ (the blue line). At the right side, in the property editor, all properties for this item are shown.
Change the following properties:

Section Identification:
• Name > HideEmployeesAndDates
Section When:
• Event > Page Load
Section Condition:
• Type > Item is NULL
• Item > P5_DEPARTMENTS

Now click ‘Show’ (the pink line) and change this properties:

Section Identification:
• Action > Hide
Section Affected Elements:
• Selection Type > Item(s)
• Items(s) > P5_EMPLOYEES,P5_START_DATE,P5_END_DATE

This last property (Item(s)) can be filled by picking the items from the page you can call, or you can manually add them.

Now save the item and navigate to this modal page (5) in the ‘runtime’ version of your application. At first your page will look like this.

When you select a department from the list, the other items (Employees, Start date and End date) will appear.

The only missing element is a button to add data to the database. Make sure you are in the Page Designer for page 5 and navigate to the Grid Layout. From the gallery select a text button into the grid. It has to be placed right of button ‘Cancel’ in ‘Next’.

Image 61

For this new button, the next properties have to be changed in the property editor:

Section Identification:
• Name > Save
• Label > Save
Section Appearance
• Hot > Yes
Section Behavior
• Action > Submit Page

Now go to the ‘Processing’ tab at top of the tree pane. Click the icon as shown in the image and then click ‘Create Process’.

Like we saw before when adding the dynamic action, you see a highlighted line in your tree pane.

For this item some properties have to be changed:

Section Identification:
• Name > InsertDepartmentEmployee
• Type > PL/SQL Code
Section Source:
• PL/SQL Code > insert into iadv_dpt_employees ( dpt_id
, epe_id
, start_date
, end_date )
values ( :P5_DEPARTMENTS
, :P5_EMPLOYEES
, :P5_START_DATE
, :P5_END_DATE );
Section Excecution Options:
• Point > After Submit (default)
Section Error Message:
• Error Message > An unexpected error appeared on adding a department employee
• Display Location > Inline in Notification (default)
Section Condition:
• When Button Pressed > SAVE (select from list)

If we would use this page now and add a department employee, a record will be inserted into IADV_DPT_EMPLOYEES and then you stay at the modal page. Actually we want to navigate back to the calling page after we add the information.
So the last action now is to add a branch. This is a navigation action in your application.

At the tree pane in your Processing tab, right click ‘Processing’ and then click ‘Create Branch’.

At the right side change some values in the property editor.

Section Identification:
• Name > GoToReportDeptEmps
Section Execution Point:
• Point > Processing (default)
Section Behavior:
• Type > Page or URL (Redirect) (default)
• Target > Select page 2 in the page which will be presented to you.
Section Condition:
• When Button Pressed > Save

Take a look at the page. It will look like this, after you entered values for department, employee and start date.
Image 65
It is a bit strange buttons ‘Cancel’ and ‘Save’ are not next to each other.
Can you change something by using Page Designer to make it look like this?

Step 7: change fixed report heading
The application used in this tutorials uses the new Oracle APEX 5.0 Universal Theme. A very nice feature is fixed headers in interactive reports. To illustrate this, take a look at the Employees report in your ‘runtime’ application. It looks like this.

When you scroll down you will see headers remain on top of the page.

To change a setting for this report make sure you are in the Application Builder for this page (3). In your tree pane navigate to the attributes of your interactive report.

At the right side in the property editor go to section ‘Heading’. Change ‘Fixed to’ into ‘Region’ and ‘Maximum Report Height’ into 200.

These values will decrease the height of your report and the headers will stay on top in your region and will not appear at the top of your browser window.
It will look like this.

And when you scroll down, this will be the effect.

That’s it for this tutorial, great job!