Data Group with External API and Browser Session Data
In this video you will understand how to build a Data Group using REST APIs where data is coming directly from the API and it it not getting stored/persisted in DrapCode collections.
This is useful when you want to build the application using your own datasource such as Xano, Firebase, Supabase, etc and using DrapCode only as frontend builder.
1. Drop a Data Group Component
Go to Component and choose Data Group. Drop the Data Group on the blank page.
Right click on Data Group component and in Settings icon choose where to get data from and its External API and Save your settings.
2. Create an External API
To get data from the Data Group, 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.
Name the API and create a GET call.
2.1 Map the Data
To map the data you will have to choose the collection where the records are. Then select the fields of the records to map.
2.2 Render Data Group from External API
To render Data Group, Reload the page. Then right click on the Settings icon and choose Get Data from Collection. Matching fields will fetch data from them respectively and Save your settings.
3. View the Page
Now go to Preview and Reload the page to view the changes.
4. Specify Data Path
Go to Component and drop a Data Group. right click on its Settings and choose the Get Data from Collection.Mention the Data Path (this information can be obtained from Inspect Element under Keys) Then Save the settings.
5. Render Data Group from Browser Session
To render session data, in Settings icon choose to Get Data from browser session and then Save.
6. Preview the Page
Click the Preview icon and Reload the page to view the data from browser session.
