External API Fetch List Data and Display in Data Group or Data Table
In this video tutorial you will learn how to fetch list data and display it on Data Group or Data Table by making an external API call.
1. Go to API Documentation
This is a very helpful documentation that you can access from the Help option on the top right. It contains all the APIs you can use to fetch data, generate token and so on. To integate rest API in DrapCode copy the URL. Then open DrapCode and in External APIs module you can configure the API using the Create API option.
2. Configure the External API
To get data from any third-party integration 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.
2.1 Create the Token
In the key mention the Authorization token and in the Value copy the Bearer and the Header value that you have already generated to make the call. Then click Send Request to finish this step.
2.2 Process the Response
Here click the Process Response option and if you do not want to save the data from the collection choose the Map Response Data (Without Saving) option.
2.3 Map the 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 click Save Setting to finish the process.
3. Drop a Data Table
Go to Components and drop a Section and then a Data Table component to display the data. 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.
4. Preview the Data Table
When you click on the Preview option it displays the data in the Data Table. You will find no data is persisted or stored in the collection. Similarly you can add more records in the Airtable and it will be fetched too in the display place.
5. Preview the Data Group
Go to Components and drop a Section and then a Data Group component to display the data.When you click on the Preview option it displays the data in the Data Group. When you refresh or load the preview page or click on the Preview option it displays the data in the form of cards as a Data Group.
