External API Edit and Update Data with Persistent Collection
Know how to implement the edit flow in case of an external API. When the data is stored in the API this flow (edit) can be used to improvise or modify it.
1. Create an External API
To get data from any third-party integration like Xano, Airtable etc. 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. You may also use an existing API too.
If you haven’t created your external API yet, Click Here
2. Add New Record
Next step is to create a record. You can click Preview. When the page opens, add details and Submit them. This will send the data to DrapCode and from there it will be passed to Xano. You can refresh the collection in DrapCode as well as Xano to view the newly added data.
3. Create a Page
Create a list page. For this go to Pagess* and click Add New Page**.
Then go to the Settings section of the page and you can Bind a Collection to show pre-filled data on this page.
4. Drop a Collection Form
Go to Components and drop a Collection Form to display the data.
Open the Settings of the Collection Form and specify where it should fetch the data from which collection and Save the changes.
Similarly, drop a Data Table on the Page. Go to Components and choose Data Table. Open the Settings of the Data Table and specify where it should fetch the data from (external API) and from which collection and Save the changes.
5. Configure the Edit Button
You can add a button to edit. Then open the settings of the button and choose Parent Component Collection as its Get Path Link ID. You can test the button from the Preview page.
6. Create an External API
Create an external API call to Xano and update it there too. For this go to the External API and choose Create External API.
6.1 Name the External API
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 Xano's Swagger Documentation. Then change the project_id to by clicking the + sign on the right-hand-side of the URL and dynamically replace the ID to what you have created with.
6.2 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.
6.3 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.
7. Create an Event
You need to create an event to updated the project to Xano or any third-party integration. Go to Events and choose Create Event. Name your event and click Create.
7.1 Configure the Event
In the event mention what it is supposed to do. Here in this case it you can choose the collection and ask it to update data.
7.2 Add the Details
In the pop-up that opens select the collection you want to update the data. Then you can mention an alert message and how you want to save it (this is optional). Then choose Save to finish.
7.3 Send Data to External API
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.
7.4 Add the Details
In the pop-up that select the external API you created. Then you can mention an alert message or how you want to save it (optional). Then choose Save to finish. This data will be updated in DrapCode and make an API call to update it in Xano too.
8. Bind the Event
Go to Pages open the Form settings and mention the event to which you want to bind it to. This data will be updated in DrapCode and make an API call to update it in Xano too. Then Save your settings.
9. Add and Update a Record
Go to Preview and add details as per the fields in the form. Then click the Submit button. This will update the record in the DrapCode's collection and also in Xano. You can refresh the records at both places to find the new record.
