Overview
Buttons are an interface object which the user can click to submit the DynaForm, reset the DynaForm, or execute custom JavaScript code, depending on the type of button.
Button
A standard button is used to execute custom JavaScript code in the DynaForm.
Properties
Note: If a DynaForm, where the Button field was added, is assigned as a view mode on a step, this button won't be shown since it is designed to call/contain JavaScript code, this code usually makes JavaScript validations and/or modify values/behavior of the dynaform fields, so in a view mode no JavaScript code will be executed.
Javascript to Execute On Click
Enter the name of a JavaScript object which contains JavaScript code to be executed. In order for code to execute when the user interacts with the button (rather than when the DynaForm is initially displayed), the code has to be added to one of the button's event handlers, such as onclick, onmouseup, or onmousedown.
For instance, in the following example, the function displayTotal() is assigned to the onclick event handler for the button named "ShowTotal". When the button is clicked the function displayTotal() will then display a message box with the total bill for the order.
{
var totalBill;
totalBill = getField("Amount").value * getField("Quantity").value;
G.alert("Your total bill is:\n\t" + totalBill, "Order Information");
}
getField("ShowTotal").onclick = displayTotal;
XML definition:
- <NAME ... onclick="JAVASCRIPT-OBJECT" ...>...</NAME>
Submit
Submit buttons close the DynaForm to continue to the next step in the process. Any data entered into the DynaForm is saved to the to case variables and stored in ProcessMaker's MySQL database in the wf_
It is necessary to add a submit button to every DynaForm which has either the default "No save & Continue" option or the "Prompt" options set for its Next Step Link property (which can be set in the Properties tab in the DynaForm Editor). Otherwise, the data entered into a DynaForm will be lost when the user clicks on the Next Step link in a DynaForm.
Properties
Note: If a Dyanform, where the submit field was added, is assigned as a view mode on a step, this button is displayed, but its label is changed, because it does not change any values (since fields are in view mode), the label is changed to Continue because it only goes to the next step without executing any action. So it is RECOMMENDED not to execute JavaScript code on this button field since in view mode it won't be executed.
Adding JavaScript code
Custom JavaScript code can be added to a submit button to error check the data entered into a DynaForm before it is submitted. If the submit event handler returns true, then the DynaForm will close and its data will be saved. If the submit event handler returns false, then the DynaForm will not close and the user will have the opportunity to correct the errors. It is helpful to provide a feedback message to the user explaining what data needs to be changed.
For instance, in this example a submit button named "SendBid" will check whether the numbers are within an acceptable range before submitting the DynaForm:
var jobType = getField("JobType").value;
var bid = getField("Bid").value;
if (jobType == "remodeling" && bid > "$3000") {
G.alert("Bid is too high for a " + jobType + " job.\nPlease reduce it.", "Error");
return false;
}
else if (jobType == "new construction" && bid < "$5000") {
G.alert("Bid is too low for a " + jobType + " job.\nPlease increase it.", "Error");
return false;
}
else
return true;
}
leimnud.event.add(getField("SendBid"), 'click', checkBid);
Event Handlers for the Form's Submit
If the "Save &Continue" or "Prompt" option is selected for the DynaForm's Next Step Link property (which is available under the Properties tab), then a DynaForm can be submitted by clicking on the Next Step link at the top of the DynaForm. To have code execute before the data is submitted, no matter whether the user clicks on a submit button or the Next Step link, then set an event handler for the form's onsubmit. For example, the above code could be replaced with:
document.forms[0].onsubmit = checkBid;
The form can also be referenced through one of its fields. For example, the above code could be replaced with:
getField("JobType").form.onsubmit = checkBid;
Saving a Form's Data
ProcessMaker offers a four functions to save the data in a DynaForm:
The form's submit() function can also be called with JavaScript to automatically close the DynaForm and save it's data:
The MsgBox() or leimnud.module.app.confirm() functions can be used to display a custom confirmation message to the user before submitting the DynaForm.
For example, when the submit button is clicked, an anonymous function checks whether the "long_distance" option was selected in the "orderType" dropdown box. If so, then a "confirm" type of message is displayed asking the user if he/she wants to handle a long distance order. If the user clicks on Accept, then the form is submitted. If the user clicks on Cancel, then the value of the "orderType" dropdown is cleared and highlighted to draw the user's attention.
if (getValueById("orderType") == "long_distance") {
msgBox("Are you sure that you want to handle a long distance order?", "confirm",
//Accept callback function submits the form:
function() { submitForm(); },
//Cancel callback function resets the "orderType" and highlights it:
function() {
removeValue("orderType");
G.highLight(getField("orderType"));
}
);
return false; //stop the standard submit action
}
else
return true; //allow the standard submit action
}
The Next Step and Previous Step links
The Next Step link and its bullet icon in the upper right-hand corner can be referenced as:
getField("DYN_FORWARD][bullet")
To hide the Next Step, so the user can only advance by clicking on a submit button:
hiddenById("DYN_FORWARD][bullet");
The Previous Step link in the upper left-hand corner can be referenced as:
To hide the Previous Step link, so the user can not go back:
Note that the Previous Step link is hidden in DynaForms which are the first step in the task.
To redirect to the location of the Previous Step link, without saving the current data:
To redirect to the location of the Next Step link, without saving the current data:
To make code execute when the user click on the Next Step link, then use code like:
{
//add code here to execute
return true; //return true to do the default action for the link
}
getField("DYN_FORWARD").onclick = doSomething;
Printing On Submit
For record keeping it may be useful to print a DynaForm when the user submits the form:
window.print();
return true;
}
Reset
A reset button clears any entered data in a DynaForm and resets it to its original state.
Properties
- Field Name *Required
- Label
Note: If a Dyanform, where the Reset field was added, is assigned as a view mode on a step, this button won't be shown since all the values of the fields on view mode can't be cleared.
Dynamic Buttons
On most web browsers, buttons can be enabled and their labels can be dynamically altered. For instance, a DynaForm for a survey could have a button named "DataButton" which is labeled "Enter Defaults" when both the textboxes "Degree" and "Income" are blank. If one of the textboxes is filled, the button is disabled. When both the textboxes are filled, the button is reenabled and its label changes to "Validate Data".
{
if (getField("Degree").value == "" && getField("Income").value == "")
{
getField("DataButton").value = "Enter Defaults";
getField("DataButton").disabled = false;
}
else if (getField("Degree").value == "" || getField("Income").value == "")
getField("DataButton").disabled = true;
else
{
getField("DataButton").value = "Validate Data";
getField("DataButton").disabled = false;
}
}
leimnud.event.add(getField("Degree"), 'change', buttonControl);
leimnud.event.add(getField("Income"), 'change', buttonControl);
