Skip to main content
Version: 2024.1

Form Field Extension JS without VS

This article will show you how to create your own UI extensions for the modern form based on the WEBCON BPS portal interface with Visual Studio Code on Windows, but the same steps are also valid in any text editor and environment of your choice.

Templates and tools

In order to give you the ability to write the Form Field Extension JS plugins without Visual Studio we have also created the templates and tools that allows you to scaffold projects and automate the vast majority of steps required to develop your own extension.

You have to perform the following commands in order to get the right templates and tools installed on your system:

npm install -g yo
npm install -g generator-webcon

When you have performed steps above you can check available generators by running the following command:

yo --generators

Make sure that the webcon generator is on the list.

The other way to check generators provided by WEBCON is to run the following command:

yo webcon

Now you are ready to start writing your first project.

Creating a modern form field extension project

As of the time of writing the article we provide s template for Form Field Extension JS which we will use as an example of creating your first UI plugin for the modern form in WEBCON BPS.

Head to the directory where you would like to scaffold your project and run the following command:

yo webcon:formfieldextensionjs

You will be asked two questions about your plugin i.e. the plugin name and description which are then used in generated manifest json file. You can read more about it here. We will proceed with default values which are valid for the example generated by template.

PuginName

Then you will be shown some information on the created project and also the next steps necessary to follow in the process of creating your own UI extension for the modern form.

Console

Building Form Field Extension JS

In order to build your Form Field Extension JS you have to head to the created directory and to run.

npm install

It will download the packages and their dependencies. Then the whole process of building your extension will be done automatically which results in creating the BPSPKG file. It contains all necessary files for the control.

Please keep in mind that running the command for the first time will take a little bit longer, due to downloading all the npm dependencies the extension needs.

You can check what scripts are running under the hood in the package.json file. You can also read more about the packages with the build system and the so-called workbench on https://www.npmjs.com/package/@webcon/js-custom-control-build and https://www.npmjs.com/package/@webcon/js-custom-control-workbench

When the build is done your project structure will look as follows

ProjectStruture-1024x555

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 by running the following command:

npm start

Publishing the package

Once you have built your extension, you can use the following command that creates installation package with WEBCON BPS Modern Form extensions:

npm run publish-sdk

You can read more about the package which exposes this command on https://www.npmjs.com/package/@webcon/publish-sdk

The concept of package with plugins is described here. The only new thing here is the existence of the BPSPKG file.

The rest of the process is the same as with the Visual Studio described here.