Cards Customization

 

Cards Customization in Oracle APEX

Introduction

Cards are one of the most powerful UI components in Oracle APEX for presenting information in a clean, visual, and user-friendly way. Instead of displaying data only in traditional reports or tables, card-based layouts help users quickly understand content, compare options, and take actions efficiently.

In this blog, I will explain how Cards Customization is implemented in an Oracle APEX application using a Solutions Catalogue page, and how UI styling and structure improve the overall user experience.

Cards are ideal when:

  • You want to display multiple records visually

  • Each record contains a summary with actions

  • Content needs to be scannable and well-organized

  • UI needs to look modern and professional

Compared to classic reports, cards provide:

  • Better visual hierarchy

  • Improved readability

  • Enhanced user engagement



Card Layout and Design Structure

Each card is carefully designed to maintain clarity and consistency:

1. Card Header

  • Displays the Solution Name

  • Acts as the main identifier of the card

  • Uses clear typography for visibility

2. Card Body

  • Shows descriptive content such as:

    • Business Owner

    • Solution description

  • Text is kept concise to avoid clutter

3. Metadata Section

  • Uses From / To tags to represent departments

  • Presented as pill-style labels for easy recognition

4. Footer Action

  • “Learn More” link provided on each card

  • Guides users to detailed information

  • Clear call-to-action improves usability

Cards Customization Techniques Used

1. Consistent Spacing and Alignment

  • Uniform card sizes

  • Equal padding and margins

  • Grid-based alignment for a clean layout

2. Subtle Shadow and Borders

  • Cards have soft shadows to create depth

  • Enhances separation between cards

  • Improves visual focus without distraction

3. Typography Styling

  • Headings are bold and prominent

  • Supporting text uses lighter font weight

  • Clear text hierarchy improves readability

4. Tag Styling for Departments

  • “From” and “To” values displayed as badges

  • Helps users quickly understand ownership and flow

  • Improves scannability of information



-----------------------------------------------------------------------------------------------------------------------------

Card Customization in Oracle APEX using HTML

Oracle APEX provides powerful card components that can be fully customized using HTML expressions and CSS. In this implementation, the card layout is structured into three logical sections: Header, Body, and Secondary Content. This approach improves readability, scalability, and user experience while maintaining a professional UI.

1. Card Header – Title and Business Owner

The header section displays the most important information of the card: the solution or project title and its business owner.

HTML Code

<div class="card-header">
  <h2 class="card-title">&PROJECT_TITLE.</h2>
  <div class="card-owner">
    <span class="label">Business Owner:</span>
    <span class="owner-value">&BUSINESS_OWNER.</span>
  </div>
</div>

Explanation

  • &PROJECT_TITLE. dynamically displays the card title.

  • &BUSINESS_OWNER. shows the responsible owner.

  • The header establishes a strong visual hierarchy and ensures key details are visible immediately.

2. Card Body – Description and Department Flow

The body section focuses on describing the solution and illustrating the business flow between departments.

HTML Code

<div class="card-description">
  &DESCRIPTION.
</div>

<div class="card-meta">
  <div class="meta-section">
    <span class="meta-label">From:</span>
    <span class="meta-value">&FROM_DEPT.</span>
  </div>

  <div class="meta-section">
    <span class="meta-label">To:</span>
    <span class="meta-value">&TO_DEPT.</span>
  </div>
</div>

Explanation

  • &DESCRIPTION. provides a concise overview of the solution.

  • The From / To fields visually represent the data or process flow.

  • This layout makes complex workflows easy to understand at a glance.

3. Secondary Content – Technologies, Benefits, and Action

The secondary content section enhances the card by adding supporting details and a call-to-action.

a) Technologies Section

HTML Code

<div class="card-technologies">
  <span class="meta-label">Technologies:</span>
  <div class="tech-icons">
    &TECH_1_ICON.
  </div>
</div>

Explanation

  • Displays technology stack using icons.

  • Improves visual recognition and reduces text clutter.

  • Icons are dynamically populated from the database.

b) Benefits Section

HTML Code

<div class="card-benefits">
  <span class="meta-label">Benefits:</span>
  <div class="benefit-icons">
    &BENEFIT_ICONS.
  </div>
</div>

Explanation

  • Highlights the key advantages of the solution.

  • Uses icons to make benefits more engaging and scannable.

c) Card Footer – Call to Action

HTML Code

<div class="card-footer">
  <a href="#DETAIL_URL#" class="learn-more">Learn More</a>
</div>

Explanation

  • Provides a clear navigation path for users.

  • Keeps the card compact while allowing access to detailed information.

Comments

Post a Comment

Popular posts from this blog

Converting your Spreadsheet into a Cloud App using Oracle APEX

Image
Indian Students List  Spreadsheets are great for storing data, but as data grows, managing, searching, and visualizing it becomes difficult. Oracle APEX makes it easy to transform spreadsheets into powerful, secure, and scalable cloud applications —without heavy coding. In this blog, I share how I converted an Excel spreadsheet into a fully functional Oracle APEX Cloud App , following the official Oracle LiveLabs steps and guidelines . Reference Workshop (Oracle LiveLabs): https://livelabs.oracle.com/ords/r/dbpm/livelabs/view-workshop?wid=631 This implementation closely follows the structure, best practices, and flow explained in the above LiveLabs workshop. What This Blog Covers Using Oracle APEX , I converted an Excel file into a cloud application with: Dashboard Interactive Report Faceted Search Calendar View Map View (India-based data) The data source used is an Excel file containing India School Students List . Now, lets get into a breif where  Step -1 ...
Read more

Building a Wizard-Based Application in Oracle APEX

Image
Oracle APEX Wizard Application In this blog, I’ll walk you through a Wizard-Based Application developed using Oracle APEX , designed to collect user information step by step in a structured, secure, and user-friendly manner. Wizard applications are ideal when data needs to be entered in a specific sequence, ensuring accuracy and improving the overall user experience. Home Page – Wizard Overview Key Highlights: The Home page acts as an introduction to the application and clearly explains the purpose of the wizard. Clean and professional layout Clear explanation of each step in the wizard Visual icons for better understanding A Start button to begin the process Wizard Steps Explained: Step 1: Tax Information Collects the user’s Tax ID for identity validation. Step 2: Bank Details Captures Bank Name, Account Number, and IFSC Code. Step 3: Document Upload Allows users to upload documents like Aadhaar and Passport. Step 4: Review Users verify all entered de...
Read more

Payment Gateway in Oracle APEX using Razorpay

Image
   Razorpay Payment Gateway Integration in Oracle APEX (Step-by-Step Guide) In this blog, I’ll show you how to integrate Razorpay and PayU payment gateways in your Oracle APEX application — similar to my Stripe payment gateway blog. You’ll get step-by-step instructions to implement both gateways, from obtaining API keys to processing payments inside Oracle APEX. 👉 I also have a YouTube video demonstrating the Razorpay integration you can check here: https://youtu.be/T9OyXVbBlPQ YouTube Razorpay Payment Gateway Integration in Oracle APEX Step 1: Create a Razorpay Account Go to https://razorpay.com   and sign up for an account. Navigate to the Dashboard → API Keys . Generate your Test API Key ID and Secret Key (you will replace these with Live keys later). Step 2: Create Required Database Objects Before integration, set up tables and procedures to store order/payment data. Upload your SQL scripts via: SQL Workshop → SQL Scripts → Upload & Run Created page item...
Read more