Using the Angular Renderer

Angular project requirements

Your app MUST be created using the ng app from the @angular/cli~11.0.4 package. It also MUST use SCSS for styling.
1
npm install -g @angular/cli~11.0.4
2
ng new my-flowx-app
Copied!

Installing the library

Note: To install the npm libraries provided by FlowX, you will need to obtain access to the private FlowX Nexus registry. Please consult with your project DevOps.
The library uses Angular version @angular~11.0.4, npm version 6.14.11 and node 12
Use the following command to install the renderer library and its required dependencies:
1
npm install flowx-process-renderer paperflow-web-components [email protected]^2.27.0 @angular/[email protected] @angular/[email protected]^11.2.0 @angular/[email protected]^11.2.0 @angular/[email protected]^11.0.2 --save
Copied!

Using the library

Once installed, FlxProcessModule will be imported in the AppModule FlxProcessModule.forRoot({}).
You MUST also import the dependencies of FlxProcessModule: HttpClientModule from @angular/common/http and IconModule from paperflow-web-components.
Using Paperflow web components
Add path to component styles to stylePreprocessesOptions object in angular.json file
1
"stylePreprocessorOptions": {
2
"includePaths": ["./node_modules/paperflow-web-components/src/assets/scss", "src/styles"]
3
}
Copied!
NOTE: Because the datepicker module is build on top of angular material datepicker module, using it requires importing one predefined material theme in you angular.json configuration.
1
"styles": ["..., "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"],
Copied!

Theming

Theming is done through the ppf-theme mixin that accepts as an argument a list of colors grouped under primary, status and background
1
@use 'ppf-theme';
2
3
@include ppf-theme.ppf-theme((
4
'primary': (
5
'color1': vars.$primary,
6
'color2': vars.$secondary,
7
'color3': vars.$text-color,
8
),
9
'status': (
10
'success': vars.$success,
11
'warning': vars.$warning,
12
'error': vars.$error,
13
),
14
'background': (
15
'background1': vars.$background1,
16
'background2': vars.$background2,
17
'background3': vars.$background3,
18
),
19
));
Copied!
NOTE: Every request from the FlowX renderer SDK will be made using the HttpClientModule of the client app, which means those requests will go through every interceptor you define here. This is most important to know when building the auth method as it will be the job of the client app to intercept and decorate the requests with the necessary auth info (eg. Authorziation: Bearer ...).
NOTE: It's the responsibility of the client app to implement the authorization flow (using the OpenID Connect standard). The renderer SDK will expect to find the JWT saved in the browser localStorage object at the key named access_token.
1
# example
2
import {BrowserModule} from '@angular/platform-browser';
3
import {NgModule} from '@angular/core';
4
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
5
import {FlxProcessModule} from 'flowx-process-renderer';
6
import { IconModule } from 'paperflow-web-components';
7
8
import {AppRoutingModule} from './app-routing.module';
9
import {AppComponent} from './app.component';
10
11
12
@NgModule({
13
declarations: [
14
AppComponent,
15
],
16
imports: [
17
BrowserModule,
18
AppRoutingModule,
19
// will be used by the renderer SDK to make requests
20
HttpClientModule,
21
// needed by the renderer SDK
22
IconModule.forRoot(),
23
FlxProcessModule.forRoot({})
24
],
25
// this interceptor with decorate the requests with the Authorization header
26
providers: [
27
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
28
],
29
bootstrap: [AppComponent]
30
})
31
export class AppModule {
32
}
Copied!
The forRoot() call is required in the application module where process will be rendered. The forRoot() method accepts a config argument where you can pass extra config info, register a custom component, service, or custom validators.
Custom components will be referenced by name when creating the template config for a user task.
Custom validators will be referenced by name (currentOrLastYear) in the template config panel in the validators section of each generated form field.
1
// example
2
FlxProcessModule.forRoot({
3
components: {
4
YourCustomComponentIdenfier: CustomComponentInstance,
5
},
6
services: {
7
NomenclatorService,
8
LocalDataStoreService,
9
},
10
validators: {currentOrLastYear },
11
})
Copied!
1
// example of a custom validator that restricts data selection to
2
// the current or the previous year
3
4
currentOrLastYear: function currentOrLastYear(AC: AbstractControl): { [key: string]: any } {
5
if (!AC) {
6
return null;
7
}
8
9
const yearDate = moment(AC.value, YEAR_FORMAT, true);
10
const currentDateYear = moment(new Date()).startOf('year');
11
const lastYear = moment(new Date()).subtract(1, 'year').startOf('year');
12
13
if (!yearDate.isSame(currentDateYear) && !yearDate.isSame(lastYear)) {
14
return { currentOrLastYear: true };
15
}
16
17
return null;
18
}
Copied!
Note: the error that the validator returns MUST match the validator name.
The component is the main container of the UI, which will build and render the components configured via the FlowX Designer. It accepts the following inputs:
1
# example
2
<flx-process-renderer
3
[apiUrl]="baseApiUrl"
4
[processApiPath]="processApiPath"
5
[processName]="processName"
6
[processStartData]="processStartData"
7
[debugLogs]="debugLogs"
8
[keepState]="keepState"
9
[language]="language"
10
></flx-process-renderer>
Copied!

Parameters:

Name
Description
Type
Mandatory
Default value
Example
baseApiUrl
Your base url
string
true
-
processApiPath
Engine api prefix
string
true
-
/onboarding
processName
Identifies a process
string
true
-
client_identification
processStartData
Data required to start the process
json
true
-
{ "firstName": "John", "lastName": "Smith"}
debugLogs
When set to true this will print WS messages in the console
boolean
false
false
-
language
Language used to localize the application.
string
false
ro-RO
-
keepState
By default all process data is reset when the process renderer component gets destroyed. Setting this to true will keep process data even if the viewport gets destroyed
boolean
false
false
-
isDraft
When true allows starting a process in draft state
boolean
false
false
-

Data and actions

Custom components will be hydrated with data through the $data input observable which must be defined in the custom component class
1
@Component({
2
selector: 'my-custom-component',
3
templateUrl: './custom-component.component.html',
4
styleUrls: ['./custom-component.component.scss'],
5
})
6
export class CustomComponentComponent {
7
@Input() data$: Observable<any>;
8
}
Copied!
Component actions are always found under data -> actionsFn key.
Action names are configurable via the process editor.
1
# data object example
2
data: {
3
actionsFn: {
4
action_one: () => void;
5
action_two: () => void; }
6
}
Copied!

Interacting with the process

Data from the process is communicated via websocket protocol under the following keys:
Name
Description
Example
Data
data updates for process model bound to default/custom components
ProcessMetadata
updates about process metadata, ex: progress update, data about how to render components
RunAction
instructs the UI to perform the given action

Localizing the app

The flxLocalize pipe is found in the FlxLocalizationModule.
1
import { FlxLocalizationModule } from 'flowx-process-renderer';
Copied!
1
import { Component } from '@angular/core';
2
3
@Component({
4
selector: 'app-dummy-component',
5
template: ` <h3>{{ "stringToLocalize" | flxLocalize}}</h3>`,
6
7
})
8
export class DummyComponent{
9
stringToLocalize: string = `@@localizedString`
10
}
Copied!
Strings that need to be localized must have the '@@' prefix which the flxLocalize pipe uses to extract and replace the string with a value found in the substitution tags enumeration.
Substitution tags are retrieved when a start process call is first made, and it's cached on subsequent start process calls.
Last modified 1mo ago