Skip to main content

Setting up an API connection in AppBuilder

This article will explain what an API Connection is and how to create and use one in an AppBuilder form template.

API connections allow form templates to automatically retrieve information from other Asite forms or external systems. Internal API Connections can retrieve data from forms within the same Project or from other accessible Projects. External API Connections can pull information from third-party systems using a configured API request.


Required Privileges

Privilege

Description

Certified App Builder Designer

Allows users to create and manage AppBuilder apps, form templates, and API Connections.

NOTE: This privilege is enabled by Asite Support at the user level. Contact support@asite.com for assistance.


How Do I Create an API Connection?

  1. Select the required Project.

  2. Navigate to the Projects tab.

  3. Right-click the Project and select Apps > Edit App Settings.

  4. In the Manage App Settings pop-up, click the Edit icon for the required app.

    NOTE: The chosen Form must have an Active status.

  5. In the Edit App Settings pop-up, navigate to Form Template Settings.

  6. Click Edit next to the uploaded form template.

  7. In the App Template Editor, click the three-dot menu (top-right).

  8. The API Connection Editor pop-up will open.

  9. Click Add Connection.


API Connections

API Connections can be created in two ways:

Connection Type

Description

Internal API Connection

Retrieves data from within the Asite platform.

External API Connection

Retrieves data from an external source using an API request.


Create an Internal API Connection

Internal API connections are used to access data available within the Asite platform.

  1. In the Create API Connection pop-up, fill in the basic information.

  2. Click Next.

  3. In the API Filters screen, enter values for the available fields.

    • The filters define the data the API connection will retrieve.

  4. For Project Name, select a Project from the dropdown list in the Value column.

  5. For Form Name, select a form from the dropdown list in the Value column.

    NOTE: The Field and Operator fields are system-defined and cannot be edited. Use the Value dropdown to select the required filter value.

  6. Click Next to open the Response section.

  7. Click Test Run to verify that the API Connection returns the expected data.

    NOTE: A successful test run displays the XML API response in Results. If the test is unsuccessful, an empty XML response is displayed.

  8. After a successful test, click Save.

  9. A pop-up confirmation will appear when the API Connection has been established.


Create an External API Connection

  1. In the Create API Connection pop-up, complete the required details:

  2. Click Next.

  3. Add any required query parameters.

    • Key - Enter the parameter name.

    • Value - Enter the value to pass for the parameter.

  4. Under the Body tab, select the required body type.

    • Form Data - Use when the API expects data as form fields in a key-value format.

    • Raw - Use when the API expects the request body in a raw format such as JSON, XML or plain text.

    • x-www-form-urlencoded - Use when the API expects form values encoded in URL format.

  5. After adding filters, click Next to continue to the Response section.

    NOTE: Click Back to return to the previous section or Cancel to exit the setup.

  6. Click Test Run.

  7. A successful test run displays the XML API response in the Results. If the test is unsuccessful, an empty XML response is displayed.

  8. After a successful test, click Save.


How Do I Use an API Connection in a Form?

After an API Connection has been created, it can be added to a form field using the Code Editor.

  1. Open the App Template Editor.

  2. Select the form field where the API connection should be added.

  3. In the Properties panel (top-right), select Advanced.

  4. Under Events, select the required trigger for the API Connection.

    NOTE: For detailed information on event triggers, see Events Properties in AppBuilder Designer.

  5. Clicking the trigger will open the Code Editor pop-up.

  6. Configure the API connection logic in the editor.

    NOTE: For more information on AppBuilder Code Editor, see Blocks and Block Categories in AppBuilder Code Editor.

  7. Click Done to save the configuration.

  8. Click Publish to make the changes live.


API Connections - Basic Information

Internal API Connection – Basic Information

Option

Description

Name

Enter a name for the API Connection.

API Link

From the dropdown, choose from the available options:

  • Form Search - Retrieves data from the same form or other forms available within Asite.

  • User Search - Retrieves user-related information available within Asite.

Description

Enter a suitable description.


External API Connection - Basic Information

Option

Description

Name

Enter a name for the API Connection.

API Link

  • Click the External API toggle.

  • Select the request method from the dropdown on the left:

    • GET – Retrieves data from a specified resource.

    • POST – Sends data to create or update a resource.

  • Enter the request URL.

Append URL

  • Enter a dynamic field or extra path values to append to the API URL (if applicable).

  • Click the + icon beside it.

  • The dynamic field will get appended to the API link.

OAuth

Check the OAuth checkbox if the API requires OAuth or token-based authentication.

  • This method uses the previously configured OAuth integration to automatically access the token required to retrieve the data.

NOTE: For more information on how to create an OAuth Integration, check OAuth Integration for External Systems.

Description

Enter a suitable description.


Additional Resources

Watch the following demo videos to learn how to use API Configuration.

  • Learn how to connect Asite forms using API Configuration.

  • Learn how to connect to an external source using API Configuration.


Did this answer your question?