FlowxProcessRenderer is a low code library designed to render UI configured via the Flowx Process Editor.
angular.json
:
@flowx/ui-theme
and the paperflow-web-components
libraries for styling. In order properly to set up styling, add the following declaration in the styles property:FlxProcessModule
will be imported in the AppModule
as FlxProcessModule.forRoot({})
.
You MUST also import the dependencies of FlxProcessModule
: HttpClientModule
from @angular/common/http
and IconModule
from @flowx/ui-toolkit
.
theme_tokens.json
, theme_components.json
) that need to be added in the assets folder of your project The file paths need to be passed to the FlxProcessModule.forRoot()
method through the themePaths
object.
Authorziation: Bearer ...
).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.
Name | Description | Type | Mandatory | Default value | Example |
---|---|---|---|---|---|
baseApiUrl | Your base url | string | true | - | https://yourDomain.dev |
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. *Note that isDraft = true requires that processName be the id (number) of the process and NOT the name. | boolean | false | false | - |
legacyHttpVersion | Set this to true only for HTTP versions < 2 in order for SSE to work properly. Can be omitted otherwise. | boolean | false | false | - |
data
-> actionsFn
key.
Action names are configurable via the process editor.
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 |
flx-task-management
component is found in the FlxTaskManagementModule
. In order to have access to it, import the module where needed:
Name | Description | Type | Default | Mandatory | Example |
---|---|---|---|---|---|
apiUrl | Endpoint where the tasks are available | string | - | true | https://yourDomain.dev/tasks |
title | Table header value | string | Activities | false | Tasks |
pollingInterval | Interval for polling task updates | number | 5000 ms | false | 10000 |
./start_with_build_lib.sh
ng test