Application: Form management - Custom component

Introduction

One of the more powerful features of the FormIO platform is the ability to create your own custom form components. Creating a custom component involves extending the base class of the component that is "closest" to the implementation you desire, and then overriding methods or introducing new methods that implement your custom logic. However, for many features in a real project, we need some resources from the Casewhere system. Thus, a custom component that can connect a FormIO component with Casewhere resources (pages, widgets, etc.) is the best solution for us. In conclusion, this proof of concept (POC) will help you learn to integrate a custom component from the FormIO library into the Casewhere system.

Features

Manage form design

The form design page is used to manage the FormIO design. On the Form design list page, you can view all the created forms, as well as add, edit, and delete data.

formmanagementdemo_1

Form design:

  • Name : Required
  • Description: Optional
  • Form JSON: Optional

formmanagementdemo_6

Example

Company custom component

The following is an example custom component. This is a company dropdown component that lets you configure a component to have a cw_Widget in the cw_Page popup, where you can select a company from the dropdown to save the data as a string to the database.

There are three steps to creating a FormIO custom component in the Casewhere system:

Step 1: Create a Casewhere page. This page is the content of the custom component.

formmanagementdemo_5

Step 2: Create a directive worker site component and include the page created above in this component.

formmanagementdemo_3

Step 3: Create a FormIO custom component and attach the directive from step 2 to the element.

formmanagementdemo_4

Then, the new custom component will appear in the FormIO builder.

formmanagementdemo_7

Make a simple User Form with the company custom component

First, create User Form in the form design page

  • Name : User Form
  • Form JSON:
    • First name (Text Field)
      • Label: First name
      • Property Name: FirstName
    • Last name (Text Field)
      • Label: Last name
      • Property Name: LastName
    • Email (Email)
      • Label: Email
      • Property Name: Email
    • Company (Custom)
      • Label: Company
      • Property Name: Company

formmanagementdemo_2

Then, open the Users page; now you can add a user with your design.

formmanagementdemo_8

Installation

Requirements

  • Casewhere 2.7.1 or later.

Configuration

  1. Import the product
  2. Link the page to your worker sites and configure access control
  3. Create the User Form design

Dependencies

Releases

1.0.0 - 01/07/2022

Changelog

  • Custom component FormIO.

Download (login required) Casewhere Form Management Sample