Display Browser Session Data in Data Table
Bring external data via REST API and display it in a data table without saving it in a collection. You can display the data in tabular format by reading it directly from the browser session.
How to Display Browser Session Data in Data Table?
We have covered each and every step below:
Make an API Call
1. Create a REST API for GET Call
Go to External API page and create a REST API. Name the API, add the External API URL and select GET as call action.
2. Send Request & Receive Data
Scroll down and click the Send Request button. As you click the button, data will get recieved.
3. Create Event to Send Data to External API
Go to events and create Send Data to External API event. Select the external API previously created and tick the checkbox to Save Response in Session.
4. Add Page Reload Event
Click on the add event icon and add page reload event that is located under the Navigation category.
5. Drop a Button
Go to a page and drop a button and change its default name to Call External API Lambda.
6. Bind External API Event to the Button
After changing the name, bind the External API Event previously created to it and save the changes.
7. Open the Page in the Preview/Publish Mode
Now open the page in the preview/publish mode. As you can see below, there is no data in session storage.
8. Make the API Call
Now click the Call External API Lambda button and reopen the session storage section. As you can see below, data has been recieved in the session storage.
Add the Data Table
Now to display the session storage data, add and configure a data table.
9. Get Content From
After dropping a data table, select Get Data from Browser Session as the option to "Get Content From".
10. Bind the Collection
Now bind the collection that contains the field headings that you want to display in the data table.
11. Add Data Path
Add Data in the Data Path field as in the browser session folder named "data" contains all the data.
12. Edit the Data Table (if needed)
Remove Components from Data Table that you don't want.
13. Add Session Field in API ID Cell
Go to the API ID cell and open its settings. Add "id" as session field.
14. Add Session Field in User Name Cell
Go to the User Name cell and open its settings. Add "full_name" as session field.
15. Open the Page in Preview/Publish Mode
Again open the page in the preview/publish mode or reload the open page and you will see all session storage data is displayed in the data table.
Display Data in a New Field
16. Duplicate Data Table Cell
Go to an existing data table cell and click the duplicate icon to add a new cell/field.
17. Add Session Field
Edit the name and add that value in session field which you want to display in the data table.
18. Open the Page in Preview/Publish Mode
Save the changes and open the page in the preview/publish mode. As you can see below, the newly cell/field contains the piece of browser session data that we wanted to display.
