Summary

This package provides a connection between the Pega infinity server and the Angular framework. For detailed documentation, see the API specification.

Installation

npm install @typescale/angular-adapter

Versioning is based on <major.minor.patch>, where:

• major: the version of Pega that is used
• minor: the version of Angular that is used
• patch: the version of updates to the library itself

The library works together with the constellation core and the DX Engine. Make sure the correct versions of these libraries are installed as well.

npm install @pega/constellationjs
npm install @typescale/dx-engine

Features

DX Components

This library adds functionality to build, register and dynamically inject DX Components in the DOM tree using Angular technology. To be able to use these features, import the PContainerModule into the application module.

@NgModule({
  imports: [PContainerModule]
})
export class AppModule { }

Build

DX Components can be build by extending the PContainerComponent class. This class has a single container property where all of the interaction with Pega will be available. See the PContainer class in the DX Engine for more information.

@Component({
  selector: 'dx-component',
  template: `
    <label>
      {{ container.config.label }}
      ...
      {{ container.config.helperText }}
      {{ container.config.validatemessage }}
    </label>
  `,
})
export class DxComponent extends PContainerComponent {}

Registration

DX Components can be provided using the DYNAMIC_CONTAINERS injection token. This is an array of DX Angular Components, where each component is registered using a unique key. Note how the same DX Component implementation can be reused using for different keys. This can be especially useful when implementations are not too different (e.g. TextInput vs Email DX Components).

@NgModule({
  providers: [
    {
      provide: DYNAMIC_CONTAINERS,
      useValue: {
        <key>: <DX Angular Component>,
        ...
      },
      multiple: true
    }
  ]
})
export class DxMappingModule {}

Dynamic injection

When a DX Component has children of it's own (e.g. layout components), then these can be injected in the DOM tree using the provided dxContainer directive. This directive expects a PContainer as the container property and will instantiate and insert the corresponding Angular PContainerComponent. See the PContainerDirective for details.

@Component({
  selector: 'dx-component',
  template: `
    <ng-container *ngFor="let child of container.children">
      <ng-template dxContainer [container]="child"></ng-template>
    </ng-container>
  `,
})
export class DxComponent extends PContainerComponent {}

X-Ray

Each injected component can be inspected in the browser using pega's XRay feature. Toggling XRay allows to inspect the metadata and state of each component. When XRay mode is enabled, the DX components can be interacted with using the console of the browser developer tools.

You can launch the XRay tool by entering PCore.getDebugger().toggleXRay(true) into the browser console. To disable XRay, enter PCore.getDebugger().toggleXRay(false).

Pega Entry

Bootstrapping a Pega application requires among others loading the constellation core into the browser, authentication with the Pega server and initializing the root container. After the Pega application has been bootstrapped, the various Mashup API's. To simplify this process, a PegaEntryComponent is available which has a standard implementation for all these steps. An easy way to e.g. start a new case type using this entry component is as follows:

@Component({
  template: `
    <dx-pega-entry *ngIf="token"
            caseTypeID="MY-Case-Type-Id"
            infinityServer="/prweb"
            [token]="token"></dx-pega-entry>
  `
})
export class PegaComponent {
  public token!: TokenInfo;

  public constructor() {
    OAuth2Service.getTokenCredentials(...).then(token => {
      this.token = token;
    });
  }
}

For authentication options, see more details at the AuthenticationService.

Example implementation

For an example usage of this library, see the Angular reference implementation.

API documentation

For detailed documentation, see the API specification.