# formsflow-wc

> Hybrid form embedding

Latest version **1.0.2** (published 2023-02-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install formsflow-wc
pnpm add formsflow-wc
yarn add formsflow-wc
bun add formsflow-wc
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-02-13 |
| First published | 2022-08-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | abijithsebastian |

## Links

- npm: https://www.npmjs.com/package/formsflow-wc
- Repository: forms-flow-ai-web-components
- npm.io page: https://npm.io/package/formsflow-wc

## Dependencies (9)

- [axios](https://npm.io/package/axios.md) ^0.27.2
- [react](https://npm.io/package/react.md) ^18.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.1.0
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [keycloak-js](https://npm.io/package/keycloak-js.md) ^20.0.1
- [react-formio](https://npm.io/package/react-formio.md) ^4.3.0
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [react-to-webcomponent](https://npm.io/package/react-to-webcomponent.md) ^1.5.1
- [formsflow-formio-custom-elements](https://npm.io/package/formsflow-formio-custom-elements.md) ^1.0.3

## Recent versions

- 1.0.2 (latest) — 2023-02-13
- 1.0.1 — 2023-02-13
- 1.0.0 — 2023-02-10
- 0.1.1 — 2022-08-22

## README

# forms-flow-ai-web-components
 **HYBRID FORM EMBEDDING** 

Hybrid form embedding is a feature where you can embed both authenticated and anonymous forms in your application. This feature allows user to submit forms from your application. 

We are providing our formsflow webcomponent (```<formsflow-wc></formsflow-wc>```) that you can add in your frontend framework. The component will accept some parameters that will be different for different scenarios.

You can use our webcomponent in your application by either installing our npm package or using our cdn. 
 * cdn : https://d212bc5dnplrd1.cloudfront.net/
 * npm package : npm i formsflow-wc
 
We will provide two more links along with our component for styling purpose:
<br/>&nbsp;&nbsp;(i) for bootstrap (you can avoid that if you are already using the bootstrap in your application).
 * bootstrap : https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css

&nbsp;&nbsp;(ii) for formio css.
 * formio css : https://cdn.jsdelivr.net/npm/formiojs@4.13.1/dist/formio.full.min.css

 As of now there are three scenarios :
 
 1. Anonymous Forms
 
 2. Authenticated Forms (Internal)
 
 3. Authenticated Forms (External)
 
 **1. Anonymous Forms**
 
 **Step 1**
 
 Add the below mentioned webcomponent to your html file :
    
       
       <formsflow-wc
	       configFile
	       anonymousUrl = ''
           message = ''
       >
       </formsflow-wc>
       
Here, the webcomponent will accept three parameters :

First,

        configFile = {
	        authenticationType : 'anonymous',
		formioUrl: '',
            webApiUrl : ''
        }
      
|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- | 
| ```authenticationType``` | String |The preferred type of authentication | anonymous |
| ```formioUrl``` | String | formio url | eg : 'https://sample.com/formio/form' | 
| ```webApiUrl``` | String | Api url | eg : 'https://sample.com/api' |

Second,

	anonymousUrl
	
	
|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- | 
| ```anonymousUrl``` | String |The anonymous url from formio | eg : 'https://sample.com/formio/formname' |

Third,
	
	message
	
|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- | 
| ```message``` | String |The message after successful submission of form | eg : Thank you for your response |	

eg :

      <formsflow-wc
      configFile
      anonymousUrl="https://sample.com/form/formio/test-form"
      message ="Thank you for your Response"
      >
      </formsflow-wc> 
      

Replace and add the config file according to your environment. Convert the config file to string using stringify or other methods in javascript.

eg:

    const configFile = {
    authenticationType : "anonymous",
    formioUrl: 'https://sample/form/formio',
    webApiUrl: 'https://sample.com/api',
    }
    document.querySelector('formsflow-wc').setAttribute('configFile',JSON.stringify(configFile))


**2. Authenticated Forms (Internal)**

AuthenticationType ‘internal’ means the parent application (the application where the webcomponent is implemented) will be using keycloak for authentication.

**Step 1**
 
 Add the below mentioned webcomponent to your html file :
 
 	   <formsflow-wc
	       configFile
           formName = ''
	       message = ''
        >
        </formsflow-wc>

Here, the webcomponent will accept three parameters :

First,

        configFile = {
            keycloakUrl : '',
	        realm : '',
	        clientId : '',
	        authenticationType : 'internal',
            webApiUrl : ''
        }
	
|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- |
| ```keycloakUrl``` | String | keycloak  url | eg : 'https://sample.com/auth' |
| ```realm``` | String | keycloak realm | eg : sample |
| ```clientId``` | String | keycloak client id | eg : tenant-clientId |
| ```authenticationType``` | String | The preferred type of authentication | internal |
| ```webApiUrl``` | String | Api url | eg : 'https://sample.com/api' |

second,
	
	formName
	
|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- |
| ```formName``` | String | pathname of form | eg : testform |

In case of multitenancy, path name should contain tenant key (tenantkey-pathname)

Third,
	
	message
	
|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- | 
| ```message``` | String |The message after successful submission of form | eg : Thank you for your response |	

eg :

    <formsflow-wc
       configFile
       formName = 'test-form'
       message = 'Thank you for your response'
    >
    </formsflow-wc> 

Replace and add the config file according to your environment. Convert the config file to string using stringify or other methods in javascript.

eg:

      const configFile = {
      keycloakUrl : 'https://sample.com/auth',
      realm : 'test',
      clientId : 'testId',
      authenticationType : 'internal',
      webApiUrl : 'https://sample.com/api'
  }
  
  document.querySelector('formsflow-wc').setAttribute('configFile',JSON.stringify(configFile));
  

**Authenticated Forms (External)**

AuthenticationType ‘external’ means the parent application(the application where the webcomponent is used) is not using keycloak for authentication.

**Step 1**

Add the below mentioned webcomponent to your html file :
 
 	   <formsflow-wc
	       configFile
           formName = ''
           token = ''  
	       message = ''
        >
        </formsflow-wc>

Here, the webcomponent will accept four parameters :

First,

	configFile = {
	        authenticationType : 'external',
            webApiUrl : ''
        }

|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- | 
| ```authenticationType``` | String |The preferred type of authentication | external  |
| ```webApiUrl``` | String | Api url | eg : 'https://sample.com/api' |

second,
	
	formName
	
|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- |
| ```formName``` | String | pathname of form | eg : testform |

In case of multitenancy, path name should contain tenant key (tenantkey-pathname)

Third,

	token

|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- |
| ```token``` | String | jwt token which created by the shared secret of formsflow |eg : "eikjndsf2ediuhiugyugyugg" |

Note : 
*  For normal case, the token should be created by encoding the preferred_username and email. 
   * eg: { preferred_username : 'sample' , email : 'sample@gmail.com'}
*  For multitenancy, tenant key should be added along with preferred_username and email
   * eg : { preferred_username : 'sample' , email : 'sample@gmail.com' , tenantKey : 'tenant1'}
 
Fourth,
	
	message
	
|  Variable Name       | Type  | Description  | Possible Values  |
| -------------------- | ----- | -----------  |---------------- | 
| ```message``` | String |The message after successful submission of form | eg : Thank you for your response |	

eg :

     <formsflow-wc
       configFile
       formName = 'test-form'
       token = 'e11jsijuihsiuhsuhiushuisjsoijiosjos88skmsiuhsuihsiuhyusguysguyshyusgyusgyusg'  
       message = 'Thank you for your response'
    >
    </formsflow-wc>

Replace and add the config file according to your environment. Convert the config file to string using stringify or other methods in javascript.

eg:

          configFile = {
           authenticationType : 'external',
           webApiUrl : 'https://sample.com/api'
          }
	  
	  document.querySelector('formsflow-wc').setAttribute('configFile',JSON.stringify(configFile));




***To add custom components in form embedding*** 

 **Step 1**
 
* Clone the repo forms-flow-ai-web-components
 
       git clone https://github.com/AOT-Technologies/forms-flow-ai-web-components.git
       
 **Step 2**
  
* install node modules

      npm install
      
 note : if you dont need our formsflow custom component you can remove it from the package
 
 eg : 
  
     npm uninstall formsflow-formio-custom-elements
     
 **Step 3** 
 
* install npm package for custom component

 eg : 
  
       npm i forms-flow-custom-component
 
 **Step 4**
 
* import custom component from the package

 eg : 
 
 	import formsFlowCustomComponent from 'forms-flow-custom-component'

 **Step 5**
 
 * use the imported custom component in formio
 
 eg :  
  
        Formio.use(formsFlowCustomComponent)
	
note : 
 * you can create a build by running the command 
 
 	   npm run build
	
* And you can host this build file as cdn and you can use that cdn for form embedding.	
	
	
you can reffer https://github.com/AOT-Technologies/forms-flow-ai-web-components

---
_Source: https://npm.io/package/formsflow-wc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._