It can often be useful to add a button into your form to perform custom operations like opening a url or even trigging a Power Automate workflow. In this article we will explore how your can do this!
Example 1 - Running your own JavaScript code
One of the powerful features of Team Forms is the capability to execute your own JavaScript code. This capability is not limited to just calculated values but can also be triggered by a button component. In this example we will use JavaScript to launch a URL.
Drag and drop a button component into your form
Under the Display tab change the Action property to Custom. This will reveal a code editor to add custom JavaScript code that will be executed when the button is pressed
Add the following code to launch a website
window.open('https://teamforms.app/')
Example 2 - Updating a Field
By using custom JavaScript code behind your button, you can also automatically update the value of a field. In this example we will increment the value of a number field and set the value of a date/time component when a button is pressed.
Drag and drop a button component, number field and date/time field into your form.
Under the Display tab of the button component change the Action property to Custom. This will reveal a code editor to add custom JavaScript code that will be executed when the button is pressed.
In the JavaScript code add the following code ensuring you update it to suite your specific form. You will need to update
numberFieldanddateTimeFieldto match the value in the API tab for your number and date/time components.
const numberFieldKey = 'numberField' //Update this to match your form
const dateTimeFieldKey = 'dateTimeField' //Update this to match your form
const nextNumber = (data[numberFieldKey] || 0) + 1 //handle null number
instance.root.getComponent("numberField").setValue(nextNumber);
instance.root.getComponent("dateTimeField").setValue(moment().toISOString());
Example 3 - Triggering Power Automate Workflow
You can configure a button to call a Power Automate work flow that has been setup with a "HTTP request is received" trigger. To do so set up your flow and copy the URL generated by Power Automate.
Drag and drop a button component into your form
Under the Display tab change the Action property to POST to URL
Past your URL into the button URL field. Now when a user presses the button Team Forms will trigger the Power Automate.
As part of triggering the flow Team Forms will post the form response data in the body of the request.