Skip to main content
All CollectionsAsite AppBuilderEditing a Form Template
Setting up an API connection in AppBuilder
Setting up an API connection in AppBuilder
Updated over a month ago

You must be a certified AppBuilder user to set up API connections in AppBuilder.

Set up an API connection in AppBuilder Designer to automatically pull information from other Asite forms or external sources. You can connect Asite forms that are part of the same or different projects, as long as they are accessible to you.

Follow these steps to set up an API connection in your form template, and watch the demo videos below to see it in action.

How to open the API Connections Editor

  1. Open the form template to which you wish to add an API connection. Here's a quick reminder on how to navigate to your template editor:

    1. From your Asite dashboard, open the Projects tab and right click on the Project where you wish to add an API connection to an App.

    2. Select "Apps" and select "Edit App settings."

    3. From the list of Apps, select the "Edit" button to open the App Editor, which looks like this:

      The edit button

    4. Scroll down to the section "Form Template Settings" and select "Edit" next to the uploaded form template to open the App Template Editor.
      ​

  2. In the App Template Editor, select icon at the top of the form (Figure 1) to open the API Connections Editor.
    ​

  3. In the API Connections Editor, select "Add Connection" (Figure 2).
    ​

Add the Basic Information for your API Connection

The first section when creating your new API connection is "Basic Information" (Figure 3).

  1. Fill in the name you would like to call your API connection.
    ​

  2. Use the toggle to select whether this is an external API.
    ​

  3. Enter your API link. For an external API link, you will need to choose whether it is "GET" or "POST."

    1. The GET Method is used to request data from a specified resource.

    2. The POST Method is used to send data to a server to create or update a resource.
      ​

  4. If you have an external API, you may also now append a dynamic field to your URL.
    ​

  5. Optionally enter a description for your API connection.
    ​

  6. Select "Next" to continue to "Filters" or select "Cancel" to return to the API Connections Editor.

Add your API filters

The following section is "Filters" (Figure 4). Use the parameters and operators to filter your API connection.

  • For internal connections, i.e., connecting Asite forms, you must provide the Project Name and Form Name at minimum. You may then add additional parameters as needed.
    ​

  • For external connections, e.g., connecting to AccuWeather, your parameters will be determined by the API setup you've created.

Select "Next" to continue to "Response" where you will test your API connection, select “Back” to go to the previous section, or select “Cancel” to return to API Connections Editor.

Test your API connection

The final section is "Response" (Figure 5) where you can test your API connection. Input your test variable and select "Test Run."

  • A successful test run will display your XML API feed at the bottom of the window.
    ​

  • A failed test run will display an empty XML field. You may need to edit your API key or filters if you have a failed test run. If you are having trouble achieving a successful test run, please contact our Professional Services team.

Following a successful test run, select "Save," which will return you to the API Connections Editor.

Setting the API connection live

From the API Connections Editor, you may wish to add another connection.

When you have added all your connections, simply exit the API Connections Editor window to return to the App Template Editor.

Finally, select "Publish" on your template to set the API connections live.

Using your API connection in your Apps

Follow these steps to implement your API connection in your form:

  1. Return to the App Template Editor.

  2. Select the section of the form where you wish to add your API connection.

  3. Select "Advanced" in the right editor menu.

  4. Under "Events," navigate to the trigger for your API connection, e.g., "onChange," and click the button to open the Code Editor. Explore the different events properties here.

    The button to open the Code Editor.

  5. Use the Code Editor to add your API connection to the form (Figure 6). Explore the different editor building blocks here.

  6. When you've created your code, select "Done" to save it.

  7. Finally, select "Publish" in the App Template Editor to set your API feed live.

Watch this short demo video showing how to connect Asite forms using API configuration

Watch this short demo video showing how to connect to an external source using API configuration

Figure 1 - The API Configurations Editor button is highlighted with a red square.

Figure 1 - The API Configurations Editor button is highlighted with a red square.

Figure 2 - The "Add Connections" button is highlighted with a red rectangle.

Figure 2 - The "Add Connections" button is highlighted with a red rectangle.

Figure 3 - The first step in your API connection is "Basic Information".

Figure 3 - The first step in your API connection is "Basic Information".

Figure 4 - The second step in your API connection is "Filters." This image shows the internal filter options.

Figure 4 - The second step in your API connection is "Filters." This image shows the internal filter options.

Figure 5 - The third step in your API connection is "Response," where you will test your API connection.

Figure 5 - The third step in your API connection is "Response," where you will test your API connection.

Figure 6 - Two images showing the Code Editor demonstrating how to add an API connection.

Figure 6 - The Code Editor demonstrating how to add an API connection.

Next Article: 'Basic' Properties in AppBuilder Designer

Did this answer your question?