Skip to content

Latest commit

 

History

History
128 lines (97 loc) · 8.92 KB

README.md

File metadata and controls

128 lines (97 loc) · 8.92 KB

formsflow.ai Web Application

React

formsflow.ai delivers progressive web application with React version 17.0.2 and create-react-app. Also currently uses form.io version 3.2.0.

A React library for rendering out forms based on the form.io platform.

Also formsflow.ai provides a Vue.js based web user interface for easy integration of formsflow.ai with your existing UI based on Vue. To know more details checkout formsflow-ai-extension repository, which can be easily intergrated with your project by installing our npm package.

This component helps to create a customised web application.

Table of Content

  1. Prerequisites
  2. Solution Setup
  3. How to Create Your First Form
  4. Code coverage
  5. Internationalization

Prerequisites

Solution Setup

Keycloak Setup

Skip this step if you are already having a setup ready.

  • Detailed instructions on setting up Keycloak for formsflow.ai web application is mentioned on the link.

Installation

  • Make sure you have a Docker machine up and running.
  • Follow the steps mentioned here
  • Make sure your current working directory is "forms-flow-ai/forms-flow-web".
  • Skip this if forms-flow-analytics setup is completed - Start the analytics server by following the instructions given on readme
  • Rename the file sample.env to .env.
  • Modify the environment variables in the newly created .env file if needed. Environment variables are given in the table below,
  • NOTE : {your-ip-address} given inside the .env file should be changed to your host system IP address. Please take special care to identify the correct IP address if your system has multiple network cards

ℹ️ Variables with trailing 🚩 in below table should be updated in the .env file

Variable name Meaning Possible values Default value
NODE_ENV Define project level configuration development, test, production production
FORMIO_DEFAULT_PROJECT_URL🚩 The URL of the form.io server http://{your-ip-address}:3001
FORMSFLOW_API_URL🚩 formsflow Rest API URL http://{your-ip-address}:5000/api
BPM_API_URL🚩 Camunda Rest API URL http://{your-ip-address}:8000/camunda
KEYCLOAK_URL🚩 URL to your Keycloak server http://{your-ip-address}:8080
KEYCLOAK_URL_REALM The Keycloak realm to use eg. forms-flow-ai forms-flow-ai
KEYCLOAK_WEB_CLIENTID Your Keycloak Client ID within the realm eg. forms-flow-web forms-flow-web
WEBSOCKET_ENCRYPT_KEY Camunda task event streaming. AES encryption of token giert989jkwrgb@DR55
APPLICATION_NAME Application name is used to provide clients application name
WEB_BASE_CUSTOM_URL Clients can use WEB_BASE_CUSTOM_URL env variable to provide their custom URL
ENABLE_APPLICATION_ACCESS_PERMISSION_CHECK To Enable Role level permission check for enabling Application true/false false
FORMIO_JWT_SECRET forms-flow-forms jwt secret --- change me now ---
MULTI_TENANCY_ENABLED Multi tenancy enabled flag for the environment true/false false
DRAFT_ENABLED Enable draft feature true/false
DRAFT_POLLING_RATE Control draft timing 15000
EXPORT_PDF_ENABLED Manage export to pdf feature true/false
PUBLIC_WORKFLOW_ENABLED Enable creating workflow for all tenants
DOCUMENT_SERVICE_URL Formsflow document service api url http://{your-ip-address}:5006
MT_ADMIN_BASE_URL Multitenancy admin url http://{your-ip-address}:5010/api
MT_ADMIN_BASE_URL_VERSION=v1 Version of multitenancy admin v1
KEYCLOAK_ENABLE_CLIENT_AUTH Client auth mechanism false
  • NOTE - While configuring ENABLE_APPLICATION_ACCESS_PERMISSION_CHECK the accessAllowApplications will hide / show application tab. To enable this feature you need to add access-allow-applications with the user group in keycloak.

Running the application

  • forms-flow-web service uses port 5000, make sure the port is available.
  • cd {Your Directory}/forms-flow-ai/forms-flow-web
  • Run docker-compose up -d to start.

NOTE: Use --build command with the start command to reflect any future .env changes eg : docker-compose up --build -d

To stop the application

  • Run docker-compose stop to stop.

Health Check

  • The application should be up and available for use at port defaulted to 3000 in http://localhost:3000/
  • Default user credentials are provided here.

How to Create Your First Form

  • Login to http://localhost:3000/ using valid designer credentials
  • Navigate to menu Forms
  • Click the button + Create Form to launch the form designer studio.
  • Design the form using Drag and Drop of components from LHS to RHS and publish by clicking the button Create Form.

Code coverage

  • Test cases for the files are provided at forms-flow-web using testing-library/jest-dom , testing-library/react , msw and redux-mock-store.
  • cd {Your Directory}/forms-flow-ai/forms-flow-web.
  • Test files are available at forms-flow-ai\forms-flow-web\src\_tests_
  • Run the command npm run coverage to get the total coverage and for individual files run npm test --<test file name>.
  • Total code coverage can obtain by opening forms-flow-ai\forms-flow-web\coverage\lcov-report\index.html with browser.

Internationalization

  • Default language 'English' can be changed to other languages according to the user.
  • The languages currently provided are Chinese,Portuguese,French,German and Bulgarian.
  • User can add more languages by following the steps mentioned here

forms-flow-web Events

This section elaborates events used in forms-flow-web. The Form.io renderer uses the EventEmitter3 library to manage all of the event handling that occurs within the renderer. Custom events are triggered for button components and are fired when they are clicked. More details are here

Events

Name Description     Arguments     Example
reloadTasks
  • Used in the task page
  • Triggered for button components
  • Refresh the Task List and remove the selected task from RHS.
    		•
  • type:The configured event type
    		• form.emit('customEvent', { type: "reloadTasks"});
    reloadCurrentTask
  • Used in the task page
  • Triggered for button components
  • Refreshes the current task selected
    		•
  • type:The configured event type
    		•  form.emit('customEvent', { type: "reloadCurrentTask"});
    customSubmitDone
  • Used in the create form page
  • Triggered for button components
  • Similar to submit button to implement custom logic
    		•
  • type:The configured event type
    		•  form.emit('customEvent', {type: "customSubmitDone"});
    actionComplete
  • Triggered for button components
    		•
  • type:The configured event type
  • component:The component json
  • actionType: Form submit action values
    		•  form.emit('customEvent', { type: "actionComplete", component: component, actionType: actionType });
    cancelSubmission
  • Used in the create form page
  • Triggered for button components
  • Used for Canceling current submission and goin back to Form List Page
    		•
  • type:The configured event type
    		•  form.emit('customEvent', {type: "cancelSubmission"});