Maui Hybrid Power Bi embeded report ios issue

Question

What is a proper way to configure power bi reports on ios for Maui blazor hybrid app.

My current solution works in web, win, android but not in IOS, on IOS it opens power bi report iframe in safary(instead of rendering in app web view) and does not show anything except loading icon.

i'm using PowerBIService from this example https://github.com/southworks/powerbi-samples/tree/main/samples/power-bi-embedded/src/Demo.Web

on client using powerbi-client v2.22.2 (powerbi.min.js)

my componet looks following way:

window.showMyPowerBI = function (reportContainerId, accessToken, embedUrl, embedReportId) {     
	var reportContainer = document.getElementById(reportContainerId);      
	// Get models. models contains enums that can be used.     
	var models = window['powerbi-client'].models;      
	var config = {         
		type: 'report',         
		tokenType: models.TokenType.Embed,         
		accessToken: accessToken,         
		embedUrl: embedUrl,         
		id: embedReportId,         
		permissions: models.Permissions.All,         
		settings: {             
			filterPaneEnabled: true,             
			navContentPaneEnabled: true         
		}     
	};      
	// Embed the report and display it within the div container.     
	powerbi.embed(reportContainer, config); 
};

@inject MauiApp1.Data.PbiEmbedService PbiService 
@inject IJSRuntime JS  

<div id="report-container" style="height:100%;"> </div>  

@code {     
	
	protected override async Task OnAfterRenderAsync(bool firstRender) {         
		if (firstRender) {             
			var reportInfo = PbiService.GetEmbedParams({myworkspaceid}, {myreportid});              

			await JS.InvokeVoidAsync("showMyPowerBI", "report-container", reportInfo.EmbedToken.Token, 		
		  		reportInfo.EmbedReport[0].EmbedUrl, reportInfo.EmbedReport[0].ReportId);         
		}     
	} 
} 

Thanks in advance for any help.

Answer 1

HI Sergey,

I am working to build a mobile app for powerbi embedded can you please share a sample code?