This article describes setting up a simple external integration form to ask users for their addresses and return their trash collection day information. First, we will ensure that the external integration features are enabled. Next, we will create a simple form to collect the user’s address and send this information to an external web service.
Previous Step: External Integrations & Submissions Overview
Who can use this feature?
System Administrator | Owner
Enable the External Integration Feature
Navigate to the Form Center module:
Expand the Modules menu
Select the Content tab
Click Form Center
Note:
You can also navigate to your Form Center using the URL, www.yourwebsite.com/Admin/FormCenter.
Click the Properties tab:
Locate the External Integration option:
Check the box to enable External Integrations:
Click the Save Changes button:
Create an External Integration Form
For this example, we will add a short answer field where the user can input their email address, and address details, in addition to short answer fields that will display the water bill due date and amount owed.
Make sure the External Integration feature is enabled
Create a new form in the Form Center
Create a short answer field for the user's email address:
Add the External Name for the field:
Click the field's Save Changes button:
Create short answer fields to display the user's water bill details:
Click the field's Save Changes button:
Select a save option:
Save: Saves any changes made to the form
Save and Publish: Saves the changes made to the form and publishes the form for use
External Names
The external name is the identifier for the field that Form Center will send to the external server. A field’s external name must match whatever name the external web service is expecting.
For this example, we assume that the external service will use the following code to retrieve the address the user entered when submitted as HTML:
string address = Request.Form["EmailAddress"]
Because the external server expects the field name to be EmailAddress, we enter this value in the External Name field for the address short answer. There is no hard requirement that you change this value, Form Center will auto-generate an external name for each field. The auto-generated external names will be something like e_1, e_2, e_3. The external integration command will work as long as the external server or web page is programmed to expect these field names. However, we recommend that you put a meaningful value into the external name field, such as Address1, City, State, ZIP, Name, and so on.
Add an External Integration Command Button to a Form
This section will show you how to add an External Integration Command button to a Form in the Form Center.
The external integration command button creates a button on the form, which, when clicked, will send all information the user has filled out on the form to the external server, and populate empty fields with the values received from the external server.
Navigate to the Form Center module:
Expand the Modules menu
Select the Content tab
Click Form Center
Note:
You can also navigate to your Form Center using the URL, www.yourwebsite.com/Admin/FormCenter.
Select the category your form is in:
If needed, create an external integration form
Locate your external integration form:
Click the Actions button next to the form's name:
Select Modify:
Navigate to the form's canvas:
Click and drag the External Integration field type onto the canvas:
Fill in the button's information fields:
Label: The field's name
Instructions: A brief description of how to answer the field
Width: How wide the field appears on the form
1/4: The field is one-fourth as wide as the form
1/3: The field is one-third as wide as the form
1/2: The field is half as wide as the form
2/3: The field is two-thirds as wide as the form
3/4: The field is three-fourths as wide as the form
Whole: The field is as wide as the form
Type: This field is automatically set to External Integration
Service URL: A service URL property contains the configuration for the external server. The service URL property contains 2 parts, each enclosed in braces "{ }"
Part 1: Contains the protocol to use when communicating with the server, such as HTTP or HTTPS
Part 2: Contains the web addresses of the web service or web page to use when connecting to the external service
An example of a Service URL would be {HTTP}{http://externalintegrationservice.azurewebsites.net/api/Water/Bill}
In this example, the protocol being used is HTTP. This protocol instructs the Form Center to send the information as a standard HTTP POST request and expects an HTML document in response
Note:
Please review the Service URL configuration and Data Exchange Format article for more information about Service URL configurations.
Button Text: The text that displays on the button
Click the field's Save Changes button:
Select a save option:
Save: Saves any changes made to the form
Save and Publish: Saves any changes made to the form and makes the form available for use
Note:
Often, for external integration forms, the external integration command button takes the place of the typical "Submit" button (although this does not have to be the case).
Next Step: Service URLs & Data Exchange Formats