August 10, 2020

Embed Forge Viewer inside Power BI report

Follow @Xiaodong Liang

Note: this is an experiment that has not been well tested. Some steps are not automatic. The pending investigations are also listed on the bottom of the article. We would appreciate anybody for sharing any experience of PowerBI in the related areas.

The industry practitioners are seeking more efficient ways to analyze the accumulated data in projects in daily bases. One of popular, powerful tools, Microsoft Power BI, provides intelligent dashboards to inspect the data. Especially in BIM industry, Power BI is widely adopted as a solution for data inspection and risk anticipation. 

There are couple of use scenarios as far as I know.

1. Export BIM data and build Power BI report without coding. This can be done by BIM 360 built-in feature: PowerBI Template

2. Poll BIM data and import to Power BI report. This can be done by Forge services to extract the metadata and import to Power BI. It could be a web app, or scripts only. e.g. importing BIM360 Documents data by R scripts. This demo gets documents data of BIM 360 folder and insert it as data source of Power BI report.

3. Integrate PowerBI report with Forge Viewer in web app. This is demoed by the sample Clash Analysis, which checks the clash data from Model Coordination of BIM 360, push the data for Power BI report. The report is imbedded by Power BI web component, finally associating with Forge Viewer.

4. Embed Forge Viewer inside Power BI report directly. This scenario comes from the requirement that some customers will need to work within Power BI only and have not chance to program. One 3rd party partner of Forge (VCad) has provided such solution. If you would like to use their existing visual, this could be one choice. 

From technology perspective, such solution is a kind of Custom Visual of PowerBI. It allows the developer to build a way with the custom visualization, flexibility integrating with other web libraries with rich graphics such as D3, JQuery, Esri GIS library etc. It supports a sandbox mode that you could test locally. If you think it is ready to go, you could also publish the visual to Partner Center (app source market)

The skeleton of custom visual is the TypeScript class. Most external libraries will be imported locally. While due to the usage of Forge Viewer Javascript libraries, we cannot import the libraries locally, yet we 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);
                }; 
 
            })

  };

In addition, the visual is not working with Forge Viewer if it is built by the tool of custom visual (pbiviz) at version > 2.5.0. Great thanks to my colleague Frederic Duszyk in engineer team. His hint (about pbiviz version) saved me out with the struggling to make the sample working. Currently, custom visual by pbiviz version 2.5.0 can work. 

The complete sample source code is available at: 

https://github.com/xiaodongliang/forgeviewer_embed_in_powerbi_report

This sample uses excel file as data source, so one project is to generate excel file with properties of the model objects (dbId and materials). The other project is the about Power BI custom visual. The Readme and video describe the steps in detail.  The below are a couple of pending investigations:

1.    As readme says, the sample uses hard-coded token or call custom endpoint of token. Obviously, in the final visual, it requires to get token dynamically. In my test, I set my endpoint of getting token with  It is not a safe way to set Access-Control-Allow-Origin. But this may not be safe.
2.    If debugging in the browser console, you may find such 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 on 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.    The sample uses static excel file as data source. In reality, we would need SQL database or Push Data, by this mean, when any model is loaded, the data source can be dynamically refreshed with the objects properties .
4.    In current sample, custom visual (with Forge Viewer) responds when the table view or pie view is selected. I am investigating how to make table view and pie view responding when the object are selected in Forge Viewer. stay tune.

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

 

1

 

Posted by

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 supports...

Related Posts