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:
- Install Node.js and npm (more info https://www.npmjs.com/get-npm)
- Install Yeoman command line utility generator which is used to scaffold projects from templates (more info https://yeoman.io/learning/index.html)
npm install -g yo
- Install WEBCON Yeoman generator which contains the templates (https://www.npmjs.com/package/generator-webcon or in https://yeoman.io/generators/ search for webcon)
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.
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.
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
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.