This project is a reference implementation for the Angular framework using the Pega Constellation DX API, implemented on the DX Accelerator. For further documentation on the DX accelerator, see the API specification.
The application is built on the following libraries:
- Pega Constellation Core for communication with the DX API
- Pega Constellation Core Types for powering the Constellation Core in TypeScript
- DX Engine for bootstrapping and running the Constellation Core
- Angular DX Adapter for bridging the Angular framework to the DX Engine
- Angular for the Angular framework
Run ng serve for a dev server. Navigate to http://localhost:4200/ to view the application.
The project is configured to communicate with a Pega mocking server running on localhost:3333 but can be changed to talk directly to a live Pega Infinity server.
The main entry point is the src/pega/pega.component.ts which uses the OAuth2Service to authenticate with a server and uses the PegaEntryCompent which bootstraps the Constellation Core and starts a new case type.
Bootstrapping the constellation core makes the PCore class globally available on the window.
The main mapping module is available at src/pega/pega.mapping.module.ts. A minimal setup would be when only the default mapping is configured. In this minimal setup the x-ray feature can be used by executing window.PCore.getDebugger().toggleXRay(true) in the browser console. Enabling X-Ray will show for each container the componentName and a unique counter for that container. Use the componentName as a key in the mapping module. E.g. when X-Ray shows a specific container as Dropdown.67, then add the following mapping to add an implementation for all containers of type Dropdown:
providers: [
{
provide: DYNAMIC_CONTAINERS,
useValue: {
Dropdown: DxDropdownComponent
}
}
]Not all containers need an implementation. A fallback to a default implementation is sufficient for most containers. Only when a special presentation of the container state or when user interaction is desired, then a specialized DX container implementation can be added.
Implementing DX Components is as easy as creating an Angular Component and extending from the PContainerComponent class. The DX Angular Adapter will instantiate the correct class and make a PContainer available on the container property.
@Component({
selector: 'dx-dropdown-component',
template: `
<label>
{{ container.config.label }}
...
{{ container.config.helperText }}
{{ container.config.validatemessage }}
</label>
`,
})
export class DxDropdownComponent extends PContainerComponent {}With X-Ray enabled, selecting a container in the browser will open a window which shows the state of that container. The configuration properties can be accessed in the Angular DX Component by reading from the container.config object. The PConnect object associated with each container is available on container.pconnect.
The config object shape depends on the container type. To get IDE support, the config object shape can be passed in the PContainer. Available config object shapes can be viewed at the API documentation.
class DxDropdownComponent extends PContainerComponent<PContainer<PickListProps>>The PContainer class has utility methods available for writing changes back into Pega, such as container.updateFieldValue(...) and container.triggerFieldChange(...). Specialized containers might have other properties and methods available which aid in retrieving and updating state for that container. See the API specification for an overview of specialized containers. When a specialized container is available in the DX Engine, this can be specified using generics.
class FlowContainerComponent extends PContainerComponent<FlowContainer>E.g. when implementing the FlowContainer, special properties and methods are available such as container.actionButtons and container.buttonClick(...).