Using JavaScript in WEBCON BPS 

Applies to version: 8.0.x; author: Kamil Nędza

Description of functionality:

When you use WorkFlow from the web browser level, it is often necessary that the form looks or behaves in an appropriate way. This is where JavaScript comes into play. By using it you can change attribute values ​​, hide field visibility or provide additional validation conditions. WEBCON BPS – Designer Studio allows you to use JavaScript in many ways:

  • As a script  to perform when changing form field value
  • As a script to register on the website
  • Globally as a script to run when loading pages
  • Globally as a script to run when loading pages and doing postbacks
  • As an additional validation script when selecting a path

In addition WEBCON BPS – Designer Studio has a JavaScript wizard – a tool for creating scripts. It allows the user to enter scripts manually or use the available ready-made scripts.


Figure 1. The window of JavaScript wizard

Example of implemented functionality:

You want to add two features to the existing budget workflow (The description of the workflow can be found in the article: Workflow control):

  1. Adding the “Change initial amount” checkbox in the “Budget implementation” step.  When you select it, the “New initial amount” form field will appear. Following the “Change initial amount” path will result in the change of the “Initial amount”.
  2. Adding the “Cancel budget” path.  Selecting this path will move the document to the “Cancelled” step. You want a JavaScript to be added to the path that displays a dialog box asking if you are sure that you want to cancel the budget.


Add a “Change initial amount ” Yes / No form field (checkbox) and  a “New initial amount” form field to the existing workflow.  Add a new “Change initial amount” path, a  negative step “Cancelled” and a “Cancel” path which leads to it. Add an action on the “Change initial amount” path that will change the value of the “Initial amount ” attribute to the value of the “New initial amount” form field.


Figure 2.  Configuration of the “Change [Initial amount]” action

In addition, you will need another action that counts the remaining funds in the budget on entry to the step:


Figure 3: Configuration of action counting the remaining funds on entry to the “Budget implementation” step

After the changes the workflow should look like this:


Figure 4. Diagram of the budget workflow

 Now you need to configure JavaScript. Enter the “Change initial amount” form field and navigate to the “Style and behavior” tab.


Figure 5. Configuration window of form field style and behavior

Use the wizard to create a simple JavaScript condition:


Figure 6. Creating a script in the wizard  

At this point, you already have a set condition saying that when the value of the “Change initial amount” checkbox changes, the “New initial amount” form field will be shown or hidden. However, it is still displayed by default. Move on to edit the “Budget implementation” step:


Figure 7. Edit the „Budget implementation” step

Next, paste a JavaScript in the form field to be run when loading the page. Here, you can use the wizard again and select it from the ready prompts.

js-f8 Figure 8. Hiding the “New initial amount” attribute when loading a page

You must ensure that it is not possible to enter a null value in the “New initial amount” form field when following the “Change initial amount” path. You can also use JavaScript for this purpose. Edit the “Change initial amount” path, click on the “Parameters” tab and enter the JavaScript editor.


Figure 9. “Change initial amount” path parameters

This time you have to use your own script which, in case you do not enter any value, will display a message and prevent you from following the path.

js-f10 Figure 10. JavaScript preventing you from following the path if “New initial amount” is left blank

Now you need to realize the other functionality – the window in which you must confirm your intention to cancel the budget. To do this, go to the details of the “Cancel” path in the “Budget implementation” step.


Figure 11. Parameters of the “Cancel” path

 Just as was the case for the validation of the “Change initial amount” path, you must use your own script now. Its purpose is to display a dialog box with an OK / Cancel choice. If the user confirms, the document will follow the path.

js-f12 Figure 12. JavaScript on the window asking you to confirm your decision


Verification of functionality:


We register the document so that it gets to the “Budget implementation” step:


Figure 13. Registration of the budget

Next verify the operation of the checkbox. You can see that the “New initial amount” form field is invisible. The form field will be displayed only when you check the “Change initial amount” option.


Figure 14. Form view after loading the page

When you click on the checkbox, leave the “New initial amount” form field blank and try to follow the “Change initial amount” path.


Figure 15. The result of JavaScript additional validation

 We fill in the required form field and then try to follow the path.

js-f16 Figure 16. Change in the initial amount


It worked. In Figure 17 you can see that “Initial amount” and “Other funds” have been set up correctly. All that remains now is to check if the additional validation on the “Cancel” path is working. When you click “Cancel”, a dialog box will appear asking you if you really want to cancel the document.


Figure 17. The result of JavaScript additional validation

If you click on “Cancel”, you will stay in the current step. If you click “OK”, you will follow the  “Cancel” path.


Leave a Reply

Your email address will not be published. Required fields are marked *