Hi there,
I am trying to embed a simple Power BI report inside a ASP web (.NET Core) using controllers. I have already get correctly embedToken, embedURL and ReportID, but when i try to call powerbi.embed() to initialize the report i get the following error:
"ncaught TypeError: this.element.getAttribute is not a function
at e.t.getUniqueId (powerbi.min.js:2)
at e.t.populateConfig (powerbi.min.js:2)
at e.t (powerbi.min.js:2)
at new e (powerbi.min.js:5)
at t.embedNew (powerbi.min.js:2)
at t.embedInternal (powerbi.min.js:2)
at t.embed (powerbi.min.js:2)
at Object.<anonymous> (my-extension.js:125)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)"
I have tried the EmbedToken, embedUrls and ReportId in Power BI embed Playground and they works fine, but i get that problem in the code. I believe that the problem may reside in the powerbi.js file, but i have also tried with differents files, from nugget package and GitHub and i still have the same problem.
I left the code to get the tokens and initialice the Power BI Report below:
JS file to initialice the Report and Call API to get the tokens: Consider MyPanel as a simple pop-up properties panel
this._button.onClick = (ev) => {
this._enabled = !this._enabled;
this._button.setState(this._enabled ? 0 : 1);
//Execute an action here
//if null, create docking panel
if (this.panel == null) {
this.panel = new MyPanel(this.viewer, this.viewer.container, 'myPanel', 'My Panel');
this.panel.addVisibilityListener((show) => {
this._button.setState(show ? 0 : 1);
});
}
var request = jQuery.ajax({
url: '/api/forge/PBI/url'
});
request.done(function (data) {
console.log(data);
// Read embed application token from textbox
var txtAccessToken = data.accessToken;
// Read embed URL from textbox
var txtEmbedUrl = data.embedUrl;
// Read report Id from textbox
var txtEmbedReportId = data.reportId;
var models = window['powerbi-client'].models;
var permissions = models.Permissions.All;
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: permissions,
settings: {
panes: {
filters: {
visible: true
},
pageNavigation: {
visible: true
}
}
}
};
var div = $('#PowerBIEmbed');
var report = powerbi.embed(div, config);
});
The C# files to get the tokens an respond to API request:
[ApiController]
public class PowerBi : ControllerBase
{
[HttpGet]
[Route("/api/forge/PBI/url")]
public EmbedConfig GetPBIToken()
{
EmbedConfig pBIData = PBICredentials.GetEmbedToken();
return pBIData;
}
}
public class PBICredentials
{
public static EmbedConfig GetEmbedToken()
{
var a = new Configurations();
using (var client = new PowerBIClient(new Uri(Configurations.ApiUrl), Authentication.GetTokenCredentials()))
{
// Retrieve the selected Report
var Reports = client.Reports.GetReportsInGroup(Configurations.WorkspaceId);
var Report = Reports.Value.FirstOrDefault();
// Generate an embed token to view
var generateTokenRequestParameters = new GenerateTokenRequest(TokenAccessLevel.View);
var tokenResponse = client.Reports.GenerateTokenInGroup(Configurations.WorkspaceId, Report.Id, generateTokenRequestParameters);
// Populate embed variables (to be passed client-side)
EmbedConfig embed = new EmbedConfig()
{
AccessToken = tokenResponse.Token,
EmbedUrl = Report.EmbedUrl,
ReportId = Report.Id
};
return embed;
}
}
}
public class EmbedConfig
{
[JsonPropertyName("accessToken")]
public string AccessToken { get; set; }
[JsonPropertyName("embedUrl")]
public string EmbedUrl { get; set; }
[JsonPropertyName("reportId")]
public Guid ReportId { get; set; }
}
Consider the authentification file and Configuration as in the Course "Developers in One Day" From microsoft Power BI: https://www.youtube.com/playlist?list=PL1N57mwBHtN1AGWHnJMhtvJCIG_IlC07D
Any kind of help will be thanked!
Best regards,
Carlos
