Create 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 Create Data via Modal Using External API without Persisting Data?
Below are steps that shows how to create data via modal:
1. Create a REST API - POST
Go to External API page and create a REST API. Name the API, add the External API URL and select POST as call action.
2. Add Request Headers
Go to Headers tab and add request headers as shown below in the image.
3. Send Request & Receive Data
Scroll down and select the radio button, "Form Data". Click the Send Request button. As you click the button, data will get recieved. Click the Save Settings button.
4. Create Required Events
Create event to Send Data to External API using REST API for POST call action. Also, tick the checkboxes to save response in session and save form data in session.
Then, add show alert message event and page reload event to it.
5. Create a Form Modal
Go to snippets panel and create a modal with a form in it.
6. Edit the Modal Settings
Open the general settings of the modal and bind the collection in which you want add data. Also, select the option to bind data from External API. Then, bind the external API previously created with GET call action. For reference, check out Update Data via Modal Using External API
7. Create Show Modal Event
Go to Events panel and create a show modal event using the modal which you have created, as shown below.
8. Add a Data Table
Drop a data table and bind the collection in which you want to add more data via modal using external API.
9. Add a Link & Bind the Show Modal
Now drop a link and edit its default name. Then open its settings and bind the show modal event to it.
10. Preview/Publish
Open the page containing the data table in the preview or publish mode.
11. Click the Create Modal Link
Now click on the Create Modal Link and it will open the modal to add new data.
12. Add Data
As the modal open, add data and click the send button.
As the page gets reloaded, a new data entry will appear in the data table. Now if you will open the collection, the new data entry will appear in it as well.
