FlowxProcessRenderer is a low code library designed to render UI configured via the Flowx Process Editor.
angular.json
:
FlxProcessModule
will be imported in the AppModule
as FlxProcessModule.withConfig({})
.
You MUST also import the dependencies of FlxProcessModule
: HttpClientModule
from @angular/common/http
.
@flowx/ui-theme
library. The theme id is a required input for the renderer SDK component and is used to fetch the theme configuration. The id can be obtained from the admin panel in the themes section.
Authorziation: Bearer ...
).flx-process-renderer
as an input.withConfig()
call is required in the application module where the process will be rendered. The withConfig()
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.
<flx-process-renderer></flx-process-renderer>
component. A list of accepted inputs is found below:
Name | Description | Type | Mandatory | Default value | Example |
---|---|---|---|---|---|
apiUrl | Your base url | string | true | - | https://yourDomain.dev |
processApiPath | Process subpath | string | true | - | onboarding |
authToken | Authorization token | string | true | - | ‘eyJhbGciOiJSUzI1NiIsIn…‘ |
themeId | Theme id used to style the process. Can be obtained from the themes section in the admin | string | true | - | ‘123-456-789’ |
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 | - |
projectInfo | Information about the project that contains the process that is being run. | object | true | - | { projectId: '1234-5678-9012' } |
locale | Locale used to localize the application. | string | false | en-US | ’en-US’ |
cache | Caching of static resources | boolean | false | true | - |
data
-> actionsFn
key.
Action names are configurable via the process editor.
FLX_VALIDATOR_SERVICE
service and use it to validate the component. Whe service exposes the following properties:
validate(isValid: boolean)
- used to validate the componentsaveData(data: any)
- used to save datavalidated$
- used to monitor external submission from the processHttpClientModule
is no longer use internally to make HTTP requests. Thus, we have a new mechanism that allows you to create custom interceptors for handling HTTP requests.deps
property to inject the service into the interceptor: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-manager
component is available in the FlxTaskManagementComponent
. To use it, import the required module in your Angular project:
Name | Description | Type | Mandatory | Example |
---|---|---|---|---|
apiUrl | Endpoint where the tasks are available | string | ✅ | https://yourDomain.dev/tasks |
authToken | Authorization token | string | ✅ | (retrieved from local storage) |
appId | The application ID | string | ✅ | (retrieved dynamically) |
viewDefinitionId | The view configuration identifier | string | ✅ | (retrieved dynamically) |
themeId | The theme identifier | string | ❌ | (retrieved dynamically) |
language | The selected language | string | ❌ | (retrieved dynamically) |
locale | The localization setting | string | ❌ | (retrieved dynamically) |
buildId | The current build identifier | string | ❌ | (retrieved dynamically) |
staticAssetsPath | Path for static resources | string | ❌ | (set via environment) |