Form Field Extension

Starting from version 2020, you can write your own UI extensions for the modern form based on the WEBCON BPS portal interface. These extensions are supposed to add extra functionality to standard form fields that exist in the WEBCON BPS system by default, and customize them to better match your business needs. The example below describes the process of creating your first Form Field Extension JS step by step, in order to show you that it is not that hard as it may seem at first. The example involves a control which allows you to input and validate a number in the postcode format used in Poland.

Templates and tools

As with other types of plugins, you can use our templates which are designed to make the process of creating your own extensions effortless. There are 2 places from where you can grab the installer and extend your Visual Studio instance:

• Documentation\Quick start BPS SDK directory inside WEBCON installer
• Visual Studio Marketplace

In addition to the templates, it installs the WEBCON BPS SDK Tool which will help you with the process of building and testing your own Form Field Extension JS, as well as creating the package of all the plugins whose description can be found in the plugin manifest JSON file.

Creating a project

After you confirm the selection of your project type, choose a name, location and solution name.

Make sure that the checkbox “Place solution and project in the same directory” is not selected, because it interfere in the process of creating and publishing package with your plugins.

Creating a modern form field extension

In order to develop your own extension of a form field on the modern form, it is recommended to use the item template: BPS 2024 Form Field Extension JS, because it will create the whole structure with all necessary files, along with the example code, and also add appropriate entry in the manifest JSON file which is supposed to exist in the root of the project. We will name the extension PhoneNumberControl because of its intent.

After choosing a name and clicking the “Add” button, a popup will be appear which will ask you for some additional details about the created plugin. In this example, let’s create an extension for the modern form field that is not connected with the logic class in order to make this really straightforward.

WEBCON BPS SDK Tools

The VSIX installer which you used to extend Visual Studio with WEBCON BPS Extensions also provides the WEBCON BPS SDK Tools. It tries to find plugins of type Form Field Extension JS which are specified in the manifest file inside the startup project. If your solution contains more than one project, you can switch the controls displayed in the tool by right clicking the project and using the command “Set as startup project”. The tool can be found in View > Other Windows as shown below.

Building Form Field Extension JS

In order to build your Form Field Extension JS you have to select it in the appropriate dropdown in the tool and click the build button. It results in creating the BPSPKG file which contains all necessary files for the control. Please keep in mind that the first time you build the modern form field will take a little bit longer, due to downloading all the npm dependencies the extension needs.

Testing Form Field Extension JS

To help with the process of creating your own Form Field Extension JS, we also equip you with the so-called workbench, which creates an environment that allows you to test the extension. Once you have built your control, you can try it out with the test button – found next to the build button.

Publishing the package

Once you have built your extensions, you can use the WEBCON BPS SDK Tools publish functionality. It will create a package of your plugins which is described in this article. The only new thing here is the existence of the BPSPKG file. The contents of freshly generated package that is ready to be imported into WEBCON BPS Designer Studio are shown below.

Registering the package

You register the package in WEBCON BPS Designer Studio as shown below. It will add all your plugins that exist in the package automatically. You can then verify if everything has been imported correctly.

Designing the workflow

For the sake of simplicity, this tutorial we will feature a very straightforward workflow that consists of three steps, but of course you can build any workflow/process/application you want.

Then create the form field of the type “Single line of text” and customize it with the created extension.

As with any other field, do not forget about positioning it on the Global form template and making it visible via the Field matrix, as shown below:

Now save your process and start a new workflow instance inside it. After you start your new instance and progress it to (in this example) the intermediate step, you should be able to see your modern form field extension as in shown on the screen below.

Congratulations! You have created your first Form Field Extension JS for the modern form.