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.