Accessing external APIs

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

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):

    

   

    

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:

    

   

    

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

    

   

    

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:

    

   

    

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