Download - Aria Employee Directory Lookup Application - Step-By-Step Guide to create application in Oracle APEX

http://www.dbcon.com

Step-by-step guide to Create Aria Application in Oracle APEX

Learn Oracle Application Express from DBCON ( http://www.dbcon.com/courses.html ) (Support environment causes. Please think twice before printing this document)

2 Step-by-step guide to Create Aria Application in Oracle APEX

Table of Contents Introduction ............................................................................................................................................ 4

Preparing the environment..................................................................................................................... 5

Getting Started ........................................................................................................................................ 7

Creating the Application ..................................................................................................................... 7

Installing application’s theme ........................................................................................................... 12

Create supporting objects and load data .......................................................................................... 19

Create Application Users ...................................................................................................................... 23

Page – 410 – Login ................................................................................................................................ 26

Shared Components .............................................................................................................................. 28

Application Items .............................................................................................................................. 28

Lists ................................................................................................................................................... 31

Navigation Bar Entries....................................................................................................................... 40

List of Values ..................................................................................................................................... 47

Build Options ..................................................................................................................................... 50

Authentication Scheme ..................................................................................................................... 53

Authorization Schemes ..................................................................................................................... 56

Application Definition ....................................................................................................................... 59

Application Processes ....................................................................................................................... 61

Page 0 ................................................................................................................................................... 64

Page – 99 – Dummy Page to support images ....................................................................................... 79

Page – 1 – Quick Search ........................................................................................................................ 86

Test Page 1 .................................................................................................................................. 115

Page – 2 – Detail View ......................................................................................................................... 119

Testing ............................................................................................................................. 132

Page – 3 – Organization Chart ............................................................................................................ 135

Testing Page 3 ............................................................................................................................. 154

Page – 18 – Relate ............................................................................................................................... 157

Testing Page 18 ........................................................................................................................... 180

Page – 19 – Relation ............................................................................................................................ 181

Testing Page 15 & 16................................................................................................................... 190

Page – 80 – Management Chain ......................................................................................................... 193

Testing Page 80 ........................................................................................................................... 202

Page – 6 – Advanced Search ............................................................................................................... 205

http://www.dbcon.com/courses.html�



Testing Page 6 ............................................................................................................................. 234

Page – 17 – Update Employee Info Intro ............................................................................................ 236

Test Page 17 ................................................................................................................................ 251

Page – 8 – Update Extended Information (secure) ............................................................................. 253

Test Page 8 ...................................................................................................................................... 276

Page – 15 – Update Picture (secure) ................................................................................................... 280

Testing Page 15 ........................................................................................................................... 306

Page – 16 – Approve Image (secure) .................................................................................................. 307

Testing Page 15 & 16................................................................................................................... 325

Page – 11 – Search Help ...................................................................................................................... 331

Test Page 11 ................................................................................................................................ 340

Page – 400 – Palm Search ................................................................................................................... 342

Testing page 400 ......................................................................................................................... 352

Conclusion ........................................................................................................................................... 354




Introduction Oracle provides some pre-created applications in Oracle Application Express known as packaged applications. Packaged Applications are fully functional applications that you can view, use and customize. These packaged applications can be downloaded from URL http://www.oracle.com/technology/products/database/application_express/packaged_apps/packaged_apps.html . Even if you download and use packaged application, sometimes and especially for beginners it becomes a challenge to really understand how these packages applications have been developed and decipher each and every component of it. This step-by-step guide is an attempt to address that problem, where you will recreate each any every component of the application yourself and have full understanding of it. One of such packaged applications is “Aria Employee Directory Lookup”. Aria is used globally within Oracle to look up phone numbers, email addresses and other information about employees. Each employee can update his or her preferred contact information and upload an image for the employee profile page. Using this guide you will be able to create Aria Employee Directory Lookup application from scratch. Once you have learnt Oracle Application Express, the next step is to put it to use. Training is necessary for getting the fundamentals right but there can be many challenges when you actually get down to create an application. Having a step-by-step guide that will walk to you through the different steps of how to create an actual application will give you an added advantage. It’s like taking an expressway to gain experience to develop real life applications. Please do ensure that you are following the instructions carefully to get the application up and running. Any small typo or overlook may cause the application not to function properly. We will also highly recommend you to go through these step by step guide at least twice to have a thorough understanding of the entire application. Please do not forget to send your comments, feedback and suggestions to [email protected] . Please specify “Aria Employee Directory Lookup” in your subject line for all communications with regards to this document. To use this guide effectively you must have the basic understanding of Oracle Application Express. If you are an absolute beginner in Oracle APEX we will highly recommend you to look at our training program “Developing Applications with Oracle Application Express” before you dive into this guide. Last but not the least, support environment causes. Please do not print this document if you can avoid it. Enjoy ! Team DBCON http://www.dbcon.com


http://www.oracle.com/technology/products/database/application_express/packaged_apps/packaged_apps.html�

http://www.oracle.com/technology/products/database/application_express/packaged_apps/packaged_apps.html�

mailto:[email protected]�

http://www.dbcon.com/DevelopingWithOracleApex.html�

http://www.dbcon.com/�



Preparing the environment Like any other application, Aria Employee Directory Lookup is also dependent on other supporting objects. These support objects include

Database Objects likes tables, indexes, packages, procedures, functions, sequences etc.

Sample data in the tables Image Files Javascript Files CSS Files

In order to get started with the development of this application, you need to prepare your environment first. As our focus is just on creating the Aria Employee Directory Lookup application in Oracle APEX, a script has been provided which will create all of the above mentioned supporting objects in your APEX workspace. (If you do not have an APEX workspace, you can sign up for one at http://apex.oracle.com . The workspaces are provided free of charge and the only limitation is you cannot have more than 10 MB of data) DBCON can also provide you an APEX workspace to complete this exercise at a charge of US$ 10 per month. If you want to sign up for an APEX workspace at DBCON, please send us a mail at [email protected] . We will give you instructions on how to pay and access your workspace. To download the script to install these supporting objects please go to URL http://www.dbcon.com/apexapps_aria.html . This script contains the following files. (For any problem in download the script, please inform us as [email protected])

File name Description AriaLabSupplement.txt Contains HTML, SQL, PL/SQL and other codes that you will

be using while creating the application. Copy the code from this file and paste it in your APEX application.

AriaSupportingObjects.sql Will create all the supporting objects like database tables, indexes, procedures, functions, packages, css files, image files, javascript files etc.

AriaSupportingObjects_Deinstall.sql Should you need to clean up your environment, run this script to remove all the supporting objects created by the above script.

AriaTheme.sql Aria Employee Directory Lookup application has got its own look and feel. This theme will install Aria Theme in your workspace that you will be using while creating this application.

Once the script is downloaded and you have got an APEX workspace follow the following steps to prepare the environment. Please ensure that you do not have any database objects that start with the name ARIA.


http://apex.oracle.com/�


http://www.dbcon.com/apexapps_aria.html�




IMPORTANT To avoid overwriting any existing objects with the objects of this application, it is highly recommended that you create a new workspace and a new schema so that you have a fully separate environment for this step-by-step guide.




Getting Started

Creating the Application Logon to APEX Workspace (Password is case sensitive)

Click on Application Builder

Click on create to create a new application




Select create application, click next

Specify the application name (The Application ID will be assigned automatically). Click next

Specify page name & type, click add page (As it is mandatory to create at least one page at this step, we will just add a dummy page here. This page will be deleted later)




Click next

Select No Tabs, click next




For Shared Components select no, click next

Specify application attributes, click next




Select Theme 13, click next

Click create




Installing application’s theme Aria application has got its own theme. Themes control the look and feel of the applications. The following steps will install a new theme in the application that you have created in the previous step. Click on Page ‘1 – Quick Search’

Click delete button to delete the page. We will recreate all the pages ourselves with the new theme.

Click Permanently Delete Page

Once you delete page 1 the control will go page 101. Click on delete to delete this page as well


Click on permanently delete page

Click on Application <n>

Click on Shared Components

Click on Themes under User Interface



On right hand side under Tasks list, click on edit theme

Click on Theme Name




Select Component Defaults tab and change the default for page to " No Tabs with Sidebar " (It is necessary to change the page default to a different template before installing and switching to the new theme. Failing to do so will result into error while switching to a new theme) Click on apply changes

Click on create button to create a new theme

Select from export, click next

Select the Theme export file from your PC (If you have not download the supplementary files required to create this application, please go to URL http://www.dbcon.com/apexapps_aria.html and download the file). Click ‘Next’





Click next

Select the application, click install theme

Once the theme is installed click on Switch Theme to switch to new theme




Select theme, Click next

Click next

Click switch theme

Once you have switched the theme, the new theme will have the asterisk mark denoting that this theme is the currently active theme.




Create supporting objects and load data Aria application needs support objects like database objects (tables, indexes, views, packages, procedures, functions, CSS files, javascript files etc. Follow these steps to create these supporting objects before you start building the application. Click on SQL Workshop tab

In SQL Workshop click on SQL Scripts

Click on upload button




Locate the file AriaSupportingObjects.sql and click upload (If you have not downloaded the supplementary files required to create this application, please do to URL http://www.dbcon.com/apexapps_aria.html and download the file).

Once uploaded click on the file name to run the script file

Click on run the run the script

Click run again





Click on view results to check the output of the script

On results page, scroll to the bottom of the page and ensure that all the commands in the script have been executed without any error. If there are any errors, please correct the error before continuing.




This script will also load the data in the tables. (If you need to remove all the objects and create again, use script AriaSupportingObjects_Deinstall.sql to remove all the objects that are created by AriaSupportingObjects.sql)




Create Application Users Create the application users. These users are employees in ARIA application and they will be able to update their information in the application. From workspace home page, click on manager application express users

Click on create end user




Specify the user name as SKING. Also specify password (passwords are case sensitive), email address and set require change of password on first use to no. Click on create and create another.

Create another user with name JCHEN. Specify password, email and require change of password on first use. Click on create and create another




Page – 410 – Login Follow these steps to create page 410 which will be the login page for the application.

Click on create page

Specify page type, click next

Specify page attributes, click create




Shared Components Shared Components are components that are defined once and then can be used in multiple places in the application. First create the different shared components that are required in the application. These components will then be used in the different pages of the application that you will be creating in subsequent steps.

Application Items Application Items are used as global variables in an APEX application. Application items are not associated with a page and therefore have no user interface properties. In this step-by-step guide, all application items will have a prefix of " AI_ " as a standard naming convention Follow these steps to create the application items. From application’s home page, click on shared components.

Click on Application Items




Click on Create

Specify the Application Item name, click Create

Repeat the above 2 steps to create the following application items also AI_FORWARD_NAME




AI_CURRENT_USER_PERSON_ID AI_RELATE_TO_PERSON_ID AI_TEMP_ID AI_TEMP_PAGE_ID

Once all the application items are created it should look as following




Lists A list is a shared collection of links. You add a list to a page by creating a region and specifying the region type as List. You control the appearance of a list through list templates. Follow these steps to create lists Click on Lists under Shared Components

Click on Create

Specify list name and template. Click create

Click on Create List Entry




Select Entry tab. Specify List Entry Label. Click Target tab

Click on target tab and specify the target attributes (All the target pages will be created in subsequent steps)

Select Current List Entry tab. Specify List Entry Current for Condition




Select Conditions tab and specify the condition. Click create

Repeat the above steps to create the following list entries under list Employee View Options

Tab Attribute Value Entry Sequence 20

List Entry Label Organization Chart Target Target 3

Set these items AI_PERSON_ID

With these values &AI_PERSON_ID.

Current List Entry List Entry Current for Condition 3

Condition Condition Type PL/SQL Expression

Expression 1 :AI_PERSON_ID IS NOT NULL

Tab Attribute Value Entry Sequence 30 List Entry Label Relate... Target Target 18

Clear Cache 18

Current List Entry List Entry Current for Condition 18:19

Tab Attribute Value Entry Sequence 40




List Entry Label Management Chain Target Target 80

Reset pagination for this page Click the checkbox

Set these items AI_RELATE_TO_PERSON_ID

With these values 1014

Current List Entry List Entry Current for Condition 80

Once all the List entries are created it should appear as following

Creating List – Edit Options Click on create button under Shared Components -> Lists to create another list called ‘Edit Options’

Specify list name and template, click create




Click on create list entry

Select entry attribute and specify list entry label.

Select target attribute and specify target page




Select current list entry attribute and specify list entry current for condition. Click create and create another

Select entry attribute and specify list entry label Contact Information

Select target attribute and specify the details (Notice that there is a trailing “ . “ after &AI_PERSON_ID)




Select current list entry attribute and specify list entry current for condition. Click on create and create another

Select entry attribute, specify list entry label

Select target attribute, specify target page




Select current list entry attribute and specify list entry current for condition. Click on create and create another

Select entry attribute and specify list entry label




Select target attribute and specify the details. Click on create




Navigation Bar Entries Navigation bar entries offer an easy way to move users between pages in an application. For example, a navigation entry enables you to display a link from an image or text. The associated page template determines the location of a navigation bar. Follow these steps to create navigation bar entries Click on Shared Components.

Click on navigation bar entries

Click create

Select From Scratch, click next




Specify Attributes, click next

Specify Target, click next

Specify Condition, click create




Click on create to create another navigation bar entry






Specify target, click next

Click Create




Click on create to create another navigation bar entry






Specify Target, click next

Click create




Click on Logout Navigation Bar Entry (This navigation bar entry was created automatically when the application was created)

Select Authorization tab and specify the authorization scheme. Click Apply Changes




List of Values From Application’s home page click on Shared Components

Click on List of Values

Create LOV - EXTENDED_INFORMATION_TYPES Click on create

Select LOV source click next




Specify LOV name and type, click next

Specify display value, click create list of values

Create LOV –TIME ZONES Click on create to create another list of values

Select source, click next

EXTENDED_INFORMATION_TYPE




Specify LOV name and type, click next

Specify the query for dynamic LOV, click create list of values SELECT distinct tzname a, tzname b FROM v$timezone_names

(v$timezone is a pre-defined view in Oracle Database)




Build Options Build options enable you to conditionally display specific functionality within an application. Build options have two possible values: INCLUDE and EXCLUDE. If you specify an attribute as being included, then the Application Express engine considers it part of the application definition at run time. Conversely, if you specify an attribute as being excluded, then the Application Express engine treats it as if it did not exist. Follow these steps to create the build option From Application’s home page click on Shared Components

Click on Build Options

Build Option – Search within Org Click on Create




Specify the build option details, click create

Build Option - Allow Users to Enter Time Zone Click on create to create another build option

Specify build option details, click Create




Build Option - Allow Updates to Photos Click on create to create another build option

Specify build option details, click create




Authentication Scheme Authentication is the process of establishing each user's identify before they can access your application. Authentication may require a user identify a user name and password or could involve the use of digital certificates or a secure key. Follow these steps to create the authentication in the application Click on Shared Components

Click on Authentication Schemes

Click on create




Specify method, click next

Select the pre-configured authentication scheme, click next

Select the login page, click next




Enter a name for this authentication scheme. Click create scheme

This will create the authentication scheme and make this authentication scheme current.




Authorization Schemes An authorization scheme extends the security of your application's authentication scheme. You can specify an authorization scheme for an entire application, page, or specific control such as a region, item, or button. For example, you could use an authorization scheme to selectively determine which tabs, regions, or navigation bars a user sees. From Application’s home page click on Shared Components

Click on authorization schemes

Click on create




Select creation method, click next

Specify authorization scheme details, click create begin wwv_flow.g_user := replace(wwv_flow.g_user,'nobody','Public'); return true; end

(This authorization scheme is not actually being used as an authorization scheme. It is just to change the username from "nobody" to "Public". In Aria application there are some pages which can be accessed by anyone (there is no logon required). When a page is accessed by anyone, the username is set to "nobody". This authorization scheme will change the username from "nobody" to "Public" for public users.)




Click on create to create another authorization scheme

Specify creation method, click next

Specify details, click create return wwv_flow.g_user != 'Public'

(Some pages in this application can be accessed by anyone (i.e. open to public), but to access some pages, users will need to logon. This authorization scheme will prevent Public’s access to those pages which needs users to logon)




Application Definition Click on Shared Components

Click on Definition

Select Substitution tab and specify the substitution string

Click on Logo tab and specify the logo type and image (Image file aria_logo.gif is created by the script AriaSupportingObject.sql that you executed in earlier steps). Click Apply Changes #WORKSPACE_IMAGES#aria_logo.gif




Click on Security -> Authorization Tab. Specify the authorization scheme, click Apply Changes




Application Processes Click on Shared Components

Click on application processes

Click on Create

Specify the process identification details, click next




Specify source, click next

(aria_detail is a procedure that has been created in the database. This on demand application process is simply calling that database procedure) Click create process




Page 0 Page zero functions as a master page. The Application Express engine renders all components you add to page zero on every page within your application. To create page 0 click on create page from Application’s home page

Select page type, click next

Click Finish




Click on Create under Regions to create a region on page 0

Select Region Type, click next

Select HTML Region Container Type, click next




Specify Display Attributes, click next

Specify the region source (available as " Code: Page-0-1 " in AriaLabSupplement.txt), click next

Specify the region condition (available as " Code: Page-0-2 " in AriaLabSupplement.txt). Click create region




What does this actually do ?

Click on create icon under Regions to create another region on page 0

Select region type, click next




Select HTML region container type, click next


Specify the region source (available as " Code: Page-0-3 " in AriaLabSupplement.txt), click Create Region




Click on create icon under Regions






Specify region source (available as " Code: Page-0-4 " in AriaLabSupplement.txt). Click Create Region




Select HTML region container type. Click next


Specify region source (available as " Code: Page-0-5 " in AriaLabSupplement.txt), click Create Region







Specify display attributes, click create


Click on Quick Search region to edit the region attribute

Select Header and Footer attribute. Specify Region Header & Region Footer, click Apply Changes Region Header <div style="float:left;">

Region Footer </div>

Click on Create under Items



Select item type, click next

Specify Text Control Display Type, click next




Specify display position and name, click next

Specify Item Attributes, click next

Specify Source, click next


Specify session state, click create item

Click on the item name to edit the attributes of the item

Select Element attribute, specify the post element text <img src="#WORKSPACE_IMAGES#20px_search.jpg" onclick="doSubmit('P0_QUICK_FIND')" style="cursor:hand;cursor:pointer;" align="top" alt="Quick Find" id="QUICK_FIND_IMG" />



Select Conditions tab, specify condition type and expression 1. Click on apply changes




Page – 99 – Dummy Page to support images This page is a dummy page to support displaying images in the application using APEX_UTIL.GET_BLOG_FILE_SRC. This page will never be accessed directly by the users. Item created on this page will be used in Page 2 and page 15 Click on create page


Specify form type, click next




Select schema, click next

Specify table name, click next

Specify page and region attributes, click next

Click next




Specify primary key, click next

Click next

Select column, click next




Specify process options, click next

Specify branching, click next

Click finish




Click edit page

Click on item P99_BLOB_CONTENT under items

Select source tab and click on BLOB Download Format Mask




Specify the column names and click apply

Click on Apply Changes




Page – 1 – Quick Search Click on create page


Specify page number, click next

Specify page name, title and breadcrumb, click next




Click next

Click finish

Click edit page




Click on edit page attributes

Click on security tab and change the authentication to “Page is Public”. Setting this to public will not prompt the users to logon and anyone will be able to view this page.

Select HTML Header tab. Specify the HTML Header attribute (available as " Code: Page-1-1 " in AriaLabSupplement.txt)




Select HTML Body Attribute tab and specify the Page HTML Body attribute Onload="PageInit()"

Select display attributes tab and specify cursor focus. Click apply changes

Click on create under Regions

Select Region Type, click next


Specify HTML Region container type. Click next

Specify display attributes of region. Click next

Specify HTML Region source. Click create region <style>#P1_SEARCH{font-size:14px;width:400px;display:block;}</style>

On Page Definition click on region name to edit the region

Navigate to ‘Header and Footer’ attribute and specify the following in HTML Header and Footer. These attributes will centre align the region on the page. Click on Apply Changes. HTML Header Attribute <table align="center" summary=""><tr><td align="center">

HTML Footer Attribute </td></tr></table>



Click on create under Items





Specify text control display type, click next


Specify item attributes, click next

Click create item




Click on create under buttons

Click next

Specify the button position, click next




Specify button attributes, click create button

Run the page.

The page should appear as following




Click on ‘Edit Page 1’ on Developer’s Toolbar to go back to page definition

Click on create under regions


Select Report Implementation type, click next




Specify display attributes, click next

Specify Region Source (Available as " Code: Page-1-2 " in AriaLabSupplement.txt). Click next




Specify report attributes, click next

Specify condition, click on create region




Click on create under computations

Select item location, click ‘Next’

Specify the computation details, click next




Specify the computation, click next (this will remove the text ‘@ORACLE.COM’ from the search string entered by the user and will convert the search string to upper case. For example if user enter the search string [email protected] it will be changed to ASHISH.AGARWAL) trim(replace(upper(:P1_SEARCH),'@ORACLE.COM'))

Click create





Specify item location, click next

Specify computation attributes, click next




Click next

Click create




Create a validation for P1_SEARCH. Click on create under validations under page processing

Select level, click next

Specify the item, click next




Select validation method, click next

Specify sequence and name, click next




Specify error message, click next

Specify when button pressed condition, click create

Click create under processes




Specify the process category, click next

Specify process conditions, click create processes




Create on create under regions




Specify display attributes, click next (The region sequence number here should be lower than the sequence number of the region Quick Search that was created in earlier steps)

Specify region source, click next <center style="margin:50px auto;">



Specify region condition, click create region





Specify display attributes, click next (The sequence number of this region should be higher than the sequence number of the region Quick Search but lower than the sequence number of the region Results)

Specify region source, click next Search any part of: Last Name, First Name, userid, Last 4 digits of work phone.</center>



Specify region condition, click on create region

Click on Report under Regions to edit the report attribute




Select Column Attributes and make the following changes 1. For Headings Type select Custom 2. Specify the column headings as shown below 3. Uncheck show for columns RNUM & PERSON_ID 4. Use up arrow and down arrow keys to change the order of the columns in the report.

Click apply changes

Click on Report under Regions to edit the report attribute

Click on edit icon for column REVERSE_NAME




Select Link attribute. Specify link text. For link attributes specify the following onmouseover="ARIA_DETAIL(this, '#PERSON_ID#')"

(ARIA_DETAIL is a javascript function that has been defined in aria.js file. This file is created in the workspace when you run AriaSupportingObjects.sql . This file is included in all the pages in the application as it has been defined in page 0 in the region named 0. Also ARIA_DETAIL will call application process Person_Detail and Person_Detail will call the database procedure aria_detail.)

The link target will be page 2. Pass the PERSON_ID as parameter to page 2. Click >




Click >

For EMAIL column specify the link text, target as URL and URL as ‘ mailto:#EMAIL# ’. click >




For column TITLE specify the Link Text, Target as page ‘3’. Pass the parameters PERSON_ID to page 3 Click apply changes

Test Page 1 Click on run button to run and test the page




As the page is displayed, here is where different parts of the page are coming from

Shared Components -> Navigation Bar Entries

Page Template “ No Tabs with Sidebar “ -> Footer Attribute

Page Template “ No Tabs with Sidebar” -> Footer Attribute

Page 0 -> Region – Accessible Version

Page 0 -> Region – Edit

Shared Components -> Definition -> Logo




Type % in the search box and press search. All the employees will be displayed

Page 1- Region – Bottom Holder

Page 1- Region – Quick Search

Page 1- Region – Results

Page 1- Region – Top Holder




As you hover your mouse on the name the person’s details will be displayed. This is coming from onmouseover event defined for the report column REVERSE_NAME under link attribute




Page – 2 – Detail View From Application’s home page click on create page


Select report type, click next

Specify page attributes, click next




Click next

Just specify a dummy query here. This query will be modified later. (Specifying the actual query here gives error - ORA-01461: can bind a LONG value only for insert into a LONG column). Click next SELECT SYSDATE FROM dual ;




Specify the report attributes, click next

Click finish




Click on edit page

Click on No for Authorization




Change Authentication to Page is Public

Select display attributes tab. Change title to the following. Employee Detail for &AI_FORWARD_NAME.

Click on Help Tab. Specify the Help Text (available as " Code: Page-2-1 " in AriaLabSupplement.txt). Click apply changes




Click on region Employee HR Details

Select Source attribute. Replace the Region Source with the following query (available as " Code: Page-2-2 " in AriaLabSupplement.txt) Also specify the region error message as Unable to run report. #SQLERRM#




Select Header and Footer attribute and specify the following. Click apply changes

Click on Create icon under Regions to create a new region

Select region type click next





Specify Source, click create list region

Click on Create under Computations




Select the Item Location, click next

Select item, computation point and computation type. Click next

Specify the SQL Query, click next SELECT forward_name FROM aria_current WHERE person_id = nv('AI_PERSON_ID') AND current_flag = 'Y'




Click create

Click on create under processes

Specify process type, click next




Specify session state process type, click next

Specify process attributes, click next

Specify process, click create process




Click on create under branches

Specify branch point and type, click next





Click create branch




Testing Page 2 Run application

Enter ‘%’ in the search box and click search button

Click on any employee name




Hover your mouse on manager’s name and a box will appear specify the manager’s details. The report template ‘Person_Detail’ contains the onmouseover event which calls javascript function ARIA_DETAIL defined in aria.js file

Page 0 -> Region – Quick Search

Page 2 -> Region – Views

Page 2 -> Region – Employee HR Details.

This look and feel coming from the report template ‘Person_Detail’




Page – 3 – Organization Chart Click Create Page



Specify Page Name & Title, click next




Click next

Click finish

Click in edit page





Navigate to HTML Header attribute and enter the HTML Header (available as Code: Page-3-1 in AriaLabSupplement.txt). Click Apply Changes

Click on security tab and change authentication to "Page is Public"




Click on help tab and specify the page help (available as " Code: Page-3-2 " in AriaLabSupplement.txt). Click apply changes

Click on create under Regions

Select Region type, click next





Specify Source, click on create list region






Select report implementation type, click next





Specify source (available as " Code: Page-3-3 " in AriaLabSupplement.txt), click next

Specify report attributes, click create region






Select report implementation type, click next


Specify source (available as " Code: Page-3-4 " in AriaLabSupplement.txt), click next





Click on the region name to edit the region attributes

Select the source attribute and specify region error message. Click apply changes Unable to display manager information. #SQLERRM#




Click on create under regions to create a new region

Specify the region type, click next

Specify report implementation type, click next





Specify region source (available as " Code: Page-3-5 " in AriaLabSupplement.txt), click next





Click on report link for first region "Manager" under regions

Select layout and pagination tab and change pagination scheme to "No Pagination Selected"




Click on Messages tab and remove all the messages. Click apply changes

Repeat the above two steps for other regions "Employee" & "Reports" also Click on create under computations

Specify the item location, click next





Specify computation, click next SELECT forward_name FROM aria_current WHERE person_id = nv('AI_PERSON_ID') AND current_flag = 'Y'

Click create





Select the process type, click next




Select session state process type, click next

Specify the process attributes, click next




Specify process, click create process

Click on create icon under branches






Specify branch condition, click create branch

Click on create icon under branches to create a new branch




Select branch point and type, click next


Click create branch




Testing Page 3 Run the application

Type " Eleni " in the search box and press search button. In the search result click on the employee name




Click on Organization Chart

Organization chart is coming from page 3 that you created




Page 3 -> Region – Views

Page 3 -> Region – Manager

Page 3 -> Region – Employee

Page 3 -> Region – Reports

Look and feel for all these regions coming from the

report templates attached to the reports




Page – 18 – Relate Click on create page







Specify tab, click next

Click finish

Click edit page




Click on no besides authorization

Change authentication to Page Is Public. Click Apply Changes


Specify region type, click next





Specify region source, click create list region






Specify HTML region container type, click next


Specify region source, click create region


Click on region Relate to edit the region attribute

Navigate to Header and Footer tab and specify region header. Click on apply changes <div style="width:600px;">Enter criteria by which to search for an employee. Clicking on a resulting employee will return a screen displaying the organizational relationship between that employee and &AI_FORWARD_NAME..</div>




Specify region source, click create region






Specify report implementation type, click next





Specify region source (available as " Code: Page-18-1 " in AriaLabSupplement.txt), click next






Click on Report to modify the report attributes

Select column attributes tab and change the report column headings and the order in which they appear.




Click on edit icon besides column REVERSE_NAME

Select link tab and specify the link details. Click apply changes




Click on create under items

Specify item type, click next







Click create item





Select a region for the button, click next

Specify button position, click next




Specify button attributes, click create button







Specify computation, click next replace(upper(:P18_RELATE_TO_FIND), '@ORACLE.COM')

Click create




Click on create under validations

Specify the validation level, click next

Specify the item to be validated, click next




Select a validation method, click next

Specify validation sequence and name, click next

Specify validation and error message. click next




Click create






Specify process details, click create process






Specify branch target, click next





Testing Page 18 Page 18 & 19 will be tested together




Page – 19 – Relation Click on create page







Click next

Click finish

Click edit page




Click on No besides authorization

Change authentication to Page is Public. Click apply changes







Specify region source, click create region aria_api.relationship_html(:AI_PERSON_ID, :AI_RELATE_TO_PERSON_ID);




Click on region name to edit the attributes of the region

Select Header and Footer tab and specify the header and footer attribute. Click Apply Changes







Specify computation, click next

Specify computation condition, click create




Testing Page 15 & 16 Run the application

Type % in the search box and click search. Click on an employee name (e.g. “Sundar”)

Click on Relate .. (Clicking on relate will take you to page 18)




Enter the name of the person to which you want to relate the person selected in previous step (e.g. “Gerald”. Click search. All the employees whose name matches with the search string will be displayed. Click on the name of the employee to which you want to relate the person to.

Click on “Gerald” name will take you to page 19 where the relationship between “Sundar” & “Gerald” will be displayed graphically

Page 18 -> Region - Relate

Page 18 -> Region – Search Results New




Page 19 -> Region – Relation. This entire region is constructed from the database procedure aria_api.relationship_html




Page – 80 – Management Chain Click on create page







Click next

Click finish

Click edit page


Click on edit page attribute icon

Select HTML Header tab and specify the HTML Header. <style> .orgManager td{text-align:center;border:2px #CCCCCC solid;font-size:11pt;padding:2px;} .orgManager td a{display:block;} .orgManager td.dashed{border:2px #ccccCC dashed;} </style>

Select Security tab. Change the authentication to “Page Is Public”. Click apply changes



Specify region source (available as " Code: Page-80-1 " in AriaLabSupplement.txt), click create region

Click on “Relation” region to edit the attributes

Select Header and Footer tab, specify Region header and footer. Click Apply Changes




Testing Page 80 Run application

Type % in the search box and click search. From search output, click on any name




Click on Management Chain (clicking on Management Chain will take you to page 80)

Management Chain from the employee you selected in the previous step will be displayed to the top management.




Page 80 -> Region – Relation. This entire region is constructed from the database procedure aria_api.relationship_html




Page – 6 – Advanced Search Click create page



Specify page name, click next




Click next

Click finish

Click edit page




Click on no besides authorization

Change authentication to “Page Is Public”, click apply changes

Click on create icon under regions




Click on the region name to edit the region attribute

Click on header and footer attribute. Specify the region header, click apply changes Queries are case insensitive, use % as a wild card

Click on create under regions to create another region

Select region type as ‘Report’, click next




Select report type as ‘SQL Report’, click next


Specify the region source (available as " Code: Page-6-1 " in AriaLabSupplement.txt). Click next





Specify condition type and Expression 1, click create region v('P6_LAST_NAME') is not null or v('P6_FIRST_NAME') is not null or v('P6_TITLE') is not null or v('P6_EMAIL') is not null or v('P6_WORK_PHONE') is not null or v('P6_CONTACT_INFO') is not null or v('P6_COUNTRY') is not null or v('P6_ORG') is not null




Click on create icon under region to create a new region






Specify region source, click next htp.p('elap='||to_char((dbms_utility.get_time - wwv_flow.g_package_instantiated ) * .01,'999990.00'));




Specify the region condition, click create region P0_QUICK_FIND






Select text control display type, click next

Specify Display position and name, click next





Click on create item




Repeat the above steps to create the following items with the following difference (For all other attributes please select the value as specified above)

Item Name Sequence Label Field Width

Begin on a New Line

P6_LAST_NAME 20 Last Name 15 No P6_TITLE 30 Title 15 Yes P6_COUNTRY 40 Country Code 5 No P6_EMAIL 50 E-Mail 15 Yes P6_WORK_PHONE 60 Work Phone 15 No P6_CONTACT_INFO 70 Contact Info 40 Yes

Click on create icon under items to create one more item


Select popup list of value type, click next





Specify list of values, click next select reverse_name a, reverse_name b from aria_current order by 1





Click on create item




Run the page and the page should like the following at this stage

Click on Edit Page 6 to go back to page definition

Click on create under Buttons

Select region for the button, click next




Select button position, click next

Specify button attributes, click next




Select button template, click next

Specify display properties, click next

Specify branching, click create button.




Repeat the above steps to create another button with following changes (rest of the attributes will remain the same as specified above)

Button Name

Button Label

Action Sequence Branching Target

Clear Cache

CLEAR Clear Redirect to URL without submitting page 20 6 6 FIND Find Submit Page and Redirect to URL 30

Click on create under computations in page rendering Section

Specify the Item location, click next






Specify condition, click create




click next (specify nothing under computation)

Click create





Select validation level, click next

Select validation method, click next




Select PL/SQL validation type, click next


Specify the validation and error message, click next




:P6_CONTACT_INFO || :P6_COUNTRY || :P6_EMAIL || :P6_FIRST_NAME || :P6_LAST_NAME || :P6_ORG || :P6_TITLE || :P6_WORK_PHONE is not null


Click on create under processes to create a process




Select the process type, click next

Specify process conditions, click create process





Specify point and type, click next





Specify the branch condition, click create branch

Click on create icon to create another branch condition

Select point and type, click next

Specify the target, click next




Click on create branch




Testing Page 6 Run the application

Click on advanced search

Clicking on advanced search will run page 6. Enter any search criteria and click on find button. The search output will be displayed.




Page 6 -> Region – Advanced Search

Page 6 -> Region – Results




Page – 17 – Update Employee Info Intro Click on create page








Click finish

Click edit page


Specify region source, click next <img src="/i/alert_warning.gif" />You are properly authorized to use this system however we are unable to find your record. This reflects an error in our database of employee information. Instructions on how to get your data updated are provided below.





Specify report type





Specify region source (available as " Code: Page-17-1 " in AriaLabSupplement.txt), click create region




Click on region Your HR Data to edit the region

Select header and footer tab and specify the region header. This report shows data that is maintained by HR.

Click on report attributes and select column attribute tab. Change heading type




Select layout and pagination tab and change the report template. Modify the attributes and click apply changes






Specify computation details, click next

Specify computation, click next aria_api.get_person_id_by_account(v('USER'))





Click on computation to edit the attributes

Select source tab and specify the computation error message. Click apply changes Unable to compute person ID, given user name "&USER".




Specify computation, click next SELECT forward_name FROM aria_current WHERE person_id = nv('AI_PERSON_ID')





Click create branch




Test Page 17 Run the application

Click on Edit my information

As page 17 is not accessible to public, it will first take you to the login screen. Logon to the application using the usernames that you created in earlier steps.




Once you logon as SKING, the record of SKING will be displayed which can then be edited.

Page 17 -> Region – Your HR Data

Page 17 -> Region – Edit &AI_FORWARD_NAME.




Page – 8 – Update Extended Information (secure) Click create page






Select schema, click next

Specify the table name, click next

Specify page and region attributes, click next

Click next




Specify primary key, click next

Specify the source for primary key, click next

Select the columns, click next




Specify the process options, click next




Specify branching

Click finish

Click edit page

2




Click on title under page

Change title

Click on help tab specify help text. Click apply changes Add extra information such as a cell phone, a pager number, perhaps a link to web site.


Click on region name to edit the region attributes

Select header and footer tab. Specify region header, click apply changes Enter additional information to be displayed on your &PRODUCT_NAME. page. For example you could enter a description of Cell Phone, and a value of 212-867-5309.



Specify display attributes, click next. (The sequence number of this region should be lower than the sequence number of the other region) Edit &AI_FORWARD_NAME.


Click on edit all under Items




Modify the changes to the item attributes as shown below

Click on item P8_TIME_ZONE to edit the attribute of the item




Under name tab change display type

Select LOV tab and specify LOV attributes. Click > to edit the attribute of next item (i.e. P8_PERSON_ID)

Select name attribute tab and modify display as attribute. Click >




Change the ‘Display as’ attribute of item P8_PICTURE_URL. Click > to edit the attribute of next item (i.e. P8_PHONE1_DESC)

Select Label tab and modify horizontal / vertical alignment to ‘Above’.

Click on Element tab and change the Horizontal / Vertical Alignment to ‘Left Top’. Click > to edit the attribute of the next item (i.e. P8_PHONE1_DATA)

Under Element tab change the value of Horizontal / Vertical Alignment attribute to ‘Left Top’




Select Label tab and change the attribute Horizontal / Vertical Alignment to ‘Above’. Click > to edit the attribute of the next item.

Repeat the steps above (i.e change the label alignment and element alignment) to change the attributes of following items. Click on apply changes for the last item P8_PHONE1_TYPE P8_PHONE2_DESC P8_PHONE2_DATA P8_PHONE2_TYPE P8_PHONE3_DESC P8_PHONE3_DATA P8_PHONE3_TYPE P8_PHONE4_DESC P8_PHONE4_DATA P8_PHONE4_TYPE P8_PHONE5_DESC P8_PHONE5_DATA P8_PHONE5_TYPE Under items click on item ‘P8_PHONE1_TYPE’ to edit the attribute of the item




Select name tab and change display as attribute to ‘Select List’

Select LOV tab and specify the list of value. Click apply changes




Repeat these steps for the following items also P8_PHONE2_TYPE P8_PHONE3_TYPE P8_PHONE4_TYPE P8_PHONE5_TYPE Run the page. The page should now look like this. Click on "Edit Page 8" to go back to page definition

Click on create icon under computations under Page Rendering

Select item location, click next

Specify item and computation details




Specify computation, click next &AI_PERSON_ID.

Click create





Select process type, click next




Specify process attributes (ensure that this process has the lower sequence number than the other process Fetch Row from ARIA_UPDATABLE_DATA), click next

Specify the process (available as " Code: Page-8-1 " in AriaLabSupplement.txt), click create process






Specify process attributes, click next. (Ensure that this process has the lowest sequence number from all other processes)




Specify process (available as " Code: Page-8-2 " in AriaLabSupplement.txt), click create process (This process will ensure that the employees can edit only their own details and not the details of any other employee)

Click on create under validations. A validation will be created to ensure that users are not entering any " javascript " or " img " tag in the contact information

Specify the validation level, click next




Specify validation method, click next

Specify the type of PL/SQL validation, click next





Specify validation source (available as " Code: Page-8-3 " in AriaLabSupplement.txt). Click next.

Specify condition. Click create




Click on process reset page under processes

Click delete to delete the reset page process. (This is process is usually used to clear the cache when the records are deleted. Since we are not providing any delete option to users, this process is not required)







Specify branch condition, click create branch. (The branch sequence number should be lower than the existing branch sequence number)





Click on Edit my information




As page 17 is not accessible to public, it will first take you to the login screen. Logon to the application using the usernames that you created in earlier steps.

Once you logon as SKING, the record of SKING will be displayed which can then be edited. Click on Contact Information which will call page 8




Edit the information and click apply changes. Pressing apply changes will take you back to page 1. Navigate to the same screen again and ensure that the information you entered is getting displayed.

Once you are back on page 8 again, enter " javascript " in the second field and press apply changes. The validation created on the page will display an error message.




Page – 15 – Update Picture (secure) Click on create page


Specify page attributes





Click next

Click finish

Click edit page





Click on configuration tab and specify the build option

Click on help tab and specify the help text. Click apply changes Your detail page provides for one optional photo. You can use this page to upload a new photo.







Specify source, click create list region






Specify HTML region container type


Click next




Specify condition, click create region SELECT * FROM aria_updatable_data WHERE person_id = :AI_PERSON_ID AND picture_url is not null




Click on create icon under regions


Click HTML region container type



Specify source, click create region To show image without an distortion the image height should be 160px. You can replace your existing photo by uploading a new photo. Click the browse button to upload a photo from your hard drive.


Specify button region, click next





Specify button template





Specify branching, click create button








Specify button template, click next




Click on create icon under buttons







Specify button template


Click branching, click create button






Specify display only type, click next



Specify source, click next return '<img src="'||apex_util.get_blob_file_src('P99_BLOB_CONTENT',:AI_PERSON_ID)||'" />';




Click on create icon under items







Click create item




Specify process, click create process if nvl(aria_api.get_person_id_by_account(v('USER')),'1') != nvl(v('AI_PERSON_ID'),'2') then raise_application_error (-20001,'No privilege for attempted operation.'); end if;


Specify validation level, click next




Specify item, click next

Specify validation method, click next





Specify validation, click next You must specify a photo file from your hard drive before clicking the "Upload Photo" button.






Specify process, click next aria_image.remove(:AI_PERSON_ID);

Specify messages, click next Successfully deleted image. Failed to delete image from repository because of error "#SQLERRM#"




Specify when button pressed condition, click create process





Testing Page 15 This page will be tested together with page 16.




Page – 16 – Approve Image (secure) Click on create page








Click finish

Click edit page




Specify region source, click create region Edit &AI_FORWARD_NAME.








Specify region source, click create region If this image is the image you would like to make your current image then press the “Save This Picture” button.


Specify region source, click create region <ol> <li>Identify file containing your photo.</li> <li style="font-weight:bold;">Validate the uploaded image is proper.</li> </ol>



Specify display only item type, click next






Specify item source (available as " Code: Page-16-1 " in AriaLabSupplement.txt), click next








Specify process (available as " Code: Page-16-2 " in AriaLabSupplement.txt), click next




Specify messages, click create process







Specify process, click next aria_image.add ( p_person_id => v('AI_PERSON_ID'), p_filename => v('P15_PHOTO') );




Specify messages, click next

Specify process condition, click create process

Testing Page 15 & 16




Run the application

Click on edit my information

Logon to the application




Click on photo (clicking on photo will call page 15)

Locate the picture on your PC and click upload photo (clicking on upload photo will take you to page 16)




Click on save this picture

Once you save the picture, it will take you back to page 2 where now you can view the picture. Click on edit my information again to delete or change the photo

Page 16 -> Region - Information

Page 16 -> Region - Process

Page 16 -> Region - Confirm your New Photo (Step 2 of 2)

Page 16 -> Region - Banner

Page 15 -> Region - Upload a New Photo (Step 1 of 2)




Click on photo

You can now delete the photo or upload a new photo




Page 15 –> Region - Your Current Aria People Photo




Page – 11 – Search Help Click Create Page







Click next

Click finish

Click edit page




Click on No besides authorization

Change authentication to " Page Is Public ". Click apply changes

Click create under regions



Specify the multiple HTML region title and template. Click on create regions

Click on first region name to modify the attributes of the region

Go to source attribute and specify region source. Click apply changes Enter your search criteria in the field above and press return. Search any part of: <ul>

<li>Last Name</li> <li>First Name</li> <li>Maiden Name</li> <li>userid</li> <li>Last 4 digits of work phone</li> </ul>

Click on the second region name to modify the attributes of the region

Go to source attribute and specify region source. Click apply changes How can I correct my data? The data in the &PRODUCT_NAME. system comes from various sources. If you find something that you believe is incorrect, it generally needs to be fixed at the source. We cannot fix the data on &PRODUCT_NAME. because it is only a copy of what is found elsewhere. Fixing it on &PRODUCT_NAME. would be futile because the next refresh would "unfix" it. Virtually all of the information in this system can be modified by you or your manager in the HR system</a>. This includes, office location, cost center, title, phone numbers, and more. If, after you have changed your information in the HR system, you still believe that it is incorrect, please wait until the next refresh (typically the next

day) to see if &PRODUCT_NAME. reflects the change. If it is still incorrect, please feel free to contact us. To modify information that is stored on &PRODUCT_NAME. Some of the information is stored on &PRODUCT_NAME. and maintained by you. This includes your Photo, additional contact information, or a personal profile. This information can be modified <a href="f?p=&APP_ID.:17">here</a>.

Click on the third region name to modify the attributes of the region

Go to source attribute and specify region source. Click apply changes &PRODUCT_NAME. refreshes each morning at 1:00am Eastern/US. Note that since the HR Database is also a warehouse that refreshes from other sources, the data that &PRODUCT_NAME. gets from the HR Database will only be as recent as its last refresh for a given country. The date of the last time &PRODUCT_NAME. refreshed its data is listed at the bottom of every page.

Click on the fourth region name to modify the attributes of the region

Go to source attribute and specify region source. Click apply changes 1: &PRODUCT_NAME. does not maintain any HR data, we simply pull data from the HR database. Please check the HR Database first to see if your data is correct there. 2: If your data is not correct in the HR Database, please file a Service Request. 3: If the data is correct in the HR database but not correct in &PRODUCT_NAME., please file a request against &PRODUCT_NAME..



Click on create icon under branches

Specify the branch point and type, click next





Click on create branch





Click on Help (This will call page 11)

The following help page will be displayed




Page – 400 – Palm Search Click on create page


Specify report type, click next





Specify tabs, click next

Specify SQL Query (available as " Code: Page-400-1 " in AriaLabSupplement.txt), click next





Click finish

Click edit page




Click on edit page attributes icon to edit the attributes

Select display attributes tab and change the page template and title.

Select security tab, change authentication to “Page is Public”.

Select help tab. Specify the the help text, click apply changes Enter search conditions then press the Find button. Use the "%" for wildcards. Searches are case insensitive. The first 100 rows that meet your search criterion will be displayed.


The profile search box queries unstructured data entered by users into their aria Profile section. Similarly, the Contact search box queries unstructured data entered into people's Contact Information section. All other data elements query structured data. The profile attribute can include "and" and "or" operators. Use the synonyms checkbox to include synonyms for profile search terms. Wildcards are not supported for the profile attribute. If you do not use a wild card for a structured attribute (any attribute except profile) then the search looks for an exact (case insensitive) match.

Click on region name to edit the region attributes

Select conditions tab and specify region condition. Click on Apply Changes





Specify text control display type, click next






Click create item





Specify process details and condition, click create process

Testing page 400 Click on run button to run the page




Enter a search condition and click Go. All the employee names having the search string will be displayed.

Page 400 -> Region - Results

Page 400 -> Region - Search




Conclusion This finishes step-by-step guide to create Aria People application. We sincerely hope that you enjoyed creating the application and it helped you in understanding how applications are developed in Oracle Application Express. If you have any comment, feedback or suggestions do send a mail to [email protected] with “Aria People Application” in your subject line. If you notice any error in this step-by-step guide, do let us know so that we can make corrections in the document. If you are finding it difficult to understand the different components of the application in this guide and why certain things were done in a certain way, we will suggest you to consider taking our training courses in Oracle Application Express. For beginners we will build a solid foundation by explaining the individual components of Oracle Application Express and then will move on to explain how to exploit the advanced features of Oracle APEX. In our training program, we have also come up with exhaustive hands-on lab exercises with each topic. We will give you step-by-step instructions on how to build the application using wizards and manually. How to build different components individually and then like the pieces of a jigsaw puzzle put everything together to see the big picture. To learn more about our training programs in Oracle Application Express visit http://www.dbcon.com/courses.html We also offer consulting, application development, remote support, performance tuning, troubleshooting, administration and maintenance of Oracle Application Express. Also if you are interested in hosting your Oracle APEX environment on cloud, we can help you set it up on Amazon AWS. Contact us today at [email protected] Wish you all the best with Oracle APEX Team DBCON ! E-Mail: [email protected] URL: http://www.dbcon.com






http://www.dbcon.com/�

Download - Aria Employee Directory Lookup Application - Step-By-Step Guide to create application in Oracle APEX

Top Related