Enterprise Form Builder Module - COMING SOON

The Enterprise Form Builder Module is in active development. A module for Angular applications has been developed and work continues on a module for React applications. Please contact [e-mail] for more information regarding this module.

Introduction

The Enterprise Form Builder Module is a module that allows to build an application with the ability to create, modify and view forms and submissions and use a custom configuration of the form builder. The module also includes features such as multi-tenant capability, conflict resolution for the form building and the use of a custom form builder configuration.

Create a Form Builder Application

To start using the Enterprise Form Builder Module, create an application. An example of creating a new Angular application can be found here. After creating the application, install the Enterprise Form Builder Module. Use one of the following terminal commands to install the @formio/form-builder-lib module into your application:

npm i --save @formio/form-builder-lib

or

yarn add @formio/form-builder-lib

Application Configuration

Now we will need create a configuration file to point to the Form.io project and connect the Enterprise Form Builder Module. In order to further use access to the tenant using the modified payload token, it is necessary to specify the Portal Base project as an appUrl.

Next, we will need to register this FormBuilderModule within the main module by adding the following to the app.module.ts file.

...
import { FormBuilderModule, FormBuilderRoutes, FormBuilderService, FormBuilderConfig } from '@formio/form-builder-lib';
...

@NgModule({
  ...
  imports: [
    ...
    FormBuilderModule,
    RouterModule.forChild(FormBuilderRoutes()),
    ...
  ],
  providers: [
    ...
    FormBuilderService,
    {provide: FormBuilderConfig, useValue: {
      license: 'yourLibraryLicense'
    }}
    ...
  ],
  ...
})

Please note that you need a library license with the enterpriseBuilder enabled to use the @formio/form-builder-lib module. Contact [e-mail] to acquire a License

User Authentication

Now set up authentication in accordance with the documentation. There is also an example of adding authentication to the application here.

One of the features of the module is the ability to use the same application for different tenants. Therefore, make sure that the appropriate authentication setting is performed, which connects the authenticated user with the corresponding tenant. Only one tenant can correspond to each user. There are several ways to do this. The first way is to use Tenant Access in the SAML settings of the Portal Base project and assign each tenant with the appropriate role and project permissions. The second way is to use any custom parser and modify the token payload by adding the access property:

...
 "access": {
     "TENANT_NAME": "PERMISSION"
  }
...

TENANT_NAME - the name of the tenant

PERMISSION - the available permission for the tenant; the similar to the permissions of the teams ('team_read', team_write', 'team_admin')

Using Components

The Enterprise Form Builder Module includes various components and routes for navigation between components.

Index Component

The initial component of the module

Create Form Component

Form Builder for creating a new form

Forms Component

List of forms for the current tenant

Form Component

Editing, submit, deleting, and viewing data for an existing form

Reports Component

Viewing the list of reports

Report Component

Viewing the current report

Index Component

The index component is the initial component of the module with tenant initialization and navigation through other components of the module. Route path is '/'.

Create Form Component

The Create Form is used to create new forms.

The Enterprise Form Builder Module allows to use a custom configuration of the Form Builder with modified component groups. To do this, create the appropriate configuration in the Builder Creator (coming soon) section of the Developer Portal.

Route path is '/builder'.

Forms Component

The Forms Component is a list of available forms of the current tenant with the ability to navigate through these forms. Route path is '/forms'.

Form Component

There are four tabs for the Form Component:

Edit

The Form Edit Component allows to change existing forms.

Similarly to Create Form Component, the Form Edit Component can use a custom configuration of the Form Builder.

Conflict resolution functionality is also provided for editing the form. If two users make changes to the same form at the same time, when saving the form, all changes will be combined and the corresponding message will be displayed.

Route path is '/form/:formId/edit'.

Use

The Form View Component to view the form and make a submission.

Route path is '/form/:formId/view'.

Data

A Form Submission Component is used to view a list of submissions, viewing a single submission, editing and deleting a submission

The Form Submission Index Component route path is '/form/:formId/submission'.

The Form Submission View Component route path is '/form/:formId/submission/:submissionId/view'.

The Form Submission Edit Component route path is '/form/:formId/submission/:submissionId/edit'.

The Form Submission Delete Component route path is '/form/:formId/submission/:submissionId/delete'.

Delete

The Form Delete Component is used to delete the current form. Route path is '/form/:formId/delete'.

Reports Component

The Reports Component displays a list of reports for current tenant with the ability to view any report.

Route path is '/reports'.

Report Component

The report component is used to view the current report. Route path is '/reports/:reportId'.

Before using this component, make sure that you have the appropriate license or contact [e-mail] for more information. Additional information about the reporting UI and the creation of reports can be found here.