Power Bi Js Api Example From GitHub

[oflok000]

Hello

I was learning Power Bi Js Api from github and then when I start make my example. I got this problem

this is my Code. (I am using angular. I took access code,url,id from sample form github)

// app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import * as pbi from 'powerbi-client';


declare const $; 

@Component({
  selector: 'app-root',
  templateUrl:'app.component.html',
  styles: [``]
})
export class AppComponent implements OnInit {
    
    constructor(private http: HttpClient){}
    
    ngOnInit(){ 
        
        this.showReport();
            
    }
    
    showReport() {
    // Report's Secured Token
    let accessToken = 'H4sIAAAAAAAEAB2Wxw6shhJE_-VusUSGwZIX5JwzOzJDzsl6__5G3vei-6iquv79Y6VPP6XFn7__NBYvBIOr0ykKgg-FRvn-3Pa5iS1JnzN7fgswUIA8b96PLi660L_XS9HsrY9ULGBGnPeAWRJNB7jWCUgvuTlqEejfGk6f5iTlzWUfz3FAATeQqbg7eQqL-nPazEfJIf-qqdelQs5YsOV0bls9ZrrkPpmn-22p8L2BBAv8kuUjgcON3Cyo04rMGWZDAnGHlEjr9H2rYm9PV7OFaM4q9VRRV4RTQwE_468LlmJhPlE0iS6zPvz1yVF6t7NbldPkk-ZpnJ5QQxZfJJ4lSUF4Frf381xC4_OwLkJ6tjaMfGQxWEryO9IA41SQ7pxKmIFRDV5_n_dMUBUEo-AaGDM7eA_VJ6CC_DSuFW4N2kJvZZCvY5ydylmwb8qMmVTKX4VzaL5UY7lexoZi-O9UVUIXa9rAVA6KDYN_X8iTLGulhKUjswSrsiWeoZtOvZ-qn3feRmM_wbdWDWPponRcyRbHcOgvTABtglDi3lMOlyXN4KbrgQURy4PO-Og2gYAJVvmmYQAw2gEOj2idj7Yw8txPEe1msF-F6fqUzA9s2ps5EIHy9cRsfZ9YF7EkbZgvSNcZ5UBfNMkP7a63BZmkogg2KJHECG0oed9prPWxdWQNRh1W3OixEipITnYww-ZmSZMc_20vzoVcfwozcwwDu1H6AjJyB5gWlTBOUqFhYrdCCOBbKMvXqRkJtO4N1QJcId3usQNES19Xz5W6n0rEVf4mlYIJ0ZCQmXNadCGqF2EC6-fVEqWbWt0zeYWEBF4BHGRVZ6dLFQgduoafQdm9376-JNTNo_3IXNeqUhC948eZ89bURBMBl51g6di-Zsoh9Fub_OerPL6U2DIgk9Z8AOPm-xtR2uY3vQlo-ImsaT_QcqfiEgZH289SXjmZPJ8q--a2KNvjzcTugnDz48lYxGkoODTqs0UNLaog5R7CmXAEG3RJvkxeZCbstIMv7tDmg8xtaFslyZ9T-AG2TJ7iZE08GMHpEcCG6h27qATYlkHNLldfBuFqM4Xy9bJt3lmFs347qwIgd9Bjz5OsHiPTj_lukP316pr1YNK0tVGr7r7BWcrE5GQu2dvhq49oFHQKJTuXPsrr2sk5yyuDjNU4Wwmh6A1koEyuLKL7mZPQ8BUULjZik4oA_MFptlXmq_r-0rCdy3rv4UC6Wz3T1_0kt3Z92quM-vBnt9vg4Iu0raIci2D2LV7qlVYKZiwlBCpXy0smJUe3GEa3_YyyBxZi_u5OWcbI8rXwFL_G4HDKHQQDRD-nFFU4aLhN9OVyG8endqlSFql-mJbtpkWPeKerevp3t9dAE-2BEPgDPrhJHM9tyEOFqiffsfGk7DHXi4U0t2fb0DRcmLATVtDX5JlvrdJpUcRtWy6QJFGf2EbXD8DQmSbYNF9cM3f6RXfp64HuX45NQuXDh1t2b21ixN6x5_0e72piOrDky2IafIOS9JQelmu0-4KGIAlmuSsLBXL4qSoDy63yBIb21p80_XTdgS3ge5yE8jtWvNmHh0NxIVMN8ehhuXfoktjU21KbSkVtLseLDdX-fDIqk4MMWVek-G7X4tbp5vXshb2FSXapPkPzOlVo8zxqZx0xYXfiO4RbjS6MUgZwB6MHtfdZZveZH0Cm5I4IRxH0syt3l2sZFbpsUh8Ftah738u1h1chgB4u31FddQy38S06OvqObA7ED0O0u8aCJgSoGdXl8H4Gi4g4V06Tsut_XzjikhjKSLNcZaULhAqjs0dhvpgWmSiLkQPff6yzVlZb6krFGBV1YH3cIEFHPIo2rI9hCPdt_JmU80vwZ-eVeadDcD5mjtvFLXzuDSdGrWvYieupSrPaYklS0mXflz8MCxqneKPL4xypjMLNRbkgWJ-bdG2bNPiQWb_G4n0YBPiLJ3QGyCS2YLKak4pGNDF7IGQXrcTLswPlCNKAMunVGDVAzeJdYR5gsU_gvGyRFzgrp8jgXvOjz2eWKLUVUdJns7hlNb6C2Lou7Jbz5XEd69OIqVtBtNxQ5ooLAhoQQYNat5SuGuHth7DeOYWeF5pvs5qaDZMHqN3awzWCpAbYBNwC7zDT3-o6B5onQkTxB4fpHIcm4nvTNI-lY8LNvmEBSZc8_XL98-evP-z6zPukls-vOig6tuuiOkTwdH4VjHnGysmRDRJCwqnwm7DoPg43yAu4ofWwwYNXyBK-R0wqhuMKtUqcsc8N28PjZqltsRonWv6RglQaZA55HsAN-QN13m3yzSaDWqWIy-FWXty7TNtcimH1FaeW2PK0p7DbInaDBXPTDzdHBJPuInd2ZWnmViQDYiXKhmHPltcro7BUQN4WdqitaLFAGr3MeWd3UZJzxl2AVFjFxYdEMcAUPU8QpYkiSCzqTngrdQtWY865m_4uiwhOtIaNp4UH0vFZGHyCRG5nGXugg1jnhkqMwFC2zYKCRoymfyWinQfZ5oj5vUWncuINqOgccAlcJsPakG4fXXzK_uc_zM_c_JQe_Ci_CcwQUYhPTicXMb3sz7SV9H9T7rce0_1Yy99YbSCveGoiCeiomSTyOQEg-woG24FTMuCMgoCIo-NPhaJyYnHuV3hXz-Oo5Fdq4qdU3XZwgktJdnOlagzDhpPzgXUVkO6R_Dyfsh1LNk0f10WMnSgaY3b-TN13LGT1CO8M9xKBaveFuaAH6MMPilcE_80CxPe7wcFx_A7FmuJIs2WcWuNzkX6R5zIJcjr64YBioneeeUq06vWS7maPrbmTJOJHeAIH_vekoVanXe9m0hg19-SXaGHIWDoo81HTfj19pXgzl5e2uFdsGmTnumJkssqLDIZMPFA89gZYchMw-GSVdEdNptIIA5Z4mGHY5BXhuehxS3hVz06Psl6rJBiU92uqP8z_-z8oE56sLgsAAA==';

    // Embed URL
    let embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=bd851208-5592-4e3e-ba72-5cfdfc39f41c&groupId=9166cf8d-d5fc-405e-bdc7-47e414da08fe';

    // Report ID
    let embedReportId = 'bd851208-5592-4e3e-ba72-5cfdfc39f41c';

    var models = pbi.models;
 
// We give All permissions to demonstrate switching between View and Edit mode and saving report.
    var permissions = models.Permissions.All
        
    // Configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // This also includes settings and options such as filters.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    let config= {
    type: 'report',
    //tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
    accessToken: accessToken,
    embedUrl: embedUrl,
    id: embedReportId,
    permissions: permissions,
    settings: {
        filterPaneEnabled: true,
        navContentPaneEnabled: true
    }
}

    // Grab the reference to the div HTML element that will host the report.
    let reportContainer = <HTMLElement>document.getElementById('reportContainer');

    // Embed the report and display it within the div container.
    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    let report = powerbi.embed(reportContainer, config);

        console.log(report);
        
    // Report.off removes a given event handler if it exists.
    report.off("loaded");

    // Report.on will add an event handler which prints to Log window.
    report.on("loaded", function() {
        console.log("Loaded");
    });
}

        
    
}

I alredy try everithing but I have no idea why my code doesnt work. It's the same code what they have

[v-ljerr-msft]

Hi @oflok000,

---

I was learning Power Bi Js Api from github and then when I start make my example. I got this problem

this is my Code. (I am using angular. I took access code,url,id from sample form github)

---

The access token, url, id from the sample won't work in your application/code. You need to use your own access token, url, id.

So you have to create Power BI account, and upload your reports to the created account. Then, you can call Power BI APIs to generate Embed Token for reports, dashboards or tiles you want to embed. For more information about embedding entities using Embed Tokens, please visit Embed Token Documentation. 

Regards

[oflok000]

Hello

Thank you for respond. Actually I can use any accesss tokken my tokken was embed but I found example with access code.

This link https://powerbiembedapi.azurewebsites.net/api/reports/c52af8ab-0468-4165-92af-dc39858d66ad return json with access code.