Pega Heading Towards Constellation UI

Pega presents architectures, UI kit and theme cosmos; UI kit is older with heavy markup, cosmos offers modern templates and three panels, while constellation uses cloud-hosted JavaScript to reduce reloads.

Discover the dx api introduction and compare front-end strategies as dd api and dcs api expose metadata from pega for external rendering, enabling user interface customization without extra coding.

Learn to use traditional DCS API v1 to create a parking case, manage assignments, and perform actions through the cases and assignments APIs with Postman and basic authentication.

Navigate traditional DCS API v1 part-2 by posting a case and assignment, retrieving case and assignment details, and executing flow actions with metadata and dynamic layouts.

Create a Theme Cosmos based application, explore its rulesets, skins, and navigation in Dev Studio and App Studio, and learn how portal configurations update in real time.

Learn how personas and portals are created and configured in App Studio for the Theme Cosmos application, assign portals and pages to personas, and verify changes reflect in Dev Studio.

Explore how HTML structures a web page with tags. See how CSS styles the page and how JavaScript uses the DOM to create interactivity through events and event listeners.

Unlock JavaScript potential in Pega applications by using it in non auto generated HTML sections and harnesses to enable client-side actions and validations.

Learn how to load a JavaScript file from the server into the browser, access fields by ID with document.getElementById, and change background color via a harness script.

Discover how Java Server Pages enable dynamic web content in Pega, blending HTML with JSP tags to build handcrafted non auto generated UI components and execute Java code.

Explore constellation as a central architecture that separates UI from business logic and enhances accessibility. See how CDN and app static content render React components via the constellation DX API.

Explore how to customize the constellation application by creating a new theme, adjusting fonts, colors, branding, and background, and applying it through configurations despite accessibility warnings.

Learn to apply and customize fonts in Pega apps by changing theme fonts and uploading custom fonts, including converting TrueType fonts to woff2.

Showcases implementing action sets behavior in constellation UI using form refresh settings and data transforms, with a full name calculated on last name change.

Explore the built-in views for a new case type and data object in Pega, including full page and other ux views, and how to edit them in app studio.

Learn to configure the full page view in Pega Constellation UI, including headings, tab layouts, templates, and field visibility with win rules, plus live previews in Constellation and API outputs.

Learn to configure the details view with primary fields and embed a view inside another view, using a two-column template, region A and region B, and customize tabs and headings.

Explore how to configure a list view and its preview view in the app studio, including data pages, column options, display modes (table, gallery, timeline), and personalization features.

Learn to create and configure a form view in a Pega order fulfillment workflow, choose one, two, or three column layouts, and embed views.

Learn how to embed pega apps using web embed by generating an embed code, configuring authorization and authentication, and testing login flows in external web apps and demos.

Create a custom rd component in pega by extending field, layout, or widget types using Visual Studio Code, git 2.30+, and NodeJS; then publish to sync with the pega CDN.

Explore the internal structure of a created component, including folder organization, config properties, and the index and styles files, and learn how to modify default props and CSS before publishing.

Publish a custom component to Pega by authenticating with OAuth 2.0, updating the config with client ID and client secret, and running npm publish; verify the component in Dev Studio.

Compare the traditional api and constellation api to decide use for existing versus modern apps. Understand ui approach, data and layout separation, and hateoas-driven workflows across frameworks.

Explore the constellation DCS API v2 and its RESTful interface for managing cases, assignments, and actions in Pega apps, with a demo of creating a case and moving stages.

Create a new case with the dd api v2 by authorizing via OAuth 2.0 client credentials and posting to the cases endpoint, usable from front-end applications or Postman.

Learn to fetch assignment details with the v2 dx api using the assignments/{assignment_id} endpoint, passing the assignment id from the create case api and inspecting fields, metadata, and actions.

Learn how to move from one assignment action to another using patch API in V2 DX API, leveraging action id, assignment id, and ETag header with If-Match to update safely.

Explore how constellation SDK enables integrating an alternative design system with the Pegasus backend using the constellation JS engine, with angular material or material UI styling for flexible front ends.

Download the latest React SDK for the 24.x trial version, extract it to access code and documentation, and retrieve marketplace and GitHub subsets to set up the frontend and engine.

Learn to integrate Pega with the React SDK, download and clone the SDK, configure CORS and OAuth 2.0, install dependencies, and run the dev server.

Demonstrate the two sdk modes, embedded and portal, and analyze how the constellation ui renders through v2 api calls, authentication, and network activity on localhost 8082.