Skip to main content

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.

DrapCode Builder Display Browser Session Data

2. Send Request & Receive Data

Scroll down and click the Send Request button. As you click the button, data will get recieved.

DrapCode Builder Display Browser Session Data

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.

DrapCode Builder Display Browser Session Data

4. Add Page Reload Event

Click on the add event icon and add page reload event that is located under the Navigation category.

DrapCode Builder Display Browser Session Data

5. Drop a Button

Go to a page and drop a button and change its default name to Call External API Lambda.

DrapCode Builder Display Browser Session Data

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.

DrapCode Builder Display Browser Session Data

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.

DrapCode Builder Display Browser Session Data

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.

DrapCode Builder Display Browser Session Data

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".

DrapCode Builder Display Browser Session Data

10. Bind the Collection

Now bind the collection that contains the field headings that you want to display in the data table.

DrapCode Builder Display Browser Session Data

11. Add Data Path

Add Data in the Data Path field as in the browser session folder named "data" contains all the data.

DrapCode Builder Display Browser Session Data

12. Edit the Data Table (if needed)

Remove Components from Data Table that you don't want.

DrapCode Builder Display Browser Session Data

13. Add Session Field in API ID Cell

Go to the API ID cell and open its settings. Add "id" as session field.

DrapCode Builder Display Browser Session Data

14. Add Session Field in User Name Cell

Go to the User Name cell and open its settings. Add "full_name" as session field.

DrapCode Builder Display Browser Session Data

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.

DrapCode Builder Display Browser Session Data

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.

DrapCode Builder Display Browser Session Data

17. Add Session Field

Edit the name and add that value in session field which you want to display in the data table.

DrapCode Builder Display Browser Session Data

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.

DrapCode Builder Display Browser Session Data