-
Notifications
You must be signed in to change notification settings - Fork 198
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added initial collection flow docs
- Loading branch information
1 parent
c587d95
commit b5e661c
Showing
9 changed files
with
1,512 additions
and
2 deletions.
There are no files selected for viewing
Submodule data-migrations
updated
from 27c48a to 38b81a
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
215 changes: 215 additions & 0 deletions
215
websites/docs/src/content/docs/en/collection-flow/introduction.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,215 @@ | ||
| --- | ||
| title: KYB Collection Flow | ||
| description: About Collection Flow | ||
|
|
||
| --- | ||
|
|
||
| ## Introduction to Collection Flow | ||
|
|
||
| Welcome to the documentation for the Collection Flow feature. The Collection Flow is designed to streamline the process of gathering data from customers through dynamic, wizard-style forms. This feature leverages a custom schema format, enabling the creation of multi-step forms that adapt to the specific needs of your application. Each step in the wizard is represented by a schema, which defines the structure, validation, and user interface elements required for that step. | ||
|
|
||
| ### Key Features | ||
|
|
||
| - **Dynamic Form Creation**: Define forms dynamically using a custom schema format. This flexibility allows you to tailor the data collection process to suit various use cases and requirements. | ||
| - **Wizard-Style Navigation**: Break down the data collection process into manageable steps, guiding users through a sequence of pages to ensure a smooth and logical flow. | ||
| - **Custom Validation**: Integrate JSON schema-based validation to ensure the collected data meets your specified criteria before allowing users to proceed to the next step. | ||
| - **Reusable Components**: Utilize predefined UI components and form elements, such as text inputs, date pickers, and checkboxes, to build consistent and user-friendly forms. | ||
| - **Action Triggers**: Define actions that are triggered based on user interactions, such as clicking a button, to perform specific tasks like updating user information or navigating to the next step. | ||
|
|
||
| ### Example Schema | ||
|
|
||
| Here is an example of a schema definition for a single step in the Collection Flow: | ||
|
|
||
| ```json | ||
| { | ||
| "type": "page", | ||
| "name": "Personal Details", | ||
| "number": 1, | ||
| "stateName": "personal_details", | ||
| "pageValidation": [ | ||
| { | ||
| "type": "json-schema", | ||
| "value": "validationSchema" | ||
| } | ||
| ], | ||
| "elements": [ | ||
| { | ||
| "type": "mainContainer", | ||
| "elements": [ | ||
| { | ||
| "type": "container", | ||
| "elements": [ | ||
| { | ||
| "type": "h1", | ||
| "options": { | ||
| "text": "Personal Information" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "type": "json-form", | ||
| "valueDestination": "entity.data.additionalInfo.mainRepresentative", | ||
| "name": "json-form:personal-information", | ||
| "options": { | ||
| "jsonFormDefinition": { | ||
| "required": [ | ||
| "first-name-input", | ||
| "last-name-input", | ||
| "job-title-input", | ||
| "date-of-birth-input", | ||
| "phone-number-input" | ||
| ] | ||
| } | ||
| }, | ||
| "availableOn": [ | ||
| { | ||
| "type": "json-schema", | ||
| "value": "validationSchema" | ||
| } | ||
| ], | ||
| "elements": [ | ||
| { | ||
| "name": "first-name-input", | ||
| "type": "json-form:text", | ||
| "valueDestination": "entity.data.additionalInfo.mainRepresentative.firstName", | ||
| "options": { | ||
| "label": "text.name", | ||
| "hint": "text.firstName", | ||
| "jsonFormDefinition": { | ||
| "type": "string" | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "name": "last-name-input", | ||
| "type": "json-form:text", | ||
| "valueDestination": "entity.data.additionalInfo.mainRepresentative.lastName", | ||
| "options": { | ||
| "hint": "text.lastName", | ||
| "jsonFormDefinition": { | ||
| "type": "string" | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "name": "job-title-input", | ||
| "type": "json-form:text", | ||
| "valueDestination": "entity.data.additionalInfo.mainRepresentative.additionalInfo.jobTitle", | ||
| "options": { | ||
| "label": "text.jobTitle.label", | ||
| "hint": "text.jobTitle.hint", | ||
| "jsonFormDefinition": { | ||
| "type": "string" | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "name": "date-of-birth-input", | ||
| "type": "json-form:date", | ||
| "valueDestination": "entity.data.additionalInfo.mainRepresentative.dateOfBirth", | ||
| "options": { | ||
| "label": "text.dateOfBirth.label", | ||
| "hint": "text.dateHint", | ||
| "jsonFormDefinition": { | ||
| "type": "string" | ||
| }, | ||
| "uiSchema": { | ||
| "ui:field": "DateInput", | ||
| "ui:label": true | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "name": "phone-number-input", | ||
| "type": "international-phone-number", | ||
| "valueDestination": "entity.data.additionalInfo.mainRepresentative.phone", | ||
| "options": { | ||
| "label": "text.phoneNumber", | ||
| "jsonFormDefinition": { | ||
| "type": "string" | ||
| }, | ||
| "uiSchema": { | ||
| "ui:field": "PhoneInput", | ||
| "ui:label": true | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "name": "authority-checkbox", | ||
| "type": "authority-checkbox", | ||
| "valueDestination": "entity.data.additionalInfo.iHaveSigningAuthority", | ||
| "options": { | ||
| "label": "text.iHaveAuthority.label", | ||
| "jsonFormDefinition": { | ||
| "type": "boolean" | ||
| }, | ||
| "uiSchema": { | ||
| "ui:label": false | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "controls-container", | ||
| "type": "container", | ||
| "options": { | ||
| "align": "right" | ||
| }, | ||
| "elements": [ | ||
| { | ||
| "name": "next-page-button", | ||
| "type": "submit-button", | ||
| "options": { | ||
| "uiDefinition": { | ||
| "classNames": ["align-right", "padding-top-10"] | ||
| }, | ||
| "text": "text.continue" | ||
| }, | ||
| "availableOn": [ | ||
| { | ||
| "type": "json-schema", | ||
| "value": "validationSchema" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "actions": [ | ||
| { | ||
| "type": "definitionPlugin", | ||
| "params": { | ||
| "pluginName": "update_end_user" | ||
| }, | ||
| "dispatchOn": { | ||
| "uiEvents": [{ "event": "onClick", "uiElementName": "next-page-button" }], | ||
| "rules": [ | ||
| { | ||
| "type": "json-schema", | ||
| "value": "validationSchema" | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "type": "definitionEvent", | ||
| "params": { | ||
| "eventName": "NEXT" | ||
| }, | ||
| "dispatchOn": { | ||
| "uiEvents": [{ "event": "onClick", "uiElementName": "next-page-button" }], | ||
| "rules": [ | ||
| { | ||
| "type": "json-schema", | ||
| "value": "validationSchema" | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| ] | ||
| } | ||
|
|
Oops, something went wrong.