External API Send Non Persisted Collection Data as Raw JSON
The video tutorial helps you understand how to make an external API call in which you can add data from a collection that is not stored. You can use DrapCode as the front-end builder and send the data to an external datasource.
1. Create an External API
To get data from any third-party integration such as Airtable 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 Create 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.
1.1 Request Data Mapping
Here you have to fetch the data from a non-persisted collection choose Send Collection Data and the Collection from the dropdown. Choose the checkbox to map the data to Airtable Data from External Source. Specify the Authorization, Bearer and Token from the documentation. Then click Save Setting to finish the process.
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 Raw JSON. You can copy the Records as it is from the documentation and paste them here. Add fields being fetched dynamically from the collection by clicking Show Fields. Then click Send Request and Save Settings to finish the process.
2. Drop a Collection Form
Go to Pages Components and drop a Collection Form to create a structure for the collection. Open the Settings of the the Collection Form and specify where it should fetch the data from which collection and Save the changes.
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.
3.2 Add the Event Details
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.
4. Bind the Event
Open the Form settings and mention the event to which you want to bind it to. This will send data as soon as the form is submitted, wrapped in JSON. Then Save your settings.
5. Create a Record
Go to Preview and add details as per the fields in the form. Then click the Submit button. This action will fetch the data from the form as it is and send it to Airtable or any other third-party integration and display the alert message for this action.
6. Preview the Data
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.
