It’s possible to call APIs from within your form using the steps outlined in this article. However, before you decide to take this approach, it’s important to note that it’s not the recommended way to pull external data into your form. Instead, we recommend the following approach:
Call the API from within Microsoft Power Automate and write the data to SharePoint (either as a .json file or to a list) on a schedule.
Set up the file or list as a data source in Team Forms.
This approach offers several advantages, including better security with role-based access control to the file, the absence of API keys embedded in your form, and the ability for forms to work offline by default.
If you insist on calling an API from within your form, you can use the method outlined in this article.
Populate a textfield from an API
In this example we will call a weather API to populate the current forecasted temperature in a textfield.
Drag and drop a textfield into your form
Under the data tab, locate the calculated value property and add the following javascript. This Javascript code will call the Azure maps/weather api, and extract the temperature field from the return data, then set the textfields value to this value.
const subscriptionKey = 'YOUR_AZURE_MAPS_SUBSCRIPTION_KEY';
const position = '51.5074,-0.1278'; // Latitude,Longitude for London
const url = `https://atlas.microsoft.com/weather/currentConditions/json?api-version=1.1&query=${position}&subscription-key=${subscriptionKey}`;
async function getWeather() {
try {
const response = await fetch(url);
const weatherData = await response.json();
const condition = weatherData.results[0];
instance.setValue(`Current temperature is: ${condition.temperature.value}°${condition.temperature.unit}`)
} catch (error) {
console.error('Error fetching weather:', error);
}
}
getWeather();
Populate a drop-down menu form an API
Team Forms drop-down menus can support populating based on a URL or API. To achieve this, follow these steps:
Drag and drop a drop-down menu into your form
Under the data tab of the drop-down menu, change the data-source type to "URL". As an example you can use the following public API to return vehicle data:
https://parallelum.com.br/fipe/api/v1/carros/marcasIn the request headers section add a key and value for the API keys if needed for your API request.
When calling APIs from within your form, the API key is stored within the form schema. Therefore, you should be cautious about who has access to this form.