Stay tuned Watch us Facebook Twitter

Thanks! We`ll keep in touch.

Sign up for our Peggy Journal

Get the latest Peggy Forms news, features and great offers!

Name
Email

index

How to | Ajax Proxy

This special field differs a bit from the Dynamic content you can use for dropdown fields, choice fields, datagrids etcetera. An AJAX proxy field can load the result of an AJAX request into its internal dataset. This dataset can be used by multiple other fields. It gives a better overview and especially when you have more than one dataset in an AJAX request to populate more than one field, you really should chooce this AJAX proxy field above Dynamic data. Because with this field, your form only request once, instead of once per field using Dynamic content.

Example

For example, if you have one choice field populated by your webservice, you can use Dynamic content very easily. However, when you have two or more choice fields you should use an AJAX proxy field instead of Dynamic content. Why is that, you'll ask? It is because your form needs one request per field using Dynamic content. But if your webservice can serve the dataset for both fields in one request, you can load the datasets into 1 single AJAX proxy field. And then you can use the AJAX proxy field as a datasource for your two choice fields. On this way, only one HTTP request is made and two fields are populated.

{
	success: true/false,
	data: {
		choiceField1: [
			{ key: 1, value: "Option 1" },
			{ key: 2, value: "Option 2" },
			{ key: 3, value: "Option 3" },
		],
		choiceField2: [
			{ key: 1, value: "Option 1" },
			{ key: 2, value: "Option 2" },
			{ key: 3, value: "Option 3" },
		],
		..
	}
}

1. Start

We start with this basic form. The AJAX proxy field will be populated through a HTTP request. The two choice fields will be populated by this AJAX proxy field.

Step 1 in HTTP requests with the AJAX proxy field

2. Setup the AJAX proxy field

Lets start with the AJAX proxy field. We use our test web API: https://www.peggyforms.com/api/Formbuilder.Tests.dynamicStep1AjaxProxy which returns this object:

{
  "success": true,
  "data": {
    "field1": [
      {
        "checked": 1,
        "key": "myvalue1",
        "value": "Test value 1",
        "enabled": 1
      },
      {
        "checked": 0,
        "key": "myvalue2",
        "value": "Test value 2",
        "enabled": 1
      },
      ..
    ],
    "field2": [
      {
        "checked": 1,
        "key": "myvalue1",
        "value": "Test 2 value 1",
        "enabled": 1
      },
      ..
    ]
  },
  "error": null,
  "message": null
}

We paste our url and in addition we can add some parameters if we need. In this case we do not need any parameters.

Step 2, populate the AJAX proxy field with HTTP request

3. Populate the fields

Now, lets populate our two choice fields with this AJAX proxy field. Simply set 'AJAX proxy' as Datatype and use the target button to select your AJAX proxy field. Now we need to adjust 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 data source and the JSON properties for the option value and option labels.

Step 3: http - select JSON data set Step 3: populate a field

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.