Coder Social home page Coder Social logo

fbanuet / forgeviewer_embed_in_powerbi_report Goto Github PK

View Code? Open in Web Editor NEW

This project forked from xiaodongliang/forgeviewer_embed_in_powerbi_report

0.0 0.0 0.0 5.19 MB

License: MIT License

JavaScript 21.69% TypeScript 76.26% CSS 1.60% Less 0.45%

forgeviewer_embed_in_powerbi_report's Introduction

Forge Viewer Embed in Power BI Report

node npm visual code

node-typescript pbiviz

oAuth2 Data-Management Viewer

License Level

Description

This repository demonstrates how to embed Forge Viewer inside Power BI report by custom visual

Thumbnail

Steps of exporting model properties to excel file

  1. Forge Account: Learn how to create a Forge Account, activate subscription and create an app at this tutorial. Get Forge client id, Forge client secret.
  2. Prepare a source model and translate with Forge web services by other Forge Viewer samples. Verify it can be loaded in a general web app successfully. Make a note with its URN.
  3. Switch to the project forge-model-properties-excel. Install the packages
  4. Input Forge client id, client secret, Forge bucket key, model urn in the environment or config file.
  5. In line 55 of index.js, ensure which properties you want to extract. The default are dbid and material. You may check the correct property name of your model firstly.
  6. Run the script (or start debugging) Node index.js
  7. After a while, one excel file will be available in the root folder of the project. The time depends on the size of the model properties json. If large file, it may take more time.

  1. In Power BI app, import the excel file as data source.

  1. Create report from the data source. Insert one table view, selecting dbid and material from field view. Note: please switch dbid type to Don't Summarize

  1. Insert one pie chart, selecting material as Legend and material count as Values.

Steps of building custom visual of Power BI

  1. Follow the steps to setup environment of PowerBI custom visual. Note: install pbiviz 2.5.0. And install certification with the help document.

  2. Follow the tutorial to create a new project of custom visual and test/debug it in PowerBI.

  3. Ensure to create an SSL certificate

  4. Switch to the project forgePowerbiView. Install the packages.

  5. Prepare 2legged token for loading model in Forge Viewer

    a. Manually generate a token by other tool. Input token and URN to the file visual.ts line 11

    b. OR, prepare a custom endpoint on your server for generating token on demand. see visual.ts line 8 In the endpoint, please enable Access-Control-Allow-Origin .The code below is a demo in my local server, which is based on the sample of LearnForge tutorial

    // GET /api/forge/oauth/token - generates a public access token (required by the Forge viewer).
    router.get('/token', async (req, res, next) => {
    
        res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    
        try {
            const token = await getPublicToken();
            res.json({
                access_token: token.access_token,
                expires_in: token.expires_in    
            });
        } catch(err) {
            next(err);
        }
    });
    
  6. build the project by the script below

     pbiviz package
    

Note: if you want to use some latest methods of Forge Viewer, yet the typeScript class has not defined them, you may try to manually add them to index.d.ts.

    ```
    node_modules/@types/forge-viewer/index.d.ts
    ```

The distributed file *PowerBI_ForgeViewer_Visual.pbiviz will be generated at dist folder. Load the visual package in Power BI visuals box. Insert one instance, select dbid from fields. It will take some time for the custom visual to load the model in Viewer.

  1. Or, run the script below will start debug mode. Ensure the developer model is enabled with your PowerBI account. Insert an instance of developer visual. Select dbid from fields.. Similarly it will take some time for the custom visual to load the model in Viewer.
    pbiviz start

  1. Insert a table visual, selecting all columns of the data.
  2. Insert an instance of Pie Visual, selecting Material as , and Material count as value.
  3. Click one row of table view, the corresponding single objects in Forge Viewer will be isolated. Select a material in pie view, the corresponding group of objects in Forge Viewer will be isolated.

10. Open browser >> developer console when you want to debug in code.

forgeviewer_embed_in_powerbi_report's People

Contributors

xiaodongliang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.