Aan de slag met voorbeeld van Power BI-werkruimteverzamelingen

Met Microsoft Power BI-werkruimteverzamelingen kunt u Power BI-rapporten rechtstreeks integreren in uw web- of mobiele toepassingen. In dit artikel maakt u kennis met het voorbeeld aan de slag met Power BI-werkruimteverzamelingen .

Voordat we verdergaan, wilt u de volgende resources opslaan: Ze helpen u bij het integreren van Power BI-rapporten in de voorbeeld-app en uw eigen apps.

• Voorbeeldwerkruimteweb-app
• Naslaginformatie over de API voor Power BI-werkruimteverzamelingen
• Power BI .NET SDK (beschikbaar via NuGet)
• Voorbeeld van het insluiten van JavaScript-rapporten

De voorbeeld-app kunt configureren

Laten we eens bekijken hoe u uw Visual Studio-ontwikkelomgeving instelt voor toegang tot de onderdelen die nodig zijn om de voorbeeld-app uit te voeren.

1. De Power BI-werkruimteverzamelingen downloaden en uitpakken: een rapport integreren in een voorbeeld van een web-app op GitHub.

2. Open PowerBI embedded.sln in Visual Studio. Mogelijk moet u de opdracht Update-Package uitvoeren in de NuGet Package Manager-console om de pakketten die in deze oplossing worden gebruikt, bij te werken.

3. Bouw de oplossing.

4. Voer de ProvisionSample-console-app uit. In de voorbeeldconsole-app richt u een werkruimte in en importeert u een PBIX-bestand.

5. Als u een nieuwe werkruimte wilt inrichten, selecteert u optie 1, Verzamelingsbeheer en selecteert u vervolgens optie 6, Een nieuwe werkruimte inrichten

6. Als u een nieuw rapport wilt importeren, selecteert u optie 2, rapportbeheer en selecteert u vervolgens optie 3, PBIX Desktop-bestand importeren in een werkruimte.

7. Voer de naam van de werkruimteverzameling en de toegangssleutel in. Je kunt deze in de Azure Portal krijgen. Zie Weergave API van Power BI toegangssleutels in Aan de slag met Microsoft Power BI Embedded voor meer informatie over het verkrijgen van uw toegangssleutel.

   

8. Kopieer en sla de zojuist gemaakte werkruimte-id op die u verderop in dit artikel wilt gebruiken. Nadat de werkruimte-id is gemaakt, kunt u deze vinden in de Azure Portal.

   

9. Als u een PBIX-bestand in uw werkruimte wilt importeren, selecteert u optie 6. Pbix Desktop-bestand importeren in een bestaande werkruimte. Als u geen PBIX-bestand bij de hand hebt, kunt u het PBIX-voorbeeld van een retailanalyse downloaden.

10. Als u hierom wordt gevraagd, voert u een beschrijvende naam in voor uw gegevensset.

U ziet een antwoord dat er ongeveer als volgt uitziet:

Checking import state... Publishing
Checking import state... Succeeded

Op dit moment hebt u een Power BI PBIX-rapport geïmporteerd in uw werkruimte. Laten we nu eens kijken hoe u de voorbeeld-web-app van Power BI-werkruimteverzamelingen uitvoert.

De voorbeeld-web-app uitvoeren

Het voorbeeld van de web-app is een voorbeeldtoepassing waarmee rapporten worden weergegeven die zijn geïmporteerd in uw werkruimte. U configureert als volgt het voorbeeld van de web-app.

1. Klik in de powerBI embedded Visual Studio-oplossing met de rechtermuisknop op de EmbedSample-webtoepassing en kies Instellen als opstartproject.

2. Bewerk in web.configin de EmbedSample-webtoepassing de appSettings: AccessKey, WorkspaceCollection-naam en WorkspaceId.

   <appSettings>
       <add key="powerbi:AccessKey" value="" />
       <add key="powerbi:ApiUrl" value="https://api.powerbi.com" />
       <add key="powerbi:WorkspaceCollection" value="" />
       <add key="powerbi:WorkspaceId" value="" />
   </appSettings>
   

3. Voer de EmbedSample-webtoepassing uit.

Zodra u de EmbedSample-webtoepassing hebt uitgevoerd, moet het linkernavigatievenster een menu Rapporten bevatten. Als u het rapport wilt weergeven dat u hebt geïmporteerd, vouwt u Rapporten uit en klikt u op een rapport. Als u het PBIX-voorbeeld van een retailanalyse hebt geïmporteerd, ziet de voorbeeldweb-app er als volgt uit:

Nadat u op een rapport hebt geklikt, ziet de EmbedSample-webtoepassing er ongeveer als volgt uit:

De voorbeeldcode verkennen

Het voorbeeld van Microsoft Power BI-werkruimteverzamelingen is een voorbeeld van een web-app die laat zien hoe u Power BI-rapporten in uw app kunt integreren. Het maakt gebruik van een MVC-ontwerppatroon (Model-View-Controller) om best practices te demonstreren. In deze sectie worden onderdelen van de voorbeeldcode gemarkeerd die u kunt verkennen in de in PowerBI ingesloten web-app-oplossing . Het MVC-patroon (Model-View-Controller) scheidt het modelleren van het domein, de presentatie en de acties op basis van gebruikersinvoer in drie afzonderlijke klassen: Model, Weergave en Beheer. Zie Meer informatie over ASP.NET voor meer informatie over MVC.

De voorbeeldcode voor Microsoft Power BI-werkruimteverzamelingen wordt als volgt gescheiden. Elke sectie bevat de bestandsnaam in de powerBI embedded.sln-oplossing, zodat u de code in het voorbeeld eenvoudig kunt vinden.

Model

Het voorbeeld heeft een ReportsViewModel en ReportViewModel.

ReportsViewModel.cs: Vertegenwoordigt Power BI-rapporten.

public class ReportsViewModel
{
    public List<Report> Reports { get; set; }
}

ReportViewModel.cs: Vertegenwoordigt een Power BI-rapport.

public class ReportViewModel
{
    public IReport Report { get; set; }

    public string AccessToken { get; set; }
}

Verbindingsreeks

De connection string moet de volgende indeling hebben:

Data Source=tcp:MyServer.database.windows.net,1433;Initial Catalog=MyDatabase

Het gebruik van algemene server- en databasekenmerken mislukt. Bijvoorbeeld: Server=tcp:MyServer.database.windows.net,1433;Database=MyDatabase,

Weergave

De weergave van Power BI-rapporten en een Power BI-rapport wordt beheerd.

Reports.cshtml: Iterate over Model.Reports om een ActionLink te maken. De ActionLink bestaat als volgt:

<div id="reports-nav" class="panel-collapse collapse">
    <div class="panel-body">
        <ul class="nav navbar-nav">
            @foreach (var report in Model.Reports)
            {
                var reportClass = Request.QueryString["reportId"] == report.Id ? "active" : "";
                <li class="@reportClass">
                    @Html.ActionLink(report.Name, "Report", new { reportId = report.Id })
                </li>
            }
        </ul>
    </div>
</div>

Report.cshtml: Stel het Model.AccessToken en de Lambda-expressie voor PowerBIReportFor in.

@model ReportViewModel

...

<div class="side-body padding-top">
    @Html.PowerBIAccessToken(Model.AccessToken)
    @Html.PowerBIReportFor(m => m.Report, new { style = "height:85vh" })
</div>

Controller

DashboardController.cs: hiermee maakt u een PowerBIClient die een app-token doorgeeft. Er wordt een JSON-webtoken (JWT) gegenereerd op basis van de ondertekeningssleutel om de referenties op te halen. De referenties worden gebruikt om een exemplaar van PowerBIClient te maken. Zodra u een exemplaar van PowerBIClient hebt, kunt u GetReports() en GetReportsAsync() aanroepen.

CreatePowerBIClient()

private IPowerBIClient CreatePowerBIClient()
{
    var credentials = new TokenCredentials(accessKey, "AppKey");
    var client = new PowerBIClient(credentials)
    {
        BaseUri = new Uri(apiUrl)
    };

    return client;
}

ActionResult Reports()

public ActionResult Reports()
{
    using (var client = this.CreatePowerBIClient())
    {
        var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId);

        var viewModel = new ReportsViewModel
        {
            Reports = reportsResponse.Value.ToList()
        };

        return PartialView(viewModel);
    }
}

Task<ActionResult> Report(string reportId)

public async Task<ActionResult> Report(string reportId)
{
    using (var client = this.CreatePowerBIClient())
    {
        var reportsResponse = await client.Reports.GetReportsAsync(this.workspaceCollection, this.workspaceId);
        var report = reportsResponse.Value.FirstOrDefault(r => r.Id == reportId);
        var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId, report.Id);

        var viewModel = new ReportViewModel
        {
            Report = report,
            AccessToken = embedToken.Generate(this.accessKey)
        };

        return View(viewModel);
    }
}

Een rapport integreren in uw app

Zodra u een rapport hebt, gebruikt u een IFrame om het Power BI-rapport in te sluiten. Hier volgt een codefragment uit powerbi.js in het voorbeeld van Microsoft Power BI-werkruimteverzamelingen .

init: function() {
    var embedUrl = this.getEmbedUrl();
    var iframeHtml = '<iframe style="width:100%;height:100%;" src="' + embedUrl + 
        '" scrolling="no" allowfullscreen="true"></iframe>';
    this.element.innerHTML = iframeHtml;
    this.iframe = this.element.childNodes[0];
    this.iframe.addEventListener('load', this.load.bind(this), false);
}

Rapporten filteren die zijn ingesloten in uw toepassing

U kunt een ingesloten rapport filteren met behulp van een URL-syntaxis. Hiervoor voegt u een $filter querytekenreeksparameter met een eq-operator toe aan uw iFrame src-URL met het opgegeven filter. Dit is de syntaxis van de filterquery:

https://app.powerbi.com/reportEmbed
?reportId=d2a0ea38-...-9673-ee9655d54a4a&
$filter={tableName/fieldName}%20eq%20'{fieldValue}'

Zie ook

Veelvoorkomende scenario's voor het verzamelen van Microsoft Power BI-werkruimten
Authenticating and authorizing in Power BI Workspace Collections (Verifiëren en autoriseren in Power BI Workspace Collections)
Een rapport insluiten
Een nieuw rapport maken op basis van een gegevensset
Power BI Desktop
Voorbeeld van Insluiten in JavaScript

Hebt u nog vragen? Misschien dat de Power BI-community het antwoord weet