Chapter 04
Custom DX components
You know a screen is drawn from a description, and that you can hand the browser new pieces of code. Now the practical question: what kinds of pieces are there, and which one is yours?
Pega 24 – 26
Words you will meet
- Field
- Layout template
- Widget
- Presentation
Definition
A custom DX component is three things.
That is all it is, once you strip away the jargon:
- 1
A React component
The code that draws it. For us, a button.
- 2
A settings file
A small file (config.json) that tells Pega its name, its kind and which settings a designer can change.
- 3
A way in
The publish step that uploads it to the Pega server, so a designer can pick it.
The tool that creates, checks and uploads them is called the DX Component BuilderPega's command-line tool for creating, building and publishing custom components. Installed through npm as @pega/custom-dx-components.. You will meet it properly in the workshop chapter.
Play
Which kind do you need?
The builder asks you to choose a kind when you create a component. Pick what you want to make and see what it is called.
You need a
Field
One control that shows or collects a single value, or does a single thing when pressed.
For exampleA star-rating, a masked phone box, or a button that opens a link.
- In the builder it is called
- Field
- Flavours it offers
- Text, Text Input, Paragraph, Email, Phone, URL, Icon Button URL, Integer, Decimal, Currency, Percentage, Boolean, Date, DateTime, TimeOfDay, Picklist, Search box, Radio buttons
Our choice
Our button is a Field.
It surprises people that there is no “Button” kind. In Constellation a button that sits in a form is a Field: it is one control in a view. So the first line of its settings file says "type": "Field".
Here is a first look at that file. Do not worry about the details yet. We build it line by line in Chapter 8.
{ "name": "Acme_UI_CelebrateButton", "label": "Celebrate button", "type": "Field", // one of: Field, Template, Widget, Presentation "subtype": "Text", // the flavour of Field "properties": [ // the settings a Pega designer fills in { "name": "buttonText", "label": "Button text", "format": "TEXT", "required": true } ]}What is next
Now, the journey.
That is the whole mental model: Pega describes, the browser draws, and you can supply new pieces. The rest is craft. Set up your tools, sign in, create the component, write it, test it in Storybook, run the checks, publish it, and place it on a real screen.
The next ten chapters take you from an empty laptop to a button working on a real screen, with troubleshooting and a one-page cheat sheet at the end.
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.