Accessing external APIs

It is possible to access any external API using the Logic feature in Sintel Forms. This can be used for retrieving some external information to be used in a form or to send some data to external services. External API calls can be made by writing custom JavaScript code in the Logic section of a form, using the "Execute custom JS" step:

 

executeCustomJsRule.png

 

Example calls

api.get(apiPath)
.then(response => { /*handle success*/ })
.catch( ex => { /* handle failure */ })
api.post(apiPath, data)
.then(response => { /*handle success*/ })
.catch( ex => { /* handle failure */ })

  Note

The "api" object is a wrapper of the "axios" object, meaning that you can use all the axios features described on its webpage.

 

Example - retrieving user data from external API

  Note

Note: you can download the configuration of the form used in this example here, and import it in Sintel Forms on your tenant.

This example is about utilizing the external api calls to retrieve information about a random user from a test API and display it in the form.

We will be using the https://randomuser.me/ API, returning random user information.

 

  1. Set up the form

    We want the form to be displaying name, surname and picture of a random user. Therefore we make sure that a list contains the "FirstName", "LastName" and "Photo" columns (first two being text fields and the last one being a url/picture field):

     

    listView.png

     

  2. Prepare the layout

    We make sure that the fields are present on the form and that "FirstName" and "LastName" have more user-friendly titles:

     

    layoutView.png

     

    Additionally, to make sure that the photo field always displays a picture (and not its URL, we explicitly set its mode to 'read only'):

     

    fieldProperties.png

     

  3. Set up logic

    In a new Rule, we create an "Execute custom js function" step with following code:

     

    let apiAddress = "https://randomuser.me/api/";
    api.get(apiAddress)
    .then(response => {
    const randomUser = response.data.results[0];
    setValue('FirstName', randomUser.name.first);
    setValue('LastName', randomUser.name.last);
    setValue('Photo', {url: randomUser.picture.large, description: ""});
    });


    Now, we want to make sure that this Rule does not get repeatedly executed every field change - so we add a restriction that it should only be executed if the "FirstName" field is not set, by creating a "Field value check" condition on the Rule:

     

    ruleCondition.png

     

    That's it - when we open a form, it will initialize itself with random values taken from the example API:

    exampleData.png

Was this article helpful?
0 out of 0 found this helpful