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 helps you step by step through the process of migrating an application to the Universal Theme of Oracle Application Express 5.0. 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 its features.

We assume you have an environment where you can work with APEX 5.0.

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.

tut3image004
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.
tut3image006

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

tut3image008

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’.

tut3image010
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.

tut3image012
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.

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

tut3image016
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).

tut3image018

Your application title has changed!

tut3image020
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.

tut3image022
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’.

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

tut3image027

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

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.

tut3image033

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.

tut3image036

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.

tut3image039
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’.

tut3image041
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.

tut3image043
Now ‘Appearance’ will look like this:
tut3image045

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

tut3image047

The ‘Create’ button now looks like this.

tut3image049

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:

tut3image051
Page 4:

tut3image053

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).

tut3image056

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.

tut3image058

tut3image060

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.

tut3image062

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.

tut3image064

tut3image066

tut3image068

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.

tut3image070
tut3image072

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.

tut3image074

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.

tut3image077

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

tut3image079

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.

tut3image081

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).

tut3image083
tut3image085

tut3image087

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

tut3image081

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’.
tut3image093

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.

tut3image097

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.

tut3image101

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.

tut3image104
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’.

tut3image106

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.

tut3image108

tut3image110

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’.

tut3image112
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’.

tut3image114

tut3image116

tut3image118

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’.

tut3image120

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

tut3image122

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

tut3image124

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.

tut3image127

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

tut3image129

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’.

tut3image131

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

tut3image133

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’.

tut3image135
Now you see this on your screen.

tut3image149

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.

tut3image139

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

tut3image141

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’.

tut3image143

tut3image145

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’.

tut3image147

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

tut3image149
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’.

tut3image151

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?

tut3image155

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.

tut3image157

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

tut3image159

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.

tut3image161

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

tut3image163

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.

tut3image165

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

tut3image167

That’s it for this tutorial, great job!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About scholhu