Many of you have asked on our Community website how to add custom Javascript in Bonita BPM Forms. The fact is this is quite easy to do it in Bonita BPM Studio, in just a few steps. There are already many answers about this, but they are scattered and not easy to find, so it's time to make a how-to, all in one place. I just tested and redid the screenshots from this answer, using Bonita BPM 6.2.4.
Get jquery
As an example, I will show how to integrate and use the jquery library called "Unslider". First, go to http://unslider.com/ and keep a tab open with this in your browser, as you will have to do some copy/paste.
At the bottom, download the minified javascript. I checked with the developer - the licence is WTFPL, so we can do what we want with this library, even distribute it in some commercial applications.
Add to Bonita BPM Studio resources
You need now to include this in the Bonita BPM Application. In Studio, click on the pool and then "Application / Resources". Add a folder, and then, upload the unslider.min.js file. On Linux, with 6.2.4, you might have first to create a folder on your file system, add the javascript in this folder, and then click on "add folder" to add both folder and files included. Once the folder is created, you can use "add file".
This library will now be available for the process.
Edit forms CSS
Now, see how to use it. We need to add some CSS, some html and integrate the .js file in the header of the html template. All necessary code can be copy/pasted from the Unslider website.
While you are in the resources, click on the "CSS" directory, then on "bonita_form_default.css" file. Click on Edit. A new tab is now open with the CSS of the forms:
From the Unslider website, copy and paste the CSS for the slider:
Edit forms template
Still in the pool , go to "Application / Look'n Feel", and edit the "Entry Form Page Template". A new tab will open. In the header add the link to the .js file. The root is the "application" directory of the resources, e.g:
<script src="javascript/unslider.min.js"></script>
.
Add the html to the form
Now, open the form where you want to use your script, add an html widget, and paste the html example and the javascript function (do not forget the script tags) of Unslider in the "Constant" section of the data editor:
Save all open tabs (forms, css, html template, ...) and "Run". If everything is working, you should have something like this:
And voilà!
You can also find an example .bos file in the Projects section: Custom Javascript Example
And to finish this blog post, I just would like to mention that if you missed it, a new maintenance release is available on our download page: Bonita BPM 6.2.5 (release note).