OBIEE Dashboard Navigation — Current vs. Proposed

Mockup based on the current WSU Classic dashboard. The proposed version keeps the same page structure and content, but makes pages that contain subpages discoverable before selection and only displays the second navigation row when it is actually needed.

Current OBIEE navigation

Applied Not Denied or Admitted Admitted Not Confirmed Details Confirmed (Matriculated) Details Active Students Graduation Details Active Student Details by College Active Students by Campus and Program Plan Committee Service – Graduated Committee Service – Current 4+1 Application ⚙ ?
Active Student Details Current Student CITI Status
Program Category
Maps to Degree or Certificate
Program Headcount
Graduate Programs
Doctor of Education (Ed.D)
48
Doctor of Philosophy (Ph.D)
1,251
Graduate certificates
84
Master’s degree (excluding MBA, MHAL)
928
Non-degree, & undecided students
24
Term 2026 Fall ▾
Campus –Select Value– ▾
Academic Program Code –Select Value– ▾
Program Status –Select Value– ▾
Program Admit Term –Select Value– ▾
College –Select Value– ▾
Academic Program –Select Value– ▾
Service Indicator Code –Select Value– ▾
Program Category Graduate Program ▾
Dept/School –Select Value– ▾
Academic Plan Code –Select Value– ▾
Form of Study ENRL ▾
Term
Program Admit Term
WSU ID
Last, First Middle Name
Official Email Address
Academic Career
Campus
College
Dept/School
Academic Program Code
Academic Program
Academic Plan Code
Academic Plan

In the current style, there is no visible indication that “Active Students” contains subpages until the parent is selected. The second row also resembles ordinary page text, and everything sits at the same small size, so the two levels read as one flat strip.

Proposed navigation — parent with subpages selected

Applied Not Denied or Admitted Admitted Not Confirmed Details Confirmed (Matriculated) Details Active Students ▾ Graduation Details Active Student Details by College Active Students by Campus and Program Plan Committee Service – Graduated Committee Service – Current 4+1 Application ⚙ ?
Active Student Details Current Student CITI Status
Program Category
Maps to Degree or Certificate
Program Headcount
Graduate Programs
Doctor of Education (Ed.D)
48
Doctor of Philosophy (Ph.D)
1,251
Graduate certificates
84
Master’s degree (excluding MBA, MHAL)
928
Non-degree, & undecided students
24
Term 2026 Fall ▾
Campus –Select Value– ▾
Academic Program Code –Select Value– ▾
Program Status –Select Value– ▾
Program Admit Term –Select Value– ▾
College –Select Value– ▾
Academic Program –Select Value– ▾
Service Indicator Code –Select Value– ▾
Program Category Graduate Program ▾
Dept/School –Select Value– ▾
Academic Plan Code –Select Value– ▾
Form of Study ENRL ▾
Term
Program Admit Term
WSU ID
Last, First Middle Name
Official Email Address
Academic Career
Campus
College
Dept/School
Academic Program Code
Academic Program
Academic Plan Code
Academic Plan
1. Parent is discoverableTop-level pages that contain subpages are bold and receive a small downward chevron. The cue remains visible even when that parent is not selected.
2. Hierarchy is explicitThe subpage row has its own background and an “Active Students” group label, visually separating second-level navigation from the top-level page bar.
3. Active subpage is obviousThe selected subpage has a bordered white tab and WSU crimson text rather than relying only on a slight font-weight change.

Proposed navigation — page with no subpages selected

Applied Not Denied or Admitted Admitted Not Confirmed Details Confirmed (Matriculated) Details Active Students ▾ Graduation Details Active Student Details by College Active Students by Campus and Program Plan Committee Service – Graduated Committee Service – Current 4+1 Application ⚙ ?
Graduation Details dashboard content

When a top-level page without subpages is selected, the second navigation row disappears entirely. “Active Students ▾” remains bold with its chevron, so users can still see that additional navigation is available there.

Recommended behavior: do not reserve an empty subpage row. Use the chevron and font weight to advertise which top-level pages contain subpages; show the second row only when one of those parents is selected. This preserves screen space and gives users a persistent cue without using color alone to communicate structure.

Implementation Notes for Oracle Analytics Administrator

The intent is to create a new optional Classic dashboard style, rather than modify WSUCustom. Dashboard authors could then opt into the enhanced navigation through Dashboard Properties.

Confirm before building

Two of these are gating: the design only works as a pure-CSS style if OBIEE exposes the right hooks. Please verify items 1 and 2 in browser developer tools before any build work.

  1. Gate — “has subpages” hook (.HAS-SUBPAGES). The chevron-before-selection cue is the centerpiece of the proposal, and it assumes OBIEE stamps a class or attribute on a top-level page that owns subpages even when that page is not selected. Please confirm whether such a hook exists. If it does, the chevron is pure CSS and we ship as designed. If it does not, the cue cannot be done in CSS alone and would require either per-dashboard manual tagging or a small JavaScript injection to add the class — a heavier maintenance path we should discuss before committing.
  2. Gate — subpage row wrapper (.SUBPAGE-NAV-WRAPPER). Confirm the wrapper element OBIEE renders around the second-level row (the one holding Active Student Details and Current Student CITI Status) and substitute its real selector.
  3. Confirm these are true subpages, not tab wrapping. Classic dashboards also wrap page tabs onto a second row automatically when there are too many to fit on one line. Because “Active Students” appears to act as a parent, this looks like genuine sub-navigation — but please verify the second row is real subpage structure and not overflow, since the CSS targets one and not the other.
  4. Chevron semantics (minor, by design). A downward chevron (▾) usually implies a dropdown that expands on click. Here, clicking the parent navigates and reveals a horizontal second row. This is an accepted tradeoff — the chevron still reads as “more here” — noted so it is a deliberate choice, not an oversight.
  5. Content fix, outside this style. The live subpage label reads “Current Student CITI Staus” and should be “Status.” That is a fix in the dashboard page itself, not in this CSS, but worth correcting alongside the navigation work.

Administrative path

Custom resources
Oracle Analytics custom resources → res → create s_WSUNavigation → master → custom.css

Style inheritance
Oracle Analytics custom resources → res/filemap.xml → add s_WSUNavigation to the existing style hierarchy, inheriting from the current WSU style.

Author selection
Dashboard → Edit Dashboard → Tools → Dashboard Properties → Style → WSUNavigation

The new style should inherit the existing WSU styling and contain only the navigation overrides below. The exact existing WSU hierarchy in filemap.xml should be preserved.

Example filemap.xml addition

<FileMap>
  <Styles>
    <Hierarchy>s_Redwood/s_WSUCustom/s_WSUNavigation</Hierarchy>
  </Styles>
</FileMap>

The hierarchy above is illustrative; use the existing WSU base hierarchy and append s_WSUNavigation.

s_WSUNavigation/master/custom.css

/* ==========================================================
   WSU CLASSIC DASHBOARD NAVIGATION
   Optional style: s_WSUNavigation
   Brand crimson: #981E32 (WSU Pantone 202)
   ========================================================== */


/* ---------- TOP-LEVEL DASHBOARD PAGES ---------- */

table[id^="dashboard_page_"][id$="_tab"] td,
table[id^="dashboard_page_"][id$="_tab"] div,
table[id^="dashboard_page_"][id$="_tab"] span {
    font-size:12px !important;   /* raised from 11px for legibility */
}

/* Normal top-level page */
.secondaryTabEnabled {
    font-weight:400 !important;
    color:#1a1a1a !important;    /* darker than before for contrast */
}

/* Selected top-level page */
.secondaryTabSelected,
.masterTabBarTabSecondarySelected,
.tabContainerSelected {
    font-weight:700 !important;
    color:#981E32 !important;
}

.secondaryTabSelected td,
.secondaryTabSelected div,
.secondaryTabSelected span,
.masterTabBarTabSecondarySelected td,
.masterTabBarTabSecondarySelected div,
.masterTabBarTabSecondarySelected span {
    font-weight:700 !important;
    color:#981E32 !important;
}

/* Strong selected-page indicator */
table[id^="dashboard_page_"][id$="_tab"].secondaryTabSelected,
table[id^="dashboard_page_"][id$="_tab"].masterTabBarTabSecondarySelected {
    border-bottom:3px solid #981E32 !important;
}

/* Additional spacing between top-level pages */
table[id^="dashboard_page_"][id$="_tab"] td {
    padding-left:7px !important;
    padding-right:7px !important;
}


/* ---------- PAGES THAT CONTAIN SUBPAGES ---------- */

/*
   Replace .HAS-SUBPAGES with the actual class/attribute Oracle
   exposes for a top-level page that owns subpages, if available.
   See "Confirm before building," item 1: if no such hook exists,
   this rule cannot fire on unselected parents and the chevron
   needs a JS or manual-tagging fallback instead.
*/

.HAS-SUBPAGES {
    font-weight:700 !important;
}

.HAS-SUBPAGES td:last-child div::after,
.HAS-SUBPAGES td:last-child span::after {
    content:"\25BE";
    display:inline-block !important;
    color:#981E32 !important;
    font-size:12px !important;
    line-height:1 !important;
    margin-left:6px !important;
    padding:1px 4px !important;
    background:#F4E3E6 !important;      /* light crimson tint */
    border:1px solid #E3C3CA !important;
    border-radius:3px !important;
}


/* ---------- SECOND-LEVEL / SUBPAGE NAVIGATION ---------- */

/*
   Replace .SUBPAGE-NAV-WRAPPER with the wrapper element Oracle
   renders around the subpage navigation row.
*/

.SUBPAGE-NAV-WRAPPER {
    background:#F3F4F5 !important;
    border-top:1px solid #D6D9DC !important;
    border-bottom:1px solid #C8CDD1 !important;
    padding:5px 8px !important;
    min-height:34px !important;
}

/* Normal subpage */
.SUBPAGE-NAV-WRAPPER .secondaryTabEnabled {
    padding:6px 11px !important;
    font-size:12px !important;
    font-weight:400 !important;
}

/* Selected subpage */
.SUBPAGE-NAV-WRAPPER .secondaryTabSelected,
.SUBPAGE-NAV-WRAPPER .masterTabBarTabSecondarySelected {
    background:#FFFFFF !important;
    border:1px solid #C6CBD0 !important;
    border-radius:3px !important;
    color:#981E32 !important;
    font-weight:700 !important;
    padding:6px 11px !important;
}


/* ---------- DESIRED BEHAVIOR ---------- */

/*
   Do not create or reserve a second navigation row when the
   selected top-level page has no subpages.

   Oracle should continue to render the subpage row only when
   subpages exist for the selected parent.

   Pages that contain subpages remain visually identifiable by:
       1. Bold text
       2. Downward chevron (down triangle)

   Active state is communicated separately with WSU crimson.
*/

DOM selectors to confirm

Two selectors must be confirmed in browser developer tools before deployment (see the gating items above):

  1. The wrapper around the rendered second-level navigation row containing links such as Active Student Details and Current Student CITI Status. Replace .SUBPAGE-NAV-WRAPPER with that selector.
  2. Whether Oracle places a class or attribute on a top-level page that contains subpages even when that parent is not selected. If so, replace .HAS-SUBPAGES with that selector and the chevron can be implemented entirely in CSS. If not, the chevron requires a JavaScript or manual-tagging fallback.
Design objective: normal top-level pages remain unchanged; pages containing subpages are bold and display a small down-triangle indicator; selecting such a page reveals a visually distinct second navigation row; selecting a page without subpages leaves no empty second row.