Softr Call API -> Make.com Scenario... and the resulting data -> same Softr client portal page

Ask the community
1

Use Case: Client logs into portal and can view their unique PowerBi embedded sales report.

  1. Their PowerBi report is authenticated via a MAKE.com scenario that gets their unique embed token and URL.
  2. I store these two values in an Airtable.
  3. The last step is to use javascript code to combine the token and URL with a specific function and the report is supposed to magically appear in a container on my Softr Client Portal.

How do I retrieve the data from MAKE (or the airtable) and ensure that it is sent to the correct client?
Does Softr have cookies that are behind the scenes or (JWT tokens)?
Where should the javascript go on my page? Custom code block or in the page Header/Footer?
How to ensure that the MAKE scenario has finished before I receive the Token and URL?

image
image607Ă—1228 47.3 KB

image
image2173Ă—427 67 KB

Javascript to be added (where?) on Softr (Client Side/Frontend) page.

image
image850Ă—949 70.3 KB

2

Hmm, this is a tough one. Tagging some Make / Javascript folks to see if they know.

@acjnas @colefortman

4

Working somewhat… still need to tweak the screen size/filters/navigation etc…
I also need to add a page refresh after the Action Button (described below) is pressed.

See below Javascript (in a Custom Code Block) that renders a PowerBI Embedded Report using the Power BI REST API without the client needing a Power BI license**

Values for the Javascript come from a List-Details block on the same page.

Step 1 - Action button in List-Details Block sends API Call to MAKE.com scenario that starts with a Webhook (see above screenshot) to get the Embed Token and Embed URL,

Step 2 - The MAKE.com scenario saves several values (including the Embed Token and Embed URL) in the same Airtable that is used as a datasource for the List-Details block.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Power BI Embedded Report</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.23.1/powerbi.js" integrity="sha512-BStgrQ1HLuev/g/6pS3qTQbsHY9gkPkhmqruRvHahKHKMCf6cK94JXhbtPVjqW4F0Hm7Ciff7Oq9B+LP/n+Bqg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<h3>My Dashboard</h3>
  <div id="embed-container" style="height:600px;"></div>

  <script>
    // Wait until the Power BI library is fully loaded
    window.onload = function() {
        const waitForRecords = setInterval(function () {
            // Ensure that window.records and powerbi are defined
            if (window.records !== undefined && powerbi !== undefined) {
                clearInterval(waitForRecords); // Clear the interval once records and Power BI are available

                // Retrieve embed details from window.records
                const firstRecord = window.records[Object.keys(window.records)[0]].record.fields;
                const embedUrl = firstRecord.embedUrl;
                const embedToken = firstRecord.embedToken;
                const reportId = firstRecord.reportId;

                console.log("Embed URL:", embedUrl);
                console.log("Embed Token:", embedToken);
                console.log("Report Id:", reportId);
                console.log("First Record:", firstRecord);

                // Now create the embed configuration
                models = window['powerbi-client'].models;

                const embedConfig = {
                    type: 'report',
                    tokenType: models.TokenType.Embed,
                    accessToken: embedToken,
                    embedUrl: embedUrl,
                    settings: {
                        filterPaneEnabled: true,
                        navContentPaneEnabled: true
                    }
                };

                // Embed the Power BI report
                const embedContainer = document.getElementById('embed-container');
                powerbi.embed(embedContainer, embedConfig);
            }
        }, 100); // Check every 100 milliseconds until window.records and powerbi are available
    }
  </script>
</body>
</html>
5

solution posted. Still need help making the page refresh after new data arrives and also help make the URL open in a new browser window.

1 Like