Universal Data Display (UDD) Component

The Universal Data Display (UDD) reuable component is a custom, flexible, API-driven module for rendering lists or detail views of data. It supports Experience Fragment (XF) templating, pagination, sorting, location-based filter integration, and analytics — making it the standard component for any data-driven listing or detail page across AARP channels (Member Benefits, Rewards, Travel, Events, PRI, and more).

Key Capabilities

Renders any API-backed data as a list or single detail view - Uses Experience Fragments as item templates — no code changes needed for layout variations - Supports lazy loading, pagination (numbered or "View More"), and sorting - Integrates with Location Filter and Location Search components - Works across all brands and device sizes (responsive) - Supports sessionStorage for list → detail page data handoff.

Supported Varients

List:

Property Value - ./mode = list
Use Case - Renders multiple items as a grid or list — benefits, events, offers

Detail:

Property Value - ./mode = list
Use Case - Renders a single item's full detail view

Use Cases

As we know, the UDD component utilizes an API to promote content on a page. This means it can support several APIs and use cases.

UDD Member Benefits Use Case

The Universal Data Display (UDD) Member Benefits Use Case is using this component to display benefits cards across the Member Benefits' web experiences.

UDD Events Use Case

Coming Soon!

Training

This is a short overview video that explains the uses of and how the Universal Data Display (UDD) works.

4:57

This is a short video that will give an overview of all the fields used within the UDD component's dialogue.

7:14

Authoring Capability

The configuration dialog enables the content author to define the button's behavior, appearance, and interaction with a visitor on the page.

FAQs

Q: What determines the user's state? The AARP location service detects the user's state (via IP geolocation). It stores this in the browser as aarpState.

Q: Can I use this on multiple pages? Yes. The same component + generic list can be reused on any page (homepage, state pages, Now app). Just drop the component and point it to the same list.

Q: What if I add a new state later? Add a new entry to the Generic List and create its XF. No code changes needed.

Q: Can one XF be shared across multiple states? Yes. Point multiple list entries to the same XF path.

Q: Can I use a Featured List with 3 cards? Yes. A static featured list with 3 tiles (no "Load More", no tabbed filtering) works perfectly. Images, titles, links, and hover effects all work.

Q: Will videos work inside the XF? Brightcove Video is not recommended. The video player SDK may not initialize properly when loaded dynamically. Use static content instead.

Q: Can I use UDD or Location Search inside the XF? Yes, they are supported. However, they add extra loading time (chunk download + API calls) on top of the XF load. Users may see a brief empty/shimmer state before content appears. Test on staging first.