The FlowxProcessRenderer is a low code library designed to render UI configured via the Flowx Process Editor.
react
and react-dom
can be skipped if you already have them installed in your project.<version>
with the version corresponding to the platform version that you are using.FlxProcessRenderer
will be imported in the from the @flowx/react-sdk
package.
@flowx/react-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.
FlxProcessRenderer
as an input.FlxProcessRenderer
component is required in the application module where the process will be rendered. The component accepts a props where you can pass extra config info, register a custom component 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 (customValidator
) in the template config panel in the validators section of each generated form field.
<FlxProcessRenderer />
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"} |
language | Language used to localize the enumerations inside the application. | string | false | ro | - |
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 | - |
locale | Defines the locale of the process, used to apply date, currency and number formatting to data model values | boolean | false | ro-RO | - |
projectInfo | Defines which FlowX Project will be run inside the process renderer. | json | true | - | { "projectId": "111111-222222-333333-44444"} |
FlxProcessRenderer
component in your application. The component accepts various props that define the process to start, the theme to use, and other configuration options.
components
parameter to the <FlxProcessRenderer />
component.
components
prop MUST match the custom component names defined in the FlowX process.inputKey
is available under data
-> data
data
-> actionsFn
key.<FlxProcessRenderer />
component, add the following property:
validators
prop of the <FlxProcessRenderer />
component.
The validators are then processed and piped through the popular React Hook Form library, taking into account how the error messages are defined in your process.
A validator must have the following type:
validators
prop MUST match the custom validator names defined in the FlowX process.