How to | Integrations
We will make a simple form with three kinds of integrations: AJAX validation, AJAX population and POST submit to a webservice.
We start with this basic form. The choice field will be populated through a HTTP request. The two inputs will be validated with a HTTP request. And if the user submits the form, we make the form do a HTTP post request to a API.
Lets start with the population. We use our test web API: https://www.peggyforms.com/api/Formbuilder.Tests.dynamicstep1 which returns a result like:
We go to the Content tab, set datatype to Dynamic and paste our url. In addition we can add some parameters if we need. In this case we do not need any parameters. But in step 3 we will do need parameters and explain this later on. We might need to ajust the data path and key and label properties in the JSON response object. Use the target button to target which data must be used as option value and option labels.
If you now press [update] the content will be requested from the url. From now on, your field will be populated with the output of this web API request.
For validation we use our following test API:
This request must return a JSON string with at least this information:
The success property is needed to determine that the request is successful or not. The result must be a string with OK for validated and NOK for invalidated.
This request needs two parameters: the public key and the private key which both the user must fill in. We create the HTTP inputvalidation on the second field under the tab Advanced.
If you provide a message property, this will override the default validation message if the result is NOK. We use the preset HTTP request and complete the matchvalue with our url.
Now we add the two parameters public key and private key using the target button. These parameters are used in the web API to determine the validation.
4. Using HTTP response fields in your form
For some feedback we added a Text/information field with some static text and targetted the HTTP validated field to include some dynamic response text from the HTTP response.
Our test API returns the following JSON:
We want to show two properties keyStatus and belongsTo in our information field. Just use the select formfield with ajax validation button to add these values very easily:
Quick example of the form: