How do I get a CARD display to navigate from one form to another form

 

Introduction
Oracle APEX Cards offer a powerful way to visually display summarized data. But Cards are more than just decorative elements—they can be used to drive navigation and interactivity in your application. One practical use case is setting up a Card to navigate from one form to another, enabling a seamless user journey. In this blog, you’ll learn how to configure a Card so that clicking it takes the user from one form page to another, passing key data between them.

How to Get a Card Display to Navigate from One Form to Another in Oracle APEX

1. Start with Two Form Pages

   • Make sure you have two form pages created in your application.

   • The first form (e.g., Page 10) will contain the Card region.

   • The second form (e.g., Page 20) will display detailed data based on input from the first.

2. Create a Card Region on the First Form

   • Go to Page Designer for Page 10.

   • Add a new region of type Cards.

   • Set the region source to a SQL query that includes the identifier you want to pass to the next form.
     Example:

     SELECT 
       EMPLOYEE_ID,
       FIRST_NAME,
       LAST_NAME
     FROM EMPLOYEES
     

3. Set Card Attributes

   • Under Card Attributes, configure:

     • Title: FIRST_NAME || ' ' || LAST_NAME

     • Subtext or Body: optional, such as EMPLOYEE_ID

   • In the Navigation section, set the card to be Clickable.

4. Define Navigation to the Second Form

   • Under Navigation Target, choose:

     • Target: Page in this Application

     • Page: 20 (or the page number of your second form)

   • Use Set Items to pass a value from the Card to the second form.

     • For example:

       • Name: P20_EMPLOYEE_ID

       • Value: #EMPLOYEE_ID#

5. Configure the Second Form Page (Page 20)

   • Ensure your second form accepts the item P20_EMPLOYEE_ID as a page item.

   • Set up the form’s data source so it filters by the value of P20_EMPLOYEE_ID.
     Example:

     SELECT * 
     FROM EMPLOYEES
     WHERE EMPLOYEE_ID = :P20_EMPLOYEE_ID
     

6. Test the Navigation

   • Run the application.

   • On Page 10, you should see a list of Cards.

   • Clicking on a Card should take you to Page 20, showing the form for the selected employee.

 

Navigating Between Forms Using a Card Display in Oracle APEX

Oracle APEX allows users to create Card Reports, which provide a structured way to display data visually. You can enhance these cards by adding navigation functionality, allowing users to click on a card and be redirected to another form where they can view or edit details.

This tutorial covers how to set up a Card Report that navigates from one form to another.

Step 1: Creating the Source Form

Before setting up the navigation, ensure you have a form page that will serve as the destination.

1. Open Oracle APEX and navigate to your application.

2. Click Create → Page → Form → Form on a Table or View.

3. Select the table that contains the records for your cards.

4. Ensure the form includes a Primary Key item (e.g., ID).

5. Click Next, configure any additional settings, and create the page.

Once the form is created, note the Page Number because you will need it to configure the navigation from the Card Report.

Step 2: Creating a Card Report

1. Open Oracle APEX and navigate to your application.

2. Click Create → Page → Report → Cards Report.

3. Choose the same table or SQL query as the form’s data source.

4. Click Next, then select the Card Attributes such as Title, Body, and Image (optional).

5. Click Create to generate the page.

Now you have a Card Report displaying records from your table.

Step 3: Adding Navigation to the Card

Method 1: Using the Card Action Attribute

1. Open the Card Report in Page Designer.

2. Select the Cards Region in the Rendering Tree.

3. Under the Attributes section, locate the Actions option.

4. Click Add Action and choose Link.

5. In the Action Type, select Redirect to Page in this Application.

6. In Target Page, enter the page number of your Form Page.

7. In the Set Items section, map the primary key (ID) from the card to the form item: 

• Item Name: PXX_ID

• Value: #ID#

8. Click Save and run the page to test the navigation.

Now, when a user clicks on a card, they will be redirected to the Form Page, with the selected record preloaded.

Method 2: Adding Navigation Using a Custom SQL Query

If you are using a Custom SQL Query for the Card Report, you can add a navigation link directly within the SQL.

1. Open the Cards Report in Page Designer.

2. Modify the SQL Query to include a dynamic link column:

SELECT 

    ID, 

    TITLE, 

    DESCRIPTION, 

    IMAGE_URL, 

    'f?p=&APP_ID.:20:&SESSION.::NO::P20_ID:' || ID AS ACTION_LINK

FROM EMPLOYEES

3. In Card Attributes, set Action Type to Link and choose ACTION_LINK as the URL Column.

4. Click Save and test the navigation.

This method ensures that clicking on the card redirects the user while dynamically passing the selected record’s ID to the Form Page.

Step 4: Styling and Enhancing the Card

To make the card look more interactive, apply custom CSS.

1. Go to Shared Components → Themes → Custom CSS.

2. Add the following CSS:

.t-Card-actions a {

    background-color: #0073e6;

    color: white;

    padding: 8px 12px;

    border-radius: 5px;

    text-decoration: none;

    display: inline-block;

}

3. 
   

.t-Card-actions a:hover {

    background-color: #005bb5;

}

4. Save and refresh the page.

This makes the button inside the card more visually appealing.

Step 5: Testing and Best Practices

1. Run the application and navigate to the Card Report page.

2. Click on any card to verify that it redirects to the Form Page with the correct data preloaded.

3. If the form does not show data, ensure that the Page Item (PXX_ID) is properly mapped.

4. For better performance, limit the number of cards displayed per page.

5. Use item substitution to pass additional values if needed.

By following this tutorial, you can create an interactive Card Report that allows users to click on a card and navigate to a Form Page to view or edit details. Whether using Card Actions, Custom SQL Links, or Dynamic Styling, this method enhances the user experience in Oracle APEX.

EXAMPLE:

Cards don’t have links but they can have Actionbuttons.

Step 1 – Create a Card report for the CUSTOMER table

Step 2- Add an action to the CARD region, make it a Type: Button, and name it Edit

 

Step 3  -  Create  link to page 41 and pass the correct values

Step 4- change the button’s appearance if you need to

Save and Browse

 

 

 

Conclusion
Using Cards to navigate from one form to another in Oracle APEX makes your application more interactive and intuitive. This approach lets users quickly access detailed records from summary views with a single click, all while maintaining clean navigation logic. By passing parameters and linking pages through dynamic Card actions, you can create a fluid and engaging user experience with minimal development effort.