Lab 4 — Build the plan-card component
Purpose: Create an authorable plan-card component with an HTL script and dialog, rendering the Lab 2 content.
Who this page is for
| Audience | Why it matters to you |
|---|---|
| All engineers | Pairs with Session 4; first real component build |
Goal
An authorable plan-card with title, subtitle, premium and a covered/not-covered benefits list — the teaser version of the PHI gold-tier plan page.
Steps
- In your archetype project (
ui.apps), create/apps/phi-academy/components/plancard/with.content.xml
metadata: jcr:title = "Plan Card", componentGroup = "PHI Academy".
- Add
plancard.htmlrendering title/subtitle/premium from properties for now
(${properties.title} etc.) — properties is HTL's direct window onto the component node.
- Create the dialog (
_cq_dialog/.content.xml) with: textfieldtitle, textfieldsubtitle,
numberfield monthlyPremium, and a multifield benefits with sub-fields label (text) and covered (checkbox).
- Deploy (
mvn clean install -PautoInstallSinglePackage). - In the page editor, add Plan Card to the page (enable the "PHI Academy" group in the template's policy if the
component is not offered — a Session 6 preview), configure it via the dialog, and verify rendering.
- In CRXDE, inspect the node the dialog wrote — multifield rows become child nodes. Compare with your hand-built
Lab 2 structure.
Checkpoint
| Verify | How |
|---|---|
| Empty-state safety | Add a fresh Plan Card, leave dialog empty — page must not error |
| Escaping | Set title to <b>Gold</b> — the tags must render as text, not bold (HTL escaped it) |
| Multifield structure | Benefit rows are child nodes with label/covered properties |
Stretch
Add a card.html selector script that renders a compact variant, and view the page with .card.html.