Skip to main content
Version: 2.13.0

Using the Angular Renderer

Angular project requirements

Your app MUST be created using the ng app from the @angular/cli~13.2.0 package. It also MUST use SCSS for styling.

npm install -g @angular/cli~13.2.0
ng new my-flowx-app

Installing the library

info

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.

info

The library uses Angular version @angular~13.2.0, npm v8.1.2 and node v16.13.2.

Use the following command to install the renderer library and its required dependencies:

npm install flowx-process-renderer paperflow-web-components moment@2.29.1 \
@angular/flex-layout@13.0.0-beta.37 @angular/material@13.2.0 \
@angular/material-moment-adapter@13.2.0 @angular/cdk@13.2.0 \
socket.io-client

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

"stylePreprocessorOptions": {
"includePaths": [
"./node_modules/paperflow-web-components/src/assets/scss",
"./node_modules/flowx-process-renderer/src/assets/scss/style.scss",
"src/styles"]
}
info

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.

 "styles": ["..., "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"],

Theming

Theming is done through the ppf-theme mixin that accepts as an argument a list of colors grouped under primary, status and background

@use 'ppf-theme';

@include ppf-theme.ppf-theme((
'primary': (
'color1': vars.$primary,
'color2': vars.$secondary,
'color3': vars.$text-color,
),
'status': (
'success': vars.$success,
'warning': vars.$warning,
'error': vars.$error,
),
'background': (
'background1': vars.$background1,
'background2': vars.$background2,
'background3': vars.$background3,
),
));
info

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.

# example
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import {FlxProcessModule} from 'flowx-process-renderer';
import { IconModule } from 'paperflow-web-components';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';


@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
// will be used by the renderer SDK to make requests
HttpClientModule,
// needed by the renderer SDK
IconModule.forRoot(),
FlxProcessModule.forRoot({})
],
// this interceptor with decorate the requests with the Authorization header
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
],
bootstrap: [AppComponent]
})
export class AppModule {
}

The forRoot() call is required in the application module where the 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.

// example
FlxProcessModule.forRoot({
components: {
YourCustomComponentIdenfier: CustomComponentInstance,
},
services: {
NomenclatorService,
LocalDataStoreService,
},
validators: {currentOrLastYear },
})
  // example of a custom validator that restricts data selection to 
// the current or the previous year

currentOrLastYear: function currentOrLastYear(AC: AbstractControl): { [key: string]: any } {
if (!AC) {
return null;
}

const yearDate = moment(AC.value, YEAR_FORMAT, true);
const currentDateYear = moment(new Date()).startOf('year');
const lastYear = moment(new Date()).subtract(1, 'year').startOf('year');

if (!yearDate.isSame(currentDateYear) && !yearDate.isSame(lastYear)) {
return { currentOrLastYear: true };
}

return null;
}
caution

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:

  # example
<flx-process-renderer
[apiUrl]="baseApiUrl"
[staticAssetsPath]="staticUrl"
[processApiPath]="processApiPath"
[processName]="processName"
[processStartData]="processStartData"
[debugLogs]="debugLogs"
[keepState]="keepState"
[language]="language"
></flx-process-renderer>

Parameters:

NameDescriptionTypeMandatoryDefault valueExample
baseApiUrlYour base urlstringtrue-https://yourDomain.dev
processApiPathEngine API prefixstringtrue-/onboarding
staticUrlStatic asset urlstringfalse-
processNameIdentifies a processstringtrue-client_identification
processStartDataData required to start the processjsontrue-{ "firstName": "John", "lastName": "Smith"}
debugLogsWhen set to true this will print WS messages in the consolebooleanfalsefalse-
languageLanguage used to localize the application.stringfalsero-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

booleanfalsefalse-
isDraftWhen true allows starting a process in draft state. *Note that isDraft = true requires that processName be the id (number) of the process and NOT the name.booleanfalsefalse-

Data and actions

Custom components will be hydrated with data through the $data input observable which must be defined in the custom component class

@Component({
selector: 'my-custom-component',
templateUrl: './custom-component.component.html',
styleUrls: ['./custom-component.component.scss'],
})
export class CustomComponentComponent {
@Input() data$: Observable<any>;
}

Component actions are always found under data -> actionsFn key.

Action names are configurable via the process editor.

# data object example
data: {
actionsFn: {
action_one: () => void;
action_two: () => void; }
}

Interacting with the process

Data from the process is communicated via websocket protocol under the following keys:

NameDescriptionExample
Datadata updates for process model bound to default/custom components
ProcessMetadataupdates about process metadata, ex: progress update, data about how to render components
RunActioninstructs the UI to perform the given action

Task management component

The flx-task-management component is found in the FlxTaskManagementModule. In order to have access to it, import the module where needed:

import {FlxTaskManagementModule} from 'flowx-process-renderer';
@NgModule({
declarations: [
...,
],
imports: [
...,
FlxTaskManagementModule
],

})
export class MyModule {
}

Then in the template:

<flx-task-management [baseUrl]="baseUrl" [title]="'Tasks'">
</flx-task-management>

Parameters:

NameDescriptionTypeDefaultMandatoryExample
apiUrlEndpoint where the tasks are availablestring-truehttps://yourDomain.dev/tasks
titleTable header valuestringActivitiesfalseTasks
pollingIntervalInterval for polling task updatesnumber5000 msfalse10000

Was this page helpful?