In the following three articles, you will learn the basic usage of the Questetra Form JavaScript API that can be used to decorate form screens.
- Get/Set Data Item Values on the Form Screen
- Perform Processing When an Event Occurs on the Form Screen
- Perform Your Own Input Checks on Form Screens
This series of articles is a split and re-edited version of Using [Questetra Form JavaScript API] on the Form Screen.
1. Decorate the Form Screen
In Questetra BPM Suite, you can decorate form screens by writing HTML.
- Display explanatory text such as instructions for data entry
- Decorate the text that will be displayed
- Display links to websites for reference
In addition, with Javascript and the Questetra Form Javascript API, you can also do the following (in the Professional Edition).
- Automatically count the number of input characters
- Add your own input checks
In a series of tutorials, you will learn about the Questetra Form Javascript APIs and how to use them.
- Related Documents
- Questetra Form JavaScript API is guaranteed to work, but other JavaScript codes are not guaranteed to work. Please consider the need for future maintenance before using it, as there is a possibility that its behavior may change in future versions.
2. Preparing a Workflow App
Prepare a workflow app to run the sample code using Questetra Form Javascript API. Please create a new App and configure it in the following order.
2.1. Setting up a Workflow Diagram
Create a workflow diagram with one start event, one Human Task, and one end event on the Swimlane. Change the name of the Human Task to “H1. Input”.
2.2. Data Item Settings
Add two String-type Data Items, one multi-line and one single line, and configure them as follows.
| Item Name | Data Type | File Name | Editability (“H1. Input” process) | Notes |
|---|---|---|---|---|
| Text Input | String (mulitple lines) | q_Input_Text | Editable | Enter text here. |
| Character Count | String (single line) | q_Characters_Count | Editable | Displays the number of characters entered. |
2.3. Check the Form Screen
Open the form preview screen of the Human Task “H1. Input”. If the data items “Text Input” and “Character Count” are displayed on the preview screen as editable input fields, you are ready to go.
3. Get/Set the Value of a Data Item
We will implement the process of getting the value of a Data Item when a button placed on a form screen is clicked, and updating the value of another Data Item after processing.
Through this process, you will learn how to Get/Set the value of a Data Item on the form screen using Questetra Form Javascript API.
Write a sample code that performs the following sequence of processes when a button is clicked.
- Obtains the string entered in the “Text Input” Data Item.
- Counts the number of characters in an input string
- Set the count result to the Data Item “Character Count”.
The Questetra Form JavaScript API Gets/Sets the value of a Data Item in the following format.
- Get the value of a Data Item
- const value = qbpms.form.get( ‘{data item field name}’ );
- Set the value of a Data Item
- qbpms.form.set( ‘{field name of data item}’, {value in format according to data type} );
- Updating a value overwrites the value displayed in the field on the form screen. The values on the server will not be updated unless the task is saved or completed.
- Depending on the data type, the object at Get/Set will differ. For details, see reference page R2132: Questetra Form JavaScript API」.
3.1. Code Setup
Set the following code in the Description field of the Data Item “Character Count”.
<button type="button" onclick="user_countInputText()">Character Count</button>
<script>
// Character counting process
function user_countInputText(){
// Obtaining the value of the "Text Input" Data Item
const strInputText = qbpms.form.get('q_Input_Text');
// Count the number of characters and set the character count value in the "Character Count" Data Item
qbpms.form.set('q_Characters_Count', strInputText.length);
}
</script>To avoid conflicts with those used in Questetra, define your own function names/element IDs to begin with “user_“。
After setting the code, display the preview screen of the “H1. Input” process. If the [Character Count] button is added under the “Character Count” Data Item, the settings are complete.
3.2. Operation Check
Check the operation of the script you have written. Open the “H1. Input” process preview screen.
After entering the appropriate characters in the “Text Input” field, click the “Character Count” button. The number of characters entered in the “Text Input” field will be displayed in the “Character Count” field.
We have confirmed that the process of retrieving the string entered in “Text Input”, counting the number of characters, and then setting the value in “Character Count” is working.
Since this is a sample, we are using the preview screen to check the code operation.
For workflow applications used in practice, be sure to check the operation not only on the preview screen but also on the actual task processing screen (perform debugging or start a new process after the App is released).
In this article, you learned how to Get/Set the values of data items on the form screen using the Questetra Form Javascript API.
Next, we will learn how to register/delete event handlers.