LearnConstellation.

Chapter 17

Pattern catalogue

A real team library holds dozens of components. Look closely and they are a handful of ideas repeated. Learn the ideas once and every new component feels familiar.

Pega 24 – 26

Words you will meet

  • Field
  • Template
  • Widget

The story

A library grows.

It starts with one button. Then someone needs a button that opens a form. Then one that refreshes the screen. Then a table, then a map, then a calendar. After a few months there are around thirty components, and a pattern shows up: nearly all of them are one of three kinds, and each leans on only a few Pega calls.

A Field is a single thing bound to a value, such as every button. A Template arranges what is dropped into it, such as layouts, tabs and tables. A Widget is a stand-alone piece for a whole page.

Play

The catalogue.

Twenty patterns in four families, described generically. Filter by family, or by the API a pattern uses to answer “which components touch getData?”.

Pattern catalogueTry it: filter by family or by API
Filter by the API a pattern uses

20 of 20 patterns

  • Launch-modal button

    Field

    A button that opens a Pega form in a modal.

    openLocalAction

    Pega rule needed: Local Action

  • Data-page button

    Field

    Runs a Data Page with values from the case when pressed.

    getValuegetData

    Pega rule needed: Data Page

  • Open-case button

    Field

    Records an audit entry, then opens another case.

    getValuegetDataopenWorkByHandlecontainer utils

    Pega rule needed: Data Page

  • Refresh-form button

    Field

    Re-fetches the current screen.

    getValuerefreshCaseViewcontainer utils

    Pega rule needed: None

  • Reload-task button

    Field

    Reopens the current task, effectively a reload.

    getValueopenAssignmentcontainer utils

    Pega rule needed: None

  • Close-case button

    Field

    Saves for later, closes the tab, returns to a portal page.

    saveAssignmentshowPagecontainer utils

    Pega rule needed: None

  • Link button

    Field

    A button that opens a web address.

    no Pega API calls

    Pega rule needed: None

  • Two- and three-column layout

    Template

    Arranges the views dropped into its regions side by side.

    children

    Pega rule needed: None

  • Inline layout

    Template

    Places fields on one line.

    children

    Pega rule needed: None

  • Accordion

    Template

    Sections that fold open and closed, optionally refreshing on open.

    childrenrefresh

    Pega rule needed: None

  • Tab panel

    Template

    Tabs with keyboard support and optional audit logging.

    getValuechildrenrefreshgetDatasaveDataopenLocalAction

    Pega rule needed: Optional audit rule

  • Paginated table

    Template

    A table that pages in the browser and writes the selected row back.

    updateFieldValuegetDatagetDataViewMetadata

    Pega rule needed: Data Page

  • Server-paginated table

    Template

    Pages on the server, so huge lists stay fast.

    getValueupdateFieldValuegetData

    Pega rule needed: List Data Page

  • Search widget

    Widget

    A search box with filters and row actions, placed on a page.

    getDatagetDataViewMetadataopenWorkByHandleopenLocalAction

    Pega rule needed: Data Page

  • Map with markers

    Field

    Plots rows on a map.

    getValuegetData

    Pega rule needed: List Data Page with coordinates

  • Message carousel

    Template

    Rotating messages loaded from a list.

    getDatachildren

    Pega rule needed: List Data Page

  • Attachments list

    Field

    Shows a case’s files grouped by category.

    getCaseAttachmentschildren

    Pega rule needed: None

  • Appointment calendar

    Template

    A booking calendar that reads and saves.

    getDatasaveDatachildren

    Pega rule needed: Several List Data Pages and one Savable

  • Sandboxed iframe

    Field

    Embeds another page safely, with a required title for accessibility.

    getValue

    Pega rule needed: None

  • Hidden text

    Field

    Holds a value on the screen without showing it.

    no Pega API calls

    Pega rule needed: None

Borrow an idea

More ideas, by the job they do.

The catalogue above is the first set. A bigger library keeps solving the same problems in new ways: folding panels, fixed column layouts, inputs with extras, banners, page tidy-ups, confirm buttons and live refresh. Pick a job to see the problem, how the idea works, the calls it uses and the safeguard worth copying.

Each call links to its entry in the API reference. These ideas were found by reading how a real library works, and the names are invented. None of it was run against a live Pega.

Ideas by jobTry it: pick a job

Fold, group and present content.

  • Collapsible panel

    A section that opens and closes, with a header the author can type or take from a property.

    How it works

    • Header text, or a property reference. Placeholders like {.Name} are filled in.
    • Open or closed to begin with, animated height, optional hidden header.
    • Remembers its state in a case property, and can mount its children only after the first open (lazy).
    • A read-only switch, either fixed or driven by a true/false property.

    Calls it uses

    Copy this safeguard

    Push read-only down as the inherited readOnly prop, not displayMode, so the layout does not change, and set it again at every level.

  • Accordion group with “expand all”

    A list of collapsible sections with one control to open or close them all.

    How it works

    • Section names, a title, and an expand-all link with its own texts.
    • Optional sub-headers on the left and right, from fixed text or from a property.
    • “Exclusive” mode lets only one section be open at a time.

    Calls it uses

    Copy this safeguard

    Read a number from a property with parseInt and fall back to a default, because authors type anything.

  • Status row

    One expandable row showing a label, a reference and a coloured status pill, with a slot for fields.

    How it works

    • Three status names, each with a colour.
    • Arrow on the left or right, open or closed to begin with.

    Calls it uses

    Copy this safeguard

    The default colours are hard-coded hex values. Use theme tokens instead, or dark mode and re-skins will not work.

  • Card picker

    Choose one record from a data reference as a row of cards, instead of a dropdown.

    How it works

    • Sits on the reference property exactly like a dropdown.
    • Each card can show a header and up to four compartments from the full record.
    • Settings for cards per row, minimum width, gap, and the selected-card glow.

    Calls it uses

    Copy this safeguard

    Keep the selection in Pega, never in local state. Match cards on a configurable id field, and show an empty state.

Craft

Habits that repeat.

The same small decisions appear in nearly every component. Each one was learned from something breaking.

Shared habitsTry it: open each one

  • Keep a busy flag. Ignore clicks while it is on, disable the button, swap the label (“Loading…”), and reset in a finally block. This prevents double submits.

Your turn

Your next component.

The shortest path for a new component that does something when clicked:

  1. Scaffold it, or copy your smallest existing component.
  2. Describe its settings in config.json. Each becomes a form input for the designer and a prop for you.
  3. Read props in index.tsx and call getPConnect only inside handlers.
  4. Pick the Pega call from the finder in chapter 16, and guard every optional call.
  5. Add a busy state for anything slow.
  6. Write a Storybook story with a fake PCore, then run it.
  7. Test it, build it, publish it, and add it on a view.

Your turn

Questions and comments

Stuck on something, or have a thought? Write it here. To talk about one part, use the Comment button under that section's heading.

3–20 letters, digits, _ or -. Kept in this browser so you are not asked again.

0/1000

A hands-on guide by Sanjeev Kujur. Independent, and not affiliated with or endorsed by Pegasystems.

Covering Pega Infinity versions 24.2, 25.1, and 26.1 · Updated 5 Nov 2026