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:
extends common/app-sidebar.pug
block head
  include common/app-head.pug
  +head("Welcome to your Application")
block page_content
  //  Replace with your content 
  .max-w-7xl.mx-auto.px-4.sm_px-6.md_px-8
    h1.text-2xl.font-semibold.text-gray-900 Welcome to your Application!
  div(id="embeddingContainer").max-w-7xl.mx-auto.px-4.sm_px-6.md_px-8
block footer
  include common/app-footer.pug
  +footer()
  script.
    var session;
    var containerDiv = document.getElementById("embeddingContainer");
​
    fetch('https://<your-server-url>/get-embed-url').then(response => {
      console.log(response)
      var options = {
          url: response.embed_url, 
          container: containerDiv,
          scrolling: "no",
          height: "700px",
          width: "1000px",
          locale: "en-US",
          footerPaddingEnabled: true,
          sheetId: <Sheed ID>, // use this option to specify initial sheet id to load for the embedded dashboard
          sheetTabsDisabled: false, // use this option to enable or disable sheet tab controls
          undoRedoDisabled: false, // use this option to disable undo and redo buttons
          resetDisabled: false // use this option to disable reset button
          defaultEmbeddingVisualType: "TABLE" // this option only applies to QuickSight console embedding and is not used for dashboard embedding
      };
      // Creates the actual embed in "embeddingContainer",
      // using the dashboard URL fetched.
      session = QuickSightEmbedding.embedSession(options);
    });
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.
Last modified 1yr ago