Skip to main content

External API Save REST API Response Data after Create or Update Data

From this video tutorial you will learn how to make an API call to create a record and process the response. For eg., when you create any task you can save its response in collection whenever you create any project.

1. Create an External API

To get data from any third-party integration like Xano you need to create an External API. External APIs are modules that are used to create a Rest API such as GET API, POST API, DELETE, etc. Although you may also use an existing API too.

APIs can be accessed from Settings → External API or from the top right hand-side. Then select the Create External API button. Give a name to your external API. You need to choose a call to create which is POST in this example. Then copy the URL from the Xano's Swagger Documentation.

DrapCode Builder Font Family

1.1 Request Data Mapping

Here you have to fetch the data from a collection and send it to Xano For this choose choose Send Collection Data and the Collection from the dropdown. Then click Save Setting to finish the process.

DrapCode Builder Font Family

1.2 Map the Collection Data

To map the data from collection mention the data key that has the records in it, specify what is the key to uniquely identify the records for eg., ID and mention the JSON path for other fields.

Then choose Default JSON. You can copy the fields from the documentation here and replace the fields with their unqiue names as in the collection. Then click Save Settings to finish the process.

DrapCode Builder Font Family

2. Create an Event

You need to create an event to make the call to fetch data from collection to Xano or any third-party integration. Go to Events and choose Create Event. Name your event and click Create.

DrapCode Builder Font Family

2.1 Configure the Event to Save Data

In the event mention what it is supposed to do. Here in this case it you can choose the collection to save data as the first event. In the pop-up that opens select the collection in which you want to save data. Then you can mention an alert message and how you want to save it (this is optional). Then choose Save to finish. This will make the API call and store it in the collection.

DrapCode Builder Font Family

2.2 Configure the Event to Send Data

In the event mention what it is supposed to do. Here in this case, you can choose the external API and ask it to send data to the external API i.e., Xano once the data is saved. In the pop-up that opens select the external API you created. Then you can mention an alert message or how you want to save it. Then choose Save to finish. This will make the API call and store it in the collection.

DrapCode Builder Font Family

3. Bind the Event

Open the Form settings and mention the event to which you want to bind it to. This will save the data then send the data to the external API which will send it to Xano. Then Save your settings.

DrapCode Builder Font Family

4. Create a Project

Go to Preview and add details as per the fields in the form. Then click the Submit button. This action will save the data in the collection and send it to Xano or any other third-party integration and display the alert message for this action.

You can go to the Xano or the collection and reload it. Your form data will appear in the collection as well as Xano.

DrapCode Builder Font Family

5. Store Rest API Response

Go back to your collection and create fields to capture the response from rest API as per your use case.

DrapCode Builder Font Family

6. Process Response from REST API

Go back to the external API that you created. Click the Process Response and Update Item with Response checkboxes. This will capture the responses of the items that comes from the rest API and updates in your collection or you can even create a new collection to record these responses.

When the response comes from the root you can leave it blank or mention for eg., records when the response comes inside the unique field. Map the fields and click Save Settings to finish.

DrapCode Builder Font Family

7. Preview the REST API Response

Go to Preview again and add details as per the fields in the form. Then click the Submit button. This action will display the response in the collection coming from Xano or any other third-party integration.

DrapCode Builder Font Family