30 Apr 2022

Embed Forge Viewer inside Power BI report

Follow @Xiaodong Liang

Note: This experiment has not been well tested, and some steps are not automatic. It only works with web version of Power BI. The pending investigations are also listed at the bottom of the article. We would appreciate anyone who shares any experience with PowerBI in these areas. 

Industry practitioners are seeking more efficient ways to analyze the accumulated data in projects on a daily basis. Microsoft Power BI is one of the most popular and powerful data analysis tools, as it provides intelligent dashboards to inspect data with. Especially in the BIM industry, Power BI is widely adopted as a solution for data inspection and risk anticipation. The below is just a small experiment on how to embed Forge Viewer to web version of Power BI report.

This scenario stems from the requirement that some customers will need to work within Power BI and have not had the chance to program. VCad, a 3rd party partner of Forge, has provided a solution to this requirement. If you would like to use their existing visual, this could be one choice. 

From a technology perspective, this solution is a type of Custom Visual of PowerBI. It allows the developer to build the custom visualization, with the flexibility to integrate other web libraries with rich graphics such as D3, JQuery, Esri GIS library, etc. It supports a sandbox mode that you can test locally. If you think it is ready to go, you can also publish the visual to Partner Center (available in AppSource).

The skeleton of the custom visual is the TypeScript class. Most external libraries will be imported locally. Due to the usage of Forge Viewer Javascript libraries, we cannot import the libraries locally. We'll need to define the logic to import Forge Viewer3D.min.js and Style.min.css through the host URL of Forge, like we usually do with Forge app. 

 private async loadForgeViewerScriptAndStyle(): Promise<void> {

            return new Promise<void>((reslove,reject) => {

                let forgeviewerjs = document.createElement('script');
                forgeviewerjs.src = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.js';

                forgeviewerjs.id = 'forgeviewerjs';
                document.body.appendChild(forgeviewerjs);

                forgeviewerjs.onload = () => {
                    console.info("Viewer scripts loaded"); 
                    let link = document.createElement("link");
                    link.rel = 'stylesheet';
                    link.href = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css';
                    link.type = 'text/css';
                    link.id = "forgeviewercss";
                    document.body.appendChild(link); 
                    console.info("Viewer CSS loaded"); 

                    reslove();
                };

                forgeviewerjs.onerror = (err) => {
                    console.info("Viewer scripts error:" +err ); 
                    reject(err);
                }; 
 
            })

  };

Four Pending Investigations on Embedding the Forge Viewer in Power BI Reports

In addition, the visual won't work with Forge Viewer if it is built with the 2.5.0 version of the Pbiviz custom visual tool. Thanks to a hint (about the Pbiviz version) from my colleague Frederic Duszyk in engineering team, I was saved from struggling to make the sample work. Currently, the custom visual by Pbiviz version 2.5.0 works. Here is the Power BI embedded sample with Github

This sample uses an Excel file as a data source, so one project can generate an Excel file with properties of the model objects (DBLD and materials). The other project is the Power BI custom visual. The Readme describes the steps for this project in detail.

1.    As Readme says, the sample uses hard-coded token or call custom endpoint of token. Obviously, in the final visual, you need to get the token dynamically. It is not a safe way to set Access-Control-Allow-Origin.
2.    If you're debugging in the browser console, you may find this type of error on Windows OS. I have not figured out where it comes from. It may be because it is a sandbox. It does not affect the model loading in Forge Viewer. And if you're in OSX, the error does not appear.

"Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag."

3.    This sample uses a static excel file as a data source. In reality, we would need an SQL database or Push Data. By this, I mean that when any model is loaded, the data source can be dynamically refreshed with the objects properties.

4.    In the current sample, the custom visual (with Forge Viewer) responds when the table view or pie view is selected. I am investigating how to make the table view and pie view responding when the objects are selected in Forge Viewer. Stay tuned.

Lastly, I also logged a wish with the Forge Viewer team to expose an official visual in the Power BI partner center. The wish ID is: LMV-5594

 

1



If this blog was helpful, check out other coding resources on the Forge Community Blog or Code Samples page.

Related Article


Posted By

Xiaodong Liang

Xiaodong Liang has been with Autodesk since 2007, focusing on providing programming support, consulting, training and evangelism to external developers. He started his career China and now lives in Beijing, China. Xiaodong is currently a developer consultant in the team Developer Technical Services (DevTech), the worldwide team of API gurus providing technical services through the Autodesk Developer Network. He...