How to add custom Javascript in your Bonita BPM Forms

ttoine's picture
ttoine
Blog Categories: 

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.

javascript-studio-resources-1_0.png

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><br />
        .

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).

Comments

Submitted by kppatel on Mon, 04/14/2014 - 09:28

Sir , your code is amazing thank you very very much for this simple and perfect tutorial

i have query ,

i take one html widget and put into javascript and make 2 fields 1. select field (y/n ) 2. text field

if user select y then text field appear , otherwise it remain hide . but now . if user select y and text field appear and put data into that field .

my query is that how can i store that text field's data to Bonita's variable ?

Thanks in advance

Submitted by eder.roger.souza on Fri, 07/04/2014 - 14:05

Hy thanks for the example! But when i try from the bonita studio perfectly work, but when i build the process and install .bar file on my bonita portal the same script won't load.. Can you help me?

Thanks in advance.

Submitted by ferabr on Fri, 07/04/2014 - 14:38

We tried your example, and it dit work when I run on "test mode" from BonitaStudio. When I build the .BAR and export it to my portal intallation, it didn't load the javascript resource.

We looked up on the html source and found that on BonitaStudio "test mode", it has an script tag loading the javascript resource, like this:

But this tag was not present when we run on our portal installation.

PS: We're using Community Version (6.3.0).

Thanks

Submitted by ttoine on Tue, 09/02/2014 - 14:27

SO yes, we are aware of that. I tested only "standalone" forms, from the Studio or from a bundle, and this is working. However, you are right, when loading a form from the portal, it doesn't work (the form is not loaded in the same template, so not the same html header).

The workaround is to add the script link to the .js file in a html widget, directly in the form.

You can also modify directly in your bundle the bonitaform.html file, but it might be deleted when upgrading. Take care to modify both files from tenant, and tenant template in case you create multiple tenants after.

Submitted by wynshaft on Thu, 02/18/2016 - 15:28

I believe the issue that most are having stems from the fact that the OP misspoke. The Edit forms template step tells you to edit the "Entry Form Page Template" file. So this step should instead read:

Edit forms template Still in the pool , go to "Application / Look'n Feel", and edit the "Process layout" file. A new tab will open (process.html). In the header add the link to the .js file. The root is the "application" directory of the resources, e.g: ... (and so forth)

I hope this helps.

Heath Dinkins Java Software Engineer II at Leidos

Notifications