ng-bpm-ui v11.6.2

ng-bpm

ng-bpm provides Angular components and services for Fujitsu's Digital Transformation Platform (DXP). ng-bpm consists of two libraries:

• ng-bpm: Services for the AA REST API
• ng-bpm-ui: GUI components

Using the ng-bpm library

Install the library using npm. For example:

npm install ng-bpm

Establish a session with the BPM server

Use ConnectionManagerService.getLoginInfo() to get a session on the BPM server:

constructor(
    private connectionManagerService: ConnectionManagerService,
    private bpmService: BpmService
) { }

// You can call getLoginInfo any number of times.
private getTenantsObservableFactory(bpmConnectionServer: BpmConnectionServer): Observable<BpmTenant[]> {
    return this.connectionManagerService.getLoginInfo(this.server).pipe(
        flatMap(() => this.bpmService.getTenants(bpmConnectionServer))
    );
}

Using the ng-bpm-ui library

Make sure you followed the instructions above for the ng-bpm library. In your own application do the following:

1) Run npm install ng-bpm-ui

2) Install the peer dependencies for ng-bpm-ui to your package.json

• npm install bootstrap
• npm install @ng-bootstrap/ng-bootstrap
• npm install @ngx-translate/core
• npm install @ngx-translate/http-loader
• npm install font-awesome
• npm install @fortawesome/angular-fontawesome
• npm install @fortawesome/fontawesome-svg-core
• npm install @fortawesome/free-solid-svg-icons

3) Update your .angular.json

• Under styles block add below code - "node_modules/bootstrap/dist/css/bootstrap.min.css", - "node_modules/font-awesome/css/font-awesome.min.css"

ng-bpm-ui internationalization

To implement i18n: 1) Update AppComponent and add translation related code - import { TranslateService } from 'ng-bpm'; - Under class AppComponent block add below code

constructor(
    private translate: TranslateService,
) {
    this.translate.addLangs(['en', 'fr']);
    this.translate.setDefaultLang('en');
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}

2) Reference the language libraries from the ng-bpm-ui assets folder in angular.json. For example:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/ng-bpm-ui/assets/i18n",
    "output": "./assets/i18n"
  }
],

For an example please refer to the PUP.

ng-bpm Development

The source code for this project is here: https://interstage.beanstalkapp.com/agileengine

Running the ng-bpm Reference

Clone or copy the project.

Run npm install

Run ng serve and navigate to http://localhost:4200/. This displays the ng-bpm Reference.

Testing with a Live DXP Server

The ng-bpm Reference doesn't implement a login page so you need to connect to the DXP Monitor first. Navigate to the DXP Monitor page URL which looks something like http://dxpdemo7:49950/aa and assure you are logged in.

Packaging

To create the release package run npm run build-libs to build the ng-bpm and ng-bpm-ui libraries in the release folder.