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.

How do I add a navigation button to a CARD

 

Introduction
In Oracle APEX, Cards are a modern and flexible way to present summary information in a visually appealing format. Whether you're showing customer profiles, order summaries, or project status, Cards give users a compact and engaging view of key data. Adding a navigation button to each Card enhances interactivity, allowing users to drill down to detail pages or perform related actions. This blog explains step-by-step how to add a navigation button to a Card in Oracle APEX.

How to Add a Navigation Button to a Card in Oracle APEX

1. Create or Open a Card Region

   • Go to your APEX application and open the page where you want the Cards to appear.

   • Add a new Cards region, or open an existing one.

2. Set the Data Source

   • Use a SQL query or table that includes a unique ID or reference for each row.
     Example:

     SELECT 
       CUSTOMER_ID,
       CUSTOMER_NAME,
       STATUS
     FROM CUSTOMERS
     

3. Configure the Card Attributes

   • Under Card Attributes, set:

     • Title: CUSTOMER_NAME

     • Subtitle or Body: STATUS or any relevant info

   • Enable the Actions section.

4. Add a Navigation Button

   • Under the Actions area of the Card attributes, click + Add Action.

   • Choose Button as the type.

   • For Label, enter the button text, such as "View Details".

5. Define the Target Page

   • Set the Target to a page in your app, such as a detail page (e.g., Page 20).

   • Use a Set Items mapping to pass parameters to the target page.
     Example:

     • Name: P20_CUSTOMER_ID

     • Value: #CUSTOMER_ID#

   • Make sure to use the appropriate column name wrapped with # for substitution.

6. Style the Button (Optional)

   • Choose a Button Template like "Primary" or "Outline".

   • You can also add icons or adjust alignment using the Appearance section.

7. Test the Page

   • Run the page and verify that each Card displays the button.

   • Click the button to ensure it navigates to the correct detail page with the correct context (e.g., passing the correct ID).

Adding a Navigation Button to a Card in Oracle APEX

In Oracle APEX, cards are a great way to display structured information in a visually appealing format. Adding a navigation button to a card enhances user experience by allowing users to navigate to another page, open a modal dialog, or trigger a process.

This tutorial covers how to add a navigation button to a card in APEX, configure it to link to another page, and customize its appearance.

Step 1: Creating a Cards Report

Before adding a navigation button, ensure that you have a Cards Report in your application.

1. Open Oracle APEX and navigate to your application.

2. Create a new Cards Report by selecting: 

• Create → Page → Report → Cards Report

3. Choose a table or SQL query as the data source.

4. Configure the Card Attributes such as Title, Body, and Media.

5. Click Create and save the page.

If you already have a Cards Report, proceed to the next step.

Step 2: Adding a Navigation Button to the Card

Method 1: Using the Card Actions Attribute

1. Open the Cards Report in Page Designer.

2. Select the Cards Region in the Rendering Tree.

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

4. Click Add to create a new action.

5. Choose Button as the action type.

6. Configure the button label (e.g., "View Details").

7. Set the Action Type to Redirect to Page in this Application.

8. Choose the Target Page Number where the button should navigate.

9. (Optional) Pass a parameter by adding Set Items: 

• Item Name: PXX_ID

• Value: #ID# (Replace with the appropriate column)

Click Save and Run the Page to test the button functionality.

Method 2: Adding a Navigation Button via a SQL Query

If you are using a Custom SQL Query for the Cards Report, you can embed a navigation link directly in the SQL.

1. Open the Cards Report in Page Designer.

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

SELECT 

    ID, 

    TITLE, 

    DESCRIPTION, 

    IMAGE_URL, 

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

FROM EMPLOYEES

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

4. Save and test the report.

This method dynamically generates navigation buttons based on the database values.

Step 3: Styling the Navigation Button with CSS

To improve the button’s appearance, 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 stand out with a professional look.

Step 4: Using Dynamic Actions for Custom Behavior

Instead of a direct navigation link, you can trigger a Dynamic Action when the button is clicked.

1. Open Page Designer and select the Cards Report.

2. Click Dynamic Actions → Create.

3. Set Event to Click.

4. Choose Affected Element → Button Selector (.t-Card-actions a).

5. Define the Action (e.g., Redirect to Page, Open Modal, or Show Message).

6. Save and test the behavior.

This approach is useful for adding confirmations or pop-ups before navigation.

Step 5: Testing and Best Practices

1. Run the page and click the button to ensure it navigates correctly.

2. Use item substitution to pass dynamic values between pages.

3. Ensure accessibility by using appropriate button labels and colors.

4. Optimize performance by limiting SQL query complexity.

Adding a navigation button to a card in APEX enhances interactivity and user experience. Whether using built-in Card Actions, SQL-based links, CSS styling, or Dynamic Actions, you can customize the button to fit your application’s needs.

EXAMPLE:

Step 1 – Create an “Action” in the card (Note: this is not the same as an Dynamic Action) 

Step 2- make the Action Type “Button.

Step 3 Set the redirect page information.

• Set Page to the page number that you want to navigate.

• Set Name to the item in page 8 that will get some data from this current page.

• In this case P8_ID is the item on page 8 that holds the value for the  key identifier of the table.

• Set Value to the value that you want to pass into the item in page 8.

In this case is “&ID.” The “&” at the front of the value and the “.” At the end of the value are required.

The card should look something like this:

 

Conclusion
Adding navigation buttons to Cards in Oracle APEX makes your UI more dynamic and functional. It empowers users to easily explore detailed records from a summarized card view, enhancing the overall user experience. With just a few configuration steps, you can link Cards to relevant pages, pass parameters, and create a smooth navigation workflow that aligns with modern web application design.