Giriş

7 dakika

Power BI içeriğini uygulamanıza eklemek için aşağıdaki geliştirme görevlerini tamamlamanız gerekir.

Ekleme işlemini program aracılığıyla denetlemek için istemci kitaplığını ekleyin.
İstemci kitaplığını ekleyin.
Ekleme kapsayıcısı ekleyin.
Sunucu tarafında oluşturulan olguları çıkış olarak belirleyin.
Yapılandırma nesnesi ayarlama.
Power BI içeriğini ekleyin.

İstemci kitaplığını ekleme

JavaScript veya TypeScript kullanarak Power BI içeriği eklemek için Power BI istemci API'sini kullanın. Ekleme deneyiminin tamamı için programlı denetim sağlayan bir istemci kitaplığıdır.

API'ler üç paket içerir:

powerbi-client - Powerbi-report-authoring kitaplığında bulunan API'ler dışında içerik ekleyen tüm API'leri içerir.
powerbi-models - Nesne modellerini içerir. Her model bir TypeScript arabirimine, JSON şema tanımına ve belirli bir nesnenin geçerli bir model olduğundan emin olmak için bir doğrulama işlevine sahiptir.
powerbi-report-authoring - Görselleri oluşturup kişiselleştirmeye ve yüklendikten sonra Power BI raporu yazmaya yönelik bir uzantıdır. Ayrıca uygulamanızın ekli Power BI raporlarını program aracılığıyla düzenlemesine de olanak tanır.

NuGet veya npm kullanarak Power BI istemci API kitaplığını yükleyebilirsiniz.

Daha fazla bilgi için bkz. Power BI tümleşik analiz İstemci API'si nedir?.

İstemci kitaplığını dahil et

Uygulamanız, istemci kitaplığının kaynağını oluşturmak için bir script öğe içermelidir.

<script src="/powerbi-client/dist/powerbi.js"></script>

İstemci kitaplığını bir içerik teslim ağından (CDN) kaynak olarak almak da mümkündür. Örnek için bkz. JSDelivr powerbi-client.

<script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.22.3/dist/powerbi.min.js"></script>

Doğrudan dahil edildiğinde, istemci kitaplığı powerbi-client adlı genel bir şekilde kullanıma sunulur. Power BI hizmeti örneği olan powerbi adlı başka bir genel de vardır.

Ekleme kapsayıcısı ekleme

Uygulama, ekleme kapsayıcısı işlevi gören bir div öğe içermelidir.

<div id="embedContainer"></div>

Uygulama, Power BI içeriğini bir öğenin içinde diviframe barındırarak öğesine ekler. öğesi, iframe uygulama ile ekli içerik arasında bir ayrım oluşturarak verilerin güvenli olduğundan emin olur. İstemci API'leri her zaman uygulama ile ekli içerik arasında güvenli bir şekilde iletişim kurar.

İstemci kitaplığının nasıl çalıştığını gösteren aşağıdaki videoyu izleyin.

Çıkış sunucu tarafı tarafından oluşturulan olgular

Uygulamanız, çıkış istemci tarafı olan bir erişim belirteci almalıdır. Buna ek olarak, uygulamanızın belirli Power BI yapıt özelliklerinin istemci tarafında çıkışını vermesi gerekir.

İpucu

Erişim belirteçlerini alma ve Power BI yapıt özelliklerini alma hakkında bilgi edinmek için Power BI içerik ekleme izinlerini ayarlama modülünü inceleyin.

Aşağıdaki script öğe üç değişken içerir. accessToken değişkeni, sunucu tarafı tarafından oluşturulan erişim belirtecini depolar. reports ve datatsets değişkenleri, eklenebilir yapıtların JSON gösterimlerini depolar. Bu örnekte yapıt türleri raporlar ve veri kümeleridir. Özellikle, değişkenler ekleme desteği için istemci tarafında kullanılabilir olması gereken yapıt kimliğini ve ekleme URL'si özelliklerini depolar. Ayrıca, uygulamanın kullanıcıya yapıt adlarını menüdeki gibi kolay bir şekilde sunabilmesi için name özelliğini de içerir.

<script>
    var accessToken = "@Model.AccessToken";
    var reports = @Html.Raw(Model.ReportsJson)
    var datasets = @Html.Raw(Model.DatasetsJson)
</script>

Yapılandırma nesnesi ayarlama

Uygulamanızın Power BI içeriği eklemek için gereken tüm bilgileri sağlamak için bir yapılandırma nesnesi oluşturması gerekir. Yapılandırma nesnesinin aşağıdaki beş özelliğini ayarlamanız gerekir:

tokenType - Değeri şu senaryolardan birine göre ayarlayın:
- Kuruluşunuz için Erişim belirteci bir Azure AD belirtecidir. Değeri models.TokenType.Aad olarak ayarlayın.
- Müşterileriniz için Erişim belirteci bir ekleme belirtecidir. Değeri models.TokenType.Embed olarak ayarlayın.
accessToken - Sunucu tarafı tarafından oluşturulan erişim belirteci.
type - Aşağıdaki değerlerden birine ayarlayın. 2. ve 3. ünitelerde her tür Power BI içeriğinin nasıl ekileceği açıklanır.
- Rapor Power BI raporu veya sayfalandırılmış rapor için.
- Visual Power BI rapor görseli için.
- Pano Pano için.
- Karo Pano kutucuğu için.
- qna Q&A deneyimi için.
id - Power BI yapıt kimliği.
embedUrl - Power BI yapıtı ekleme URL'si. Bu URL, eklenmiş yapıtı iframe barındıran öğenin kaynağı olur. Özellikle API, URL'yi öğesinin src özniteliğine iframe atar.

Aşağıdaki kod, Müşterileriniz için senaryoyu kullanarak Power BI raporu eklemek için yapılandırma nesnesinin nasıl oluşturulacağını gösterir. models , yararlı numaralandırma türleri (sabit listeleri) içeren istemci kitaplığı modellerine bir başvurudur.

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Create the embed configuration object.
let config = {
    tokenType: models.TokenType.Embed,
    accessToken: accessToken, // Server-side generated access token
    type: 'report',
    id: '<Server-side retrieved Report ID>',
    embedUrl: '<Server-side retrieved Report embed URL>'
};

Ayarlayabileceğiniz içeriğe özgü daha fazla yapılandırma özelliği vardır. Bunlar 2. ve 3. ünitelerde açıklanmıştır.

Power BI içeriğini ekleme

powerbi.embed(embedContainer, config) Power BI içeriğini eklemek için işlevini kullanın.

Aşağıdaki kodda Power BI raporu ekleme gösterilmektedir. embedContainer değişkeni ekleme kapsayıcısına (div öğesi) yönelik bir başvuruyu depolarkenconfig, değişken belirli bir Power BI raporu için ayarlanan yapılandırma nesnesini depolar. Son deyim, ekleme kapsayıcısını ve yapılandırma nesnesini geçirerek ekleme işlemini yapar. değişkeni ekli report rapora bir başvuru depolar.

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Get a reference to the embedding container.
let embedContainer = $('#embedContainer')[0];

// Create the embed configuration object.
let config = {
    tokenType: models.TokenType.Embed,
    accessToken: accessToken, // Server-side generated access token
    type: 'report',
    id: '<Server-side retrieved Report ID>',
    embedUrl: '<Server-side retrieved Report embed URL>'
};

// Embed the report in the embedding container.
report = powerbi.embed(embedContainer, config);

Bir sonraki ünitede, en yaygın olarak eklenen Power BI içerik türü olan Bir Power BI raporunu eklemeyi öğreneceksiniz.

Devam et