Vinny Jiménez

Posted on Apr 27

Case Study: Estate CRM — High-Performance UX/UI in Oracle APEX

#uxdesign #productivity #enterpriseapps #realestate

How we transformed a complex real estate workflow into a sleek, high-density productivity tool using native APEX components and intentional design.

Lee este APEX Insight en Español.

Privacy Note: All names, addresses, and property details shown in this case study are synthetic or modified for privacy. No real client data is displayed.

🏗️ Estate CRM Is Becoming a SaaS Product

The system described in this APEX Insight is evolving into a SaaS platform built for real estate professionals who are tired of managing their pipeline through WhatsApp and spreadsheets.

Join the waitlist and be the first to know when we launch early access:

→ Join the Estate CRM Early Access Waitlist

The Real Cost of No System

A real estate agent's workday looks something like this: open WhatsApp, scroll back three days of messages, try to remember if that client from Tuesday already visited the property or just asked about it. Repeat for every lead in the pipeline.

That's not a people problem. That's a tooling problem.

When we designed Estate CRM, that scenario was the baseline. Agents weren't losing deals because they were bad at their jobs — they were losing deals because their "system" was a chat history. The moment a lead went cold or a follow-up slipped, there was no alert, no badge, no signal. Just silence.

The challenge wasn't building a database wrapper. It was building something that thinks ahead of the user — that surfaces the right information before they know they need it.

1. The High-Density "Client" Strategy

The first design decision was moving away from Interactive Reports for the main client pipeline. IRs are powerful, but they feel too spreadsheet-like for managing relationships. Agents scan their leads the same way they scan
WhatsApp — fast, priority-driven, relationship-first.

The Solution: Native Cards with Custom Polish

We used the APEX Cards Region extended with a custom CSS class (est-card) to push it beyond the default aesthetic for client management.

Visual Hierarchy: Client initials or avatars provide instant recognition.
Contextual Metadata: Role (Buyer/Seller) and last contact date are visible at a glance, without opening the record.
Dynamic Badges: Status badges ("Hot Lead," "Active," "Closed") use a semantic color palette. The eye goes to priority first.

Figure 1: High-density client cards — status, role, and contact info visible without opening a record.

The key constraint: the main list must never require a click to answer
"is this lead worth following up on?" If the agent needs to open a record to answer that question, the card failed its job.

2. Proactive Visuals: Semantic Status Badges

The WhatsApp problem has a data equivalent: lack of immediate context. When an agent looks at a pipeline of clients, they shouldn't have to read the fine print to know if a client is a "Hot Lead" or "Cold." The UI should communicate state instantly through color and positioning.

The Database Mapping Logic

Instead of relying on plain text fields, we mapped database states to native APEX Universal Theme modifier classes directly in the SQL source:

SELECT
    c.client_id,
    c.full_name,
    c.role,                 -- Buyer / Seller
    c.status,
    c.last_contact,
    CASE c.status
        WHEN 'HOT_LEAD' THEN 'u-warning'        -- Urgency
        WHEN 'ACTIVE' THEN 'u-success'          -- Progress
        WHEN 'COLD' THEN 'u-color-1'            -- Neutral
        ELSE 'u-color-15'
    END AS status_badge_class
FROM clients c
WHERE c.agent_id = :APP_USER_ID

The status_badge_class column maps directly to the card's Badge CSS Classes attribute in the Page Designer. No JavaScript. No Dynamic Action. The database decides; the UI reflects it.

The same pattern applies to property management: an "Available" listing receives a distinct color from one "Under Contract" — same logic, different table.

💡 Pattern Rule: Visual status mapping belongs in the data layer, not the presentation layer. By generating Universal Theme classes (u-success, u-warning) directly in SQL, you maintain a single source of truth.

3. The Master-Detail-Drawer Flow

Navigating away from a list of 500 properties to check one detail is a
productivity tax. The agent loses scroll position, loses filter context, and has to rebuild their mental model when they return.

The Drawer Implementation

We used the Inline Dialog region with the js-rightDrawer template option.

Page Designer setup:

Create an Interactive Grid or Cards region for the Master view.
Add an Inline Dialog region. Set Static ID to DETAIL_DRAWER.
Set Template Option to "js-rightDrawer."
On the Cards region, add a Dynamic Action on Click of the card link:
- Action: Execute JavaScript
- Code:

     apex.theme.openRegion("DETAIL_DRAWER");

Before opening the drawer, set P1_PROPERTY_ID via a Set Value action so the drawer's query knows which record to load.

Figure 2: The drawer preserves scroll position and filter context.

Figure 3: A smooth, intentional transition reduces cognitive load.

The agent clicks a property, the drawer slides in from the right. Filters and scroll position in the main list are untouched. They close the drawer and continue exactly where they were.

Heavy components — the embedded map, the full contact history — only render inside the drawer. The main list never pays that cost.

4. Integrated External Intelligence (Google Maps)

Forcing an agent to copy-paste an address into a new tab is friction that adds up across a 50-property pipeline.

The implementation is intentionally simple:

-- Dynamic Google Maps URL in the detail query
'https://www.google.com/maps/search/?api=1&query='
    || APEX_UTIL.URL_ENCODE(p.address || ', ' || p.city)
AS maps_url

In the detail view, an Iframe region renders the map inline using the same
encoded URL. The agent gets location context without leaving the application.

Page Designer setup for the Iframe region:

Inside the detail Inline Dialog, add a new Static Content region.
Set Source Type to URL.
Set the URL field to #MAPS_URL# (substitution from the maps_url column in the detail query).
Set the region Template to Blank with Attributes to remove default padding.
Set a fixed height (for example, 300px) in the region's CSS Classes.

Note: Google Maps Embed requires an HTTPS connection. If your APEX instance serves over HTTP, the browser will block the iframe as mixed content.
Ensure your environment is HTTPS before enabling this feature in production.

Figure 4: Location context without leaving the application — no tab switching required.

Lessons Learned

The card hierarchy was wrong on the first build.
We ordered: image → address → price → status. Agents ignored it. After watching two sessions, the pattern was clear: they looked at status first, price second, address third. We reordered the card. Engagement with the list improved immediately. "Design for the scan" means designing for their scan, not a hypothetical one.

The drawer was added in week two, not week one.
The first version navigated to a detail page. Agents kept asking "how do I get back to my search?" One Inline Dialog region and a Dynamic Action replaced a navigation pattern that was silently costing them 30 seconds per lookup.

90% native, 10% intentional.
Every "premium" element in Estate CRM — the aging badge, the drawer, the map — is either a CSS variable extension or a Dynamic Action on a native component.
The custom CSS file is under 80 lines. If you're fighting the Universal Theme to achieve an aesthetic, the design needs a second look, not more CSS.

Conclusion

Estate CRM is proof that enterprise low-code doesn't mean boring UI. The
WhatsApp-scrolling problem wasn't solved with a feature — it was solved with a data model that surfaces urgency, a layout that rewards scanning, and navigation that doesn't punish the user for being curious.

What's your strategy for high-density data in APEX? Do you stick to
reports, or have you made the jump to Cards?

🚀 Work With Me

I help companies design and build scalable enterprise applications on Oracle APEX — from architecture decisions to production-ready UI.

📅 Schedule an Intro Call — Free 30-min consultation.
💼 Connect on LinkedIn — Follow for weekly APEX insights.
𝕏 Follow on X — Quick tips, threads, and case study previews.
📬 Subscribe to the Newsletter — Monthly deep dives delivered to your inbox.

💖 Support This APEX Insight

If you found this APEX Insight helpful, consider supporting my work:

❤️ GitHub Sponsors — Support ongoing work.
☕ Buy Me a Coffee — Fuel the next case study.

Your support helps keep Oracle APEX content free and open for the community. 🚀

DEV Community