Create your first Oracle APEX mobile Apps

Environnement:

  • Oracle Apex 18+ version
  • Oracle Database 9+

 

Mobile Application Design

 

Oracle Application is a framework integrated into an Oracle database. This means that all requests communicate directly with the database. Therefore, all apex applications must have an internet connection in order to communicate with the Oracle database to display the content of the web page.

 

Oracle apps are browser-based web apps, which means we need a browser to run the app. Oracle Apex comes with a built-in theme called Universal Theme which is a responsible theme, no matter what device you are running your app on, the content will be displayed to fit the screen size of the device. Which is great!

 

Technically, you don’t have to create 2 apps. One for the web and another for the mobile. All Oracle Apex web applications can run on mobile. but there is a small downside. The design of the mobile application does not have many of the important features of native mobile applications. Since version 5.8, Oracle Apex has upgraded its Universal Theme with some native mobile app design and features.

 

 

We have the below mobile design components in Apex:

 

  • For reports:
  • List View
  • Column Toggle Report
  • Reflow Report
  • Cards
  • For Menu:
  • Top Navigation Tab
  • For Items
  • Floating Labels
  • Buttons
  • Floating Button

 

 

Is it efficient to use Oracle Apex Framework to build mobile Apps?

 

Pros:

  • Rapid development:
  • Easy to maintain and customize
  • Cost effective
  • Great to launch a minimum viable product  (MVP)

 

 

Cons:

  • Poor UI/UX
  • Missing a lot of native mobile apps features ( access user contact, push notification,…)
  • Although the Universal Theme is optimized for mobile devices, not all components are mobile friendly. For example, interactive reports and interactive grids do not work well in mobile environments. Sometimes, you have to create your own mobile templates and design. You must have advanced knowledge in html5 and css to build your own design.

Create your first mobile Apps

To create a mobile application:
1)Login in Apex Workspace. If you are new in Apex and don’t have a workspace. You can create a free one here https://apex.oracle.com/ .

To log in with :
-Your workspace Name
-Your workspace Username
-And your password

 

 

 

Below is oracle apex development homepage, Click on App Builder Section

2)And then click on create: you have 2 ways to do it. .

 


Dedicated Hosting is designed to provides you with the utmost stability. Cloud Storage reinforces your data with an extra layer of protection by distributing it across various servers. Featuring 99% uptime and the highest performance.

 


3) Click on New Application


4) In the next page, fill out the form

1)Enter your Application Name.
Eg. Mobile Apps
2)You can add a new page in your application. We’re not going to do that just yet, just skip this.
3)Apex framework automatically generated a home page.
4)Some built-in features to add to your app. Skip this now
5)Apex has generated an Application ID and default language. You can change it if you want. I am going to keep this default setting.
Nb: Apex will also generate the login page for you and another page called global page.(see apex documentation about global page)
6)Click on the Create application button.

4) The below picture shows your application design home page. We have 3 default pages that have been created : the home page( with page number 1) , the login page ( with page number 9999) and the global page ( with page number 0)

3) Click on New Application


4) In the next page, fill out the form

1)Enter your Application Name.
Eg. Mobile Apps
2)You can add a new page in your application. We’re not going to do that just yet, just skip this.
3)Apex framework automatically generated a home page.
4)Some built-in features to add to your app. Skip this now
5)Apex has generated an Application ID and default language. You can change it if you want. I am going to keep this default setting.
Nb: Apex will also generate the login page for you and another page called global page.(see apex documentation about global page)
6)Click on the Create application button.

4) The below picture shows your application design home page. We have 3 default pages that have been created : the home page( with page number 1) , the login page ( with page number 9999) and the global page ( with page number 0)

5) Now let’s create 2 other pages.
●One page which will display a list of employees with page number 2. In this page we are going to create an oracle apex Interactive report.

Click on create page button to create a new page

Choose report and click to  the next button

 

Choose Report with Form (this will generate 2 pages, the report page and the form page)

 

Fill the following form: we have 2 pages,

 

  • Report page: named Employee Listhas page number 2. Used to list all employees on the database employee table.
  • Form page:named Employee Details has the page number 3. Used to create , edit and delete an employee.

Click on Next and fill the following Form:

  • Select Create a new navigation menu entry
  • In New navigation menu entry field enter: Employee List

 

  • Source Type: Table
  • Select the schema and then the table ( you can select any table in your schema)

Select the table column you want to display and set the primary key column in the Primary key Column.

We have the below  page 2 design.with report1 region.

Now, let’s see the page preview. Click on the run button.

To login: enter your workspace user and your workspace password.

We have the below web page view.

To simulate mobile device view, press the F12 key on your keyboard.  You can even select on which device you want to run your apps.

Let’s now use the Apex feature for mobile reports.

  • In page 2, Click on the report1
  • Click on region
  • in the type field, select column toggle Report.

run the application again

 

Your business, your systems, and our expertise. Finally, an APEX On-premise support solution that makes sense

The report is not cliquable. You can implement a row link yourself  and link it to the details page 3.

Apex has 2 other reports design templates: Reflow Report and List View that you can explore.

Now let’s take a look at the employee details page 3. Apex uses the Floating template for items in mobile device.

When we run the page 3 by clicking to the IR report from page 2, we have the below

 

  • Now let’s create page 4. Use page number 4.  In this page we are going to display the connected username profile.
  • Create a  blank page

 

The page is created but it is blank for now.  You can display connected user information through floating page Items. We will let you do that.

 

Navigation menu

Actually, we have a web toggle menu, in this section, we are going to create a top navigation menu as in native mobile apps.

Go to the shared component

Select Navigation Menu under navigation section

 

Select the Desktop Navigation menu, and enter an icon for employee List and User profile entry. Menu entries will be displayed as an icon rather than a full label as in mobile we don’t have a lot of space.

Change employee List entry

Change User profile entry, add fa-users in Image/Class


In the shared component , under user Interface, click on User Interface Attribute

Go under navigation menu Tab

 

 

 

Run the apps again to see the result: the menu is now displayed at the bottom of the screen.

Oracle apex mobile apps are quick to develop, but if you want a design that looks like a native mobile app here are some tips:
-you can enhance the universal theme with advanced custom css and html.
-if you need to integrate native app functionality, you can take a look at how to wrap web apps with Cordova/phonegap.
-As data is directly triggered from the database, meaning that the apps data will not be available without network connexion, let’s take a look to apex pwa. With PWa you can cache web apps data like native mobile apps do.
-Avoid APEX complex report like IR and IG
-Avoid APEX built-in PL SQL process. Use Rest api indeed.

Share This
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments