Custom DX Component (FlightSeatMapTemplate) Not Displaying in Portal/App Studio - Console Errors Present

General
, ,
1

A newly created custom DX Template component for a flight seat selection UI does not render in the Pega user portal or the App Studio preview panel. A standard Pega field placed in the same view renders correctly, confirming the container is functional. The component bundle loads successfully via the network, but console errors indicate a runtime execution failure within Pega framework files.

Steps Taken (Troubleshooting Performed):

  1. Component Creation: Created type: "Template" component with config.json, index.tsx, and styles.ts.
  2. Data Mapping: Mapped D_SeatMap1List.pxResults (verified 21 records returned) to the seatData prop in App Studio. Mapped .SelectedSeat as the target property.
  3. CSP Implementation: Added and imported create-nonce.ts to satisfy Content Security Policy (CSP) requirements.
  4. Publishing: Used npm run publish successfully multiple times after changes.
  5. Debugging: Used browser Developer Tools (F12) to monitor network activity and console errors. Confirmed bundle loads with 200 OK status.
  6. Environment Sync: Cleared ConstellationSvcURL DSS value and performed hard refreshes.

Observed Behavior:

  • The area where the component should render is blank or white space.
  • The browser console displays 3 or 4 red errors within Pega files (e.g., 59438.1b55024e.js, Boa_dxcomp_componentsmap.js), indicating a script execution failure upon component load.
  • App Studio preview sometimes fails with TypeError: Cannot read properties of null (reading 'getElementById').

Expected Behavior:

The interactive seat map UI defined in the component should display correctly in the Pega UI.

config.txt (1.8 KB)

index.tsx_.docx (17.8 KB)

styles.ts_.docx (16.4 KB)

create-nonce.ts_.docx (14.1 KB)

App Studio configuration.jpg
App Studio configuration.jpg676×726 48.2 KB

Network tab.jpg
Network tab.jpg918×649 159 KB

console tab.jpg
console tab.jpg900×586 112 KB

2

The component is failing because your React code treats seatData as an array and immediately runs seats.map(...), but in config.json that same property is defined as TEXT, so App Studio is passing a string like D_SeatMap1List.pxResults instead of the actual list. Fix the component by changing seatData in the config to a list or page-list style property that resolves the data page results, then republish and remap it in App Studio. After that, the prop type will match what the React code expects, and the template will render instead of crashing at runtime. Keep the field update tied to the configured target property as well, rather than hardcoding .SelectedSeat, so the template stays fully aligned with the App Studio configuration.