How to track geo-location from Oracle APEX

In today’s data-driven world, location awareness has become a cornerstone of modern web and mobile applications. From logistics and field service management to attendance systems and customer engagement, knowing where an event or action occurs adds incredible value to your data insights. 

Oracle APEX, with its powerful integration capabilities and low-code flexibility, allows developers to seamlessly capture and utilize geo-location data directly within their applications—without relying on external tools or complex APIs. By combining HTML5 geolocation features with PL/SQL and APEX components, you can easily track a user’s current position, display it on a map, or even store it. You can find a visual assistance from here.

So, let's walk through the process step by step-

STEP- 1:

Create a blank page using the page creation wizard. Set the page name as "Location Capture". Under the "Navigation" section, set "No" for "Use Breadcrumb" option. Left other properties as it is. Click on "Create Page" button. A blank page will be create and redirect to the new page.

STEP- 2:

Create a new region and set its properties as like below-

        Name:             Location Capture

        Column Span: 3

STEP- 3:

Create 2 page items like P4_LATITUDE and P4_LONGITUDE under the "Location Capture" region which was created in STEP 2. Create a button and set it's properties as like below-

        

        Name                    : BTN_LOCATION_CAPTURE

        Label                    : Capture Location 

        Position                : Close

        Hot                       : Yes (Toggle On)

        Template Options:

                Size              : Small

Create another button and set it properties as like below-

        Name                    : BTN_LOCATION_REFRESH

        Label                    : Refresh Location 

        Position                : Create

        Hot                       : Yes (Toggle On)

        Template Options:

                Size              : Small

                

STEP- 4:

Create a dynamic action under the "BTN_LOCATION_CAPTURE" button which is created earlier. Set it's name like "Capture physical location". Select the true action and set it's properties like-

    

        Action      : Execute JavaScript Code

        Code        : captureLocation()

STEP- 5:

Select the page (At the top of the left side pane) and navigate to the "Function and Global Variables Declaration" properties under the JavaScript section. Open the code editor and paste the below code here-

        function captureLocation() {

            if ("geolocation" in navigator) {

                // Prompt user for permission to access their location

                navigator.geolocation.getCurrentPosition(

                    // Success callback function

                    (position) => {

                        // Get the user's latitude and longitude coordinates

                        const lat = position.coords.latitude;

                        const lng = position.coords.longitude;

                        apex.item("P4_LATITUDE").setValue(lat);

                        apex.item("P4_LONGITUDE").setValue(lng);        

                        // Do something with the location data, e.g. display on a map

                        console.log('Latitude: ${lat}, longitude: ${lng}');

                    },

                    // Error callback function

                    (error) => {

                        // Handle errors, e.g. user denied location sharing permissions

                        console.error("Error getting user location:", error);

                    }

               );

            } else {

                // Geolocation is not supported by the browser

                console.error("Geolocation is not supported by this browser.");

            };

        }

STEP- 6:

Add another region in this page and set it's properties like below-

        Name        : Map

        Type          : Map

        Source > Type: SQL Query

        SQL Query:

                                SELECT TO_NUMBER(:P4_LATITUDE) AS latitude

                                    , TO_NUMBER(:P4_LONGITUDE) AS longitude

                                FROM dual

        Page Items to Submit    : P4_LATITUDE, P4_LONGITUDE

        Start New Row              : No (Toggle Off)

        Geometry Column Data Type: Latitude/Longitude

        Longitude Column         : longitude

        Latitude Column            : latitude

        Static ID                         : location

        Point Objects                  :

                Style                       : Icon

                Icon Source            : Icon Class

                Icon CSS Classes   : fa fa-map-marker

        Fill Color                        : #161010

Select attribute tab immediate next to the region tab in the properties section and set the below properties-

        Background   : Custom

        Standard        : Oracle World Map

        Initial Position and Zoom:

                Type              : SQL Query

                SQL Query   : SELECT TO_NUMBER(:P4_LATITUDE) AS latitude

                                            , TO_NUMBER(:P4_LONGITUDE) AS longitude

                                        FROM dual

        Geometry Column Data Type: Latitude/Longitude

        Inital Longitude Column         : longitude

        Inital Latitude Column            : latitude

STEP- 7:

Create a dynamic action under the "BTN_LOCATION_REFRESH" button which is created earlier. Set it's name like "Refresh location". Select the true action and set it's properties like-

    

        Action      : Execute JavaScript Code

        Code        : apex.region('location').refresh();

STEP- 8:

Create a page process under the before header sub section in the pre-rendering section. Set it's properties like-

        

        Name    : Clear Page

        Type      : Clear Session State

Save the page and run. That's all for today.

        

                            

How to integrate camera with Oracle APEX

Modern business applications are no longer limited to static data entry—they are expected to interact seamlessly with the real world. Imagine capturing an image for identity verification, product tracking, field inspections, or real-time reporting—all directly within your Oracle APEX application.

The good news? You don’t need heavy integrations or third-party tools to achieve this. Oracle APEX provides the flexibility to integrate a device’s camera effortlessly, allowing users to capture and store images in just a few clicks. You can get a visual assistance from here.

In this blogpost, we’ll walk through how to bring camera functionality into Oracle APEX turning your application into a more intuitive, dynamic, and business-ready solution.

 STEP- 1: 

Create a blank page. Set it name as like "Camera Integration".

STEP- 2: 

Add a region. Set it's porperties as like-

        Name: Camera Integration

        Column: 3

        Column Span: 8

STEP- 3: 

Create 3 buttons under this region. Set it porperties like below-

    Button 1:

        Name: BTN_START_CAMERA

        Label: Start Camera

        Region: Camera Integration

        Slot: Edit

        Hot: Yes (Toggle On)

        Button Templete: Text with Icon

        Template Options:

                Size: Small

        Icon: fa-video-camera

    Button 2:

        Name: BTN_CAPTURE_IMAGE

        Label: Capture

        Region: Camera Integration

        Slot: Edit

        Hot: Yes (Toggle On)

        Button Templete: Text with Icon

        Template Options:

                Size: Small

        Icon: fa-camera

Button 3:

        Name: BTN_CLOSE_CAMERA

        Label: Close

        Region: Camera Integration

        Slot: Create

        Hot: Yes (Toggle On)

        Button Templete: Text with Icon

        Template Options:

                Size: Small

                Type: Danger

        Icon: fa-remove

STEP- 4: 

Create another region and set it's properties like below- 

        Name: Camera

        HTML Code: 

                                <div>

                                    <video id="video" width="200" height="140" autoplay></video>

                                </div>

        Template Options:

                Header: Hidden

STEP- 5:

Create another region to display the captured image. Set the region properties as like-

        Name: Captured Image

        HTML Code: 

                                <div>

                                        <canvas id="canvas" style="width:200px; height:140px"></canvas>

                                </div>

        Start New Row: No (Toggle Off)

        Template Options:

                Header: Hidden

STEP- 6:

Create JavaScript function to start camera, capture image and stop the camera. Select the page and open the "Function and Global Variable Declaration" code editor. Paste the below code here-

        function start() { 

var video = document.getElementById('video'), 

vendorUrl = window.URL || window.webkitURL; 

if (navigator.mediaDevices.getUserMedia) { 

navigator.mediaDevices.getUserMedia({ video: true }) 

.then(function (stream) { 

video.srcObject = stream; 

}).catch(function (error) { 

console.log("Something went wrong!"); 

}); 

} 

}

function capture() {

var canvas = document.getElementById("canvas");

var video = document.querySelector("video");

var src;

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

canvas.getContext("2d").drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

/** Code to merge image **/

/** For instance, if I want to merge a play image on center of existing image **/

const playImage = new Image();

   // playImage.src = "path to image asset";

playImage.onload = () => {

const startX = video.videoWidth / 2 - playImage.width / 2;

const startY = video.videoHeight / 2 - playImage.height / 2;

canvas.getContext("2d").drawImage(playImage, startX, startY, playImage.width, playImage.height);

canvas.toBlob() = (blob) => {

const img = new Image();

img.src = window.URL.createObjectUrl(blob);

};

};

const dataURL = canvas.toDataURL();    

const getBase64StringFromDataURL = (dataURL) => dataURL.replace('data:', '').replace(/^.+,/, '');

const base64 = getBase64StringFromDataURL(dataURL);

apex.server.process ( "INSERT_IMG", {

p_clob_01: base64

},{ dataType: 'text',

success: function( pData ) {

apex.message.showPageSuccess('Image Successfully Captured.');

apex.region('display-img').refresh();

}

} );

}

function stop() { 

var stream = video.srcObject; 

var tracks = stream.getTracks(); 

for (var i = 0; i < tracks.length; i++) { 

var track = tracks[i]; 

track.stop(); 

} 

video.srcObject = null; 

}

Click OK button to close the editor.

STEP-7:

Call the start() function in "Execute When Page Loads". This will start your camera when the page load.

STEP- 8: 

Create a dynamic action Under the "BTN_START_CAMERA". Set it's name as "Start Camera". Change it true action from show to "Execute JavaScript Code". In code section call the start() function.

STEP- 9: 

Create another dynamic action Under the "BTN_CAPTURE_IMAGE". Set it's name as "Capture Image". Change it true action from show to "Execute JavaScript Code". In code section call the capture() function. After capturing the image, we need to stop the camera. So, we need to execute the stop() function also.

STEP- 10: 

Create another dynamic action Under the "BTN_CLOSE_CAMERA". Set it's name as "Stop Camera". Change it true action from show to "Execute JavaScript Code". In code section call the stop() function.

STEP- 11: 

Create an AJAX callback process the save the captured image into the database. Navigate to the process tab and select "AJAX Callback". Right click here and select "Create Process".

Select the newly create process and change it properties as like below-

        Name: INSERT_IMG

        PL/SQL Code:

                                DECLARE

                                l_img_id    NUMBER;

                                l_blob      BLOB;

                                BEGIN

                            SELECT NVL(MAX(img_id),0) + 1

                            INTO l_img_id

                            FROM image_capture;

                           l_blob := apex_web_service.clobbase642blob(

      p_clob    => apex_application.g_clob_01

          );

                            INSERT INTO image_capture(img_id, img)

                            VALUES(l_img_id, l_blob);

                            END ;

Click OK.

STEP-12:

Create another region to display the newly captured and saved image. Set the region properties as like below-

        Name: Display Image

        Type: Interactive Report

        SQL Query:

                            SELECT img_id, 

                        '<img width="80px" height="80px" src="'||apex_util.get_blob_file_src('P16_IMG', img_id)||'"/>' AS img

                            FROM image_capture 

        Column: 3

        Column Span: 8

        Static ID: display-img

STEP-13:

Select the "img" column under the interactive report and set the below properties-

        Escape Special Characters: No (Toggle Off)

Save and run the page. That's all. Integrating camera functionality into Oracle APEX is more than just a technical enhancement—it’s a strategic step toward creating smarter, user-friendly, and business-ready applications. From capturing employee IDs and customer documents to streamlining field inspections and product tracking, the possibilities are endless.

By leveraging APEX’s flexibility, you can deliver applications that not only simplify data collection but also enhance user experience through real-time interaction with the physical world. As digital transformation accelerates, this kind of seamless integration empowers organizations to stay ahead, making Oracle APEX a powerful platform for building truly modern applications.

How to create Custom Authentication in Oracle APEX

Authentication is the first line of defense in any application, and in Oracle APEX, it plays a vital role in controlling how users access your system. While APEX provides several built-in authentication schemes, there are scenarios where the default options may not fully align with your business requirements. That’s when Custom Authentication becomes essential.

In this blogpost, I’ll walk you through the step-by-step process of creating a Custom Authentication scheme in Oracle APEX—so you can design a secure, flexible, and application-specific login mechanism tailored exactly to your needs. If you need any visual assistance then you can follow this tutorial.

STEP- 1: 

Create a database table (if not exist) to store application user information. In my case I use this table structure to store user information. You may add/drop column as per your requirements.

    CREATE TABLE APP_USER 

       (    USER_SL NUMBER, 

    USER_NAME VARCHAR2(20), 

    PASS_WORD VARCHAR2(3000), 

    REF_ID NUMBER, 

    USER_TYPE VARCHAR2(10), 

    CREATED_BY NUMBER, 

    CREATION_DATE DATE DEFAULT sysdate, 

    LAST_UPDATE_BY NUMBER, 

    LAST_UPDATED_DATE DATE, 

    USER_ID NUMBER

       ) ;

STEP- 2:

Login you application as developer mode. Open application builder home page and click on the "Shared Components" large button. It will redirct to shared component page. Click on the "Authentication Schemes" link under the "security" section. You will redirect to authentication schemes report page. Click on the "Create" button. Authentication create page will be open. Choose the "Based on a pre-configured scheme from the galary" option from "Create Scheme" type.

Click "Next" button. It will redirect to another page. Set some required properties as shown below-

    Name:                CUSTOM_LOGIN

    Scheme Type:    Custom (Select from drop down list)

    Authentication Function Name: custom_login

    PL/SQL Code:

                            FUNCTION login(

                                p_username      IN  VARCHAR2

                                , p_password    IN  VARCHAR2

                            ) RETURN BOOLEAN

                            IS

                                l_count     NUMBER;

                            BEGIN

                                SELECT COUNT(*)

                                INTO l_count

                                FROM app_user

                                WHERE UPPER(user_name) = UPPER(p_username)

                                AND pass_word        = p_password;

    

                                IF l_count > 0 THEN

                                    RETURN TRUE;

                                ELSE

                                    RETURN FALSE;

                                END IF;

                            END;

                            /

Validate the code and click on the "Create Authentication Scheme" button. You will redirect to the "Authentication Schemes" report page. Here you will see your newly created custom authentication.

STEP- 3:

Click on your custom authentication. You will redirect to authentication scheme edit page. Click on the "Make Current Scheme" button. A popup alert showing you a confirmation message. Click "OK". 

STEP- 4:

Open page no. 9999 (Login Page). Navigate to process tab and select "Login" process.

Change it's properties as like below-

Type:     Execute Code

Location:    Local Database 

Language: PL/SQL

PL/SQL Code: 

                        apex_authentication.login(

                            p_username      => :P9999_USERNAME

        , p_password    => apex_util.get_hash(apex_t_varchar2(:P9999_USERNAME, :P9999_PASSWORD), NULL)

                        );

Validate the code and click "OK".  Save the page and run it. Login with your custom user and enjoy the custom authentication process. 

STEP- 5 (Optional):

This step is not mandatory but it's have a great impact if you implement it. Remove the PL/SQL code from step 2 and create the function in database level. The benefit is to create in database level is- you can call it from many application as per your need. Just open the SQL Editor and paste the below code-

                            CREATE OR REPLACE FUNCTION login(

                                p_username      IN  VARCHAR2

                                , p_password    IN  VARCHAR2

                            ) RETURN BOOLEAN

                            IS

                                l_count     NUMBER;

                            BEGIN

                                SELECT COUNT(*)

                                INTO l_count

                                FROM app_user

                                WHERE UPPER(user_name) = UPPER(p_username)

                                AND pass_word        = p_password;

    

                                IF l_count > 0 THEN

                                    RETURN TRUE;

                                ELSE

                                    RETURN FALSE;

                                END IF;

                            END;

                            /

Compile the code. That's it. Implementing Custom Authentication in Oracle APEX gives you the flexibility to design a login process that goes beyond the built-in options. By tailoring authentication to your specific business rules, you can ensure both security and user convenience.

With the steps outlined in this guide, you now have a clear path to build and manage your authentication logic whether it’s integrating with existing systems, validating against custom tables, or enforcing unique business rules. APEX empowers you to take full control of the authentication process, resulting in applications that are not only secure but also perfectly aligned with organizational needs.

How to maximize screen in Oracle APEX

In modern application development, user experience and screen utilization play a critical role in productivity. Within Oracle APEX, maximizing the available screen real estate can significantly improve how users interact with complex dashboards, forms, and reports. Instead of being confined to default layouts, you can implement techniques to deliver a full-screen, immersive, and distraction-free interface.

In this article, I will demonstrate professional approaches to maximize screens in Oracle APEX helping you design applications that are not only functional but also optimized for clarity, focus, and efficiency. For better understanding you can find a tutorial from here.

STEP- 1:

Login to you application as a developer. Open shared components. Clik on the "Lists" under the "Navigation and Search" section. A new page will be opened showing existing navigation lists. Click on the report's row where showing the "Navigation Bar" under the "Name" column.

Another page (List Details) will be opened with showing the exisiting lists. Click on the "Create List Entry" button. List entry creation page will be open. Enter the following attributes as like shown below-

    Sequence: 9 (Lower then the APP_USER sequence to display the left side of that menu)

    Image/Class: fa-expand

    Attributes: id="full-screen" onclick="openFullScreen(); "

    List Entry Label: &nbsp;

    Target Type: URL

    URL Target: #

STEP- 2:

Open page 0 and create a region. Set it's properties as like below-

    Name: Region Container

    Template:    Blank with Attributes

STEP- 3:

Create a sub region undert then "Region Container". Set it's properties as like below-

    Name: 'JS 1'

    Template:    Blank with Attributes

    Header Text:

                            <script>

                                function replaceIcon() {

                                    var iconElement = document.getElementById('full-screen');

                                    if (iconElement.classList[2] === 'fa-expand') {

                                        iconElement.classList.remove('fa-expand');

                                        iconElement.classList.add('fa-compress');

                                    } else {

                                        iconElement.classList.remove('fa-compress');

                                        iconElement.classList.add('fa-expand'); 

                                    } 

                                }

                                function openFullScreen() {

                                    replaceIcon();

                                    var elmnt = document.documentElement;

                                    if (document.fullscreen) {

                                        closeFullScreen();

                                    } else if (elmnt.requestFullscreen) {

                                        elmnt.requestFullscreen();

                                    } // FOR SAFARI BROWSER

                                    else if (elmnt.webkitRequestFullscreen) {

                                        elmnt.webkitRequestFullscreen();  

                                    } // IE 11

                                    else if (elmnt.msRequestFullscreen) {

                                        elmnt.msRequestFullscreen(); 

                                    }        

                                }

                                function closeFullScreen() {

                                    if (document.exitFullscreen) {

                                        document.exitFullscreen();

                                    } // FOR SAFARI BROWSER

                                    else if (document.webkitExitFullscreen) {

                                        document.webkitExitFullscreen();

                                    } // FOR IE 11

                                    else if (document.msExitFullscreen) {

                                        document.msExitFullscreen();

                                    }

                                }

                            </script>

Click OK to close the editor. Click "Save and Run" button. Enjoy the maximize screen in your application. When you click on the "Expand" icon the screen will looks like-

It will differ from your home page. This is my home page. So, don't worry about it. Let's enjoy.    

Maximizing screen space in Oracle APEX is more than a cosmetic adjustment—it’s a usability enhancement that directly impacts user efficiency. By leveraging these techniques, you can provide your end-users with a cleaner, full-screen interface that supports focus, reduces distractions, and simplifies navigation.

As applications grow in complexity, optimizing every pixel of your workspace becomes essential. With the right implementation, your APEX applications will not only look more professional but also deliver a superior user experience that aligns with modern application standards.