2. Making API Requests to your Application

Step 2: Make the API request to your Backend API in the SaaSBox dashboard:
In SaaSBox, go to Page Templates > Your Active Template name > App -> Main
Hint: Any file created under app, is handled in the route with the same name, e.g. if you create: template / app / your-new-page, this will map to the url: https://<your-domain>/app/your-new-page.
Under a script tag defined with script. Add client side Javascript that calls the API you have just created. You may use the standard Web API fetch or AJAX call. Example:
1
extends common/app-sidebar.pug
2
block head
3
  include common/app-head.pug
4
  +head("Welcome to your Application")
5
block page_content
6
  //  Replace with your content 
7
  .max-w-7xl.mx-auto.px-4.sm_px-6.md_px-8
8
    h1.text-2xl.font-semibold.text-gray-900 Welcome to your Application!
9
  div(id="embeddingContainer").max-w-7xl.mx-auto.px-4.sm_px-6.md_px-8
10
block footer
11
  include common/app-footer.pug
12
  +footer()
13
  script.
14
    var session;
15
    var containerDiv = document.getElementById("embeddingContainer");
16
​
17
    fetch('https://<your-server-url>/get-embed-url').then(response => {
18
      console.log(response)
19
      var options = {
20
          url: response.embed_url, 
21
          container: containerDiv,
22
          scrolling: "no",
23
          height: "700px",
24
          width: "1000px",
25
          locale: "en-US",
26
          footerPaddingEnabled: true,
27
          sheetId: <Sheed ID>, // use this option to specify initial sheet id to load for the embedded dashboard
28
          sheetTabsDisabled: false, // use this option to enable or disable sheet tab controls
29
          undoRedoDisabled: false, // use this option to disable undo and redo buttons
30
          resetDisabled: false // use this option to disable reset button
31
          defaultEmbeddingVisualType: "TABLE" // this option only applies to QuickSight console embedding and is not used for dashboard embedding
32
      };
33
      // Creates the actual embed in "embeddingContainer",
34
      // using the dashboard URL fetched.
35
      session = QuickSightEmbedding.embedSession(options);
36
    });
Copied!
Here, the response received from the API server is used as an Embed URL, then the QuickSight client side javascript library, using the fetched dashboard url, generates a dashboard that gets displayed under the div(id="embeddingContainer") element.
Congrats! At this step you are now showing custom data in your SaaS Dashboard, fetched from your SaaS backend. The end result for the above example:
​
Custom embed passed back to the dashboard from the API server
This works, however the data returned from our API (in this case the embed url) is generic, not tailored for each different user. Let's take a look at how user identification works.

Your Application - Previous

1. Creating an API endpoint that returns your application

Next - Your Application

3. Parsing User and Plan Capabilities

Last modified 10h ago

Copy link