External API Send Non Persisted Collection Data as Default JSON
In this video tutorial you will learn how easily you can send data to an external datasource or rest API without storing it. In this case data is extracted from the front-end builder like DrapCode to any back-end integration such as Xano and so on.
1. Create a Form
Go to Pages and create a Collection Form. Open its settings and mention the collection to fetch data from and Save the changes.
Before that create a Collection with a list of records. This collection schema will be needed to generate tables and forms instead of using the direct form components. Define the fields as to what kind of data is needed to be fetched and then make an API call and bind the data. You can simply work on the fields as all of them are mapped automatically and you can work on the fields already available.This is a non-persistent collection. This means nothing will be saved locally.
If you haven’t created your collection yet, Click Here
2. 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. Then copy the URL from Xano's Swagger Documentation.
2.1 Fetch Data from Collection
You can send dynamic data from the collection you have created. Choose the name of the collection from the dropdown.
2.2 Map the Data
Now you need to map the API fields as they are in the collection form. You would need to use the same nomenclature as mentioned in the collection. This step defines how the data comes from the form and in what format it is sent to the third-party integration. Then Save the settings.
3. Create an Event
You need to create a simple event to make the call to fetch data from form to Xano or any third-party integration. Go to Events and choose Create Event. Name your event and click Create.
3.1. Configure the Event
In the event mention what it is supposed to do. Here in this case it you can choose the external API and ask it to send data. In the pop-up that opens select the external API you created. Then you can mention an alert message and how you want to save it. Then choose Save to finish. This will make the API call and store it in the collection.
4. Bind the Event
Open the Form settings and mention the event to which you want to bind it to. Then Save your settings.
5. Preview the Data
Go to Preview and add details as per the fields in the form. Then click the Send button. This action will fetch the data from the form as it is and send it to Xano or any other third-party integration and display the alert message for this action. You can go to the Rest API and reload it. Your form data will appear here. Similarly, you can add more records and have them pushed to the Rest API.
