Update Data via Modal using External API
You can easily add the functionality to create, edit, update and delete (CRUD operations) via Modal Popup on any data coming from 3rd party Data Source such as Google Sheet, Airtable, External APIs, Supabase, Firebase etc, without storing or persisting of data at the DrapCode database.
How to Update Data via Modal Using External API without Persisting Data?
You can easily create, edit and update or delete data via modal using external API without persisting data. Below are steps that shows how to edit and update data via modal:
1. Create a Collection
Go to collections panel and create a collection that contains collection fields whose data you want to update.
2. Create a REST API - GET
Go to External API page and create a REST API. Name the API, add the External API URL and select GET as call action.
3. Add Request Headers
Go to Headers tab and add request headers as shown below in the image.
4. Send Request & Receive Data
Scroll down and select the radio button, No Dynamic Data. Then, click the Send Request button. As you click the button, data will get recieved.
5. Process Response
Tick the check box to process response. Also, select the radio button option for collection mapping without persisting record in database.
6. Response Mapping
Scroll down and fill required field to map the data. Then, click the Save Setting button.
7. Configure a Data Table
After dropping a data table in a page, open its settings and select the option, "Get Data from External API Response". Then, select the external API that you have created previously.
8. Create New External API - PUT
Go to External API page and create a REST API. Name the API, add the External API URL and select PUT as call action.
9. Add Request Headers
Go to Headers tab and add request headers as shown below in the image.
10. Send Request & Receive Data
Scroll down and select the radio button, "Non Persistent Collection". Click the Send Request button. As you click the button, data will get recieved.
11. Create Required Events
Create event to Send Data to External API using REST API for PUT call action. Also, tick the checkboxes to save response in session and save form data in session.
Then, add show alert message event to it.
13. Create a Form Modal
Go to snippets panel and create a modal with a form in it.
14. Bind the Event to the Modal Form
Bind the Send Data to External API event to the form dropped inside the modal.
15. Bind the Collection Field
Drop a header and a paragraph components inside the modal and bind collection fields which you created previously with fields for username and API ID.
16. Create Show Modal Event
Go to Events panel and create a show modal event using the modal which you have created, as shown below.
17. Update Modal Button
Drop a button inside the data table and name it as "Update Modal".
18. Bind the Show Modal
Now open the settings of the button and bind the show modal event to it.
19. Edit the General Settings of the Modal
Go to the modal and open its general settings. Then bind the collection that was created previously, containing Username and API ID as per the example.
20. Open the Page in Preview/Publish Mode
Now open the page in the preview or publish mode.
21. Click on the Update Modal Button
As you click on the Update Modal button, the modal containing collection form will open, you can make changes and click the send button to update the data.
