External API Save Response of REST API in Browser Session
From this video tutorial you can learn how to make a rest API call in DrapCode and store it in the browser session for any requirement.
1. Create an External API
To get data from any third-party integration like Xano 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.
1.1 Name the API
Give a name to your external API. You need to choose a call to create. Then copy the URL from Swagger Documentation of Xano.
1.2 Fetch Data from Collection
You can send dynamic data from the collection you have created. Select Send Collection Data option. Then choose the name of the collection from the dropdown.
1.3 Map the Data
Now you need to map the API fields as they are in the collection form. You would need to use the same nomenclature as mentioned in the collection. This step defines how the data comes from the form and in what format it is sent to the third-party integration. Then Save the settings.
2. Create an Event
You need to create a simple event to make the call to fetch data from form to Xano or any third-party integration. Go to Events and choose Create Event. Name your event and click Create.
2.1 Configure the Event
Choose collection and save it. This will save the records in the collection of DrapCode.
2.2 Add Event Details
In the pop-up that appears mention the collection and alert message (this is optional) and Save this step.
2.3 Send Data to External API
In the next step of the event configuration, choose external API and set it to send data.
2.4 Add Event Details
In the pop-up that appears mention the collection for the external API. You can provide an alert message if you wnat. Then choose Save API Response in Browser Session option. This will send the data to the API and Capture its response in the browser session. Then Save your settings.
3. Bind the Event
Open the Form settings and mention the event to which you want to bind it to. This will send data as soon as the form is submitted to Cano. Then Save your settings.
4. Create a Record
Go to Preview and add details as per the fields in the form. Then click the Submit button. This action will save the data from the form and send it to Xano or any other third-party integration and display the alert message for this action.
5. View the record
You can view the newly created record in the collection now. Refresh the page and find the record here.
5.1 View the Record in Xano
You can view the newly created record in the collection now. Refresh the page and find the record here.
6. Display Session Data
The data of this record will be stored in the browser session that you can check by right-clicking Inspect -> Application -> Local Storage/Session Storage
You can display the session data on the preview page by going to Page in components drop a Header. You can rename the header and open its Settings. In the pop-up that appears choose Get Value from Browser Session and mention the Field Name as in the browser session. Then Save the changes.
Refresh the preview page and you will find the browser session details appearing here.
