Katıştırılmış analiz uygulamalarında rapor görseli menü komutlarını değiştirme

Power BI'daki görsellerde, uygulama kullanıcılarınızın verilerini görme şeklini değiştirmesine olanak sağlayan menüler bulunur. Örneğin, Bağlam menüsü kullanılarak veri noktaları görsele eklenebilir veya bir görselin dışında tutulabilir. Seçenekleri menüsü, bir görselde bulunan verileri elektronik tabloya aktarmak için kullanılabilir.

Görsele veya görselin içindeki belirli bir veri noktasına sağ tıklayarak Bağlam menüsünü açın.

Görselin sağ üst köşesindeki üç noktayı seçerek Seçenekler menüsünü açın.

Not

Görselin görsel üst bilgisi gizliyse üç nokta görüntülenmez.

Bu API, bu menüleri genişletmek için bir yol sağlar, böylece kullanıcılarınız için komutlar ekleyebilir ve uygulama deneyimini geliştirebilirsiniz. Eylemleri gizleyerek veya devre dışı bırakarak menüleri daha fazla özelleştirebilirsiniz. Örneğin, seçenekler menüsü için Spotlight yerleşik komutunu gizleyebilirsiniz.

Komutları eklemek için extensions kullanarak menüleri değiştirin ve yerleşik komutların görüntülenme biçimini değiştirmek için commands.

API'yi rapor yükü (ekleme yapılandırması) üzerinde çalışacak şekilde yapılandırabilir veya rapor yükledikten sonra eklenen öğeleri güncelleştirmek için rapor updateSettings yöntemini çağırabilirsiniz. Daha fazla bilgi edinmek için bkz. Rapor ayarlarını yapılandırma ve Görsel üst bilgileri gizleme veya gösterme.

Yeni menü ayarları rapordaki tüm görsellere uygulanır. Belirli bir görsele ayar uygulamak için Seçicilerkullanın.

Komut tanımı oluşturmak için aşağıdaki parametreleri kullanın:

ad - Komut adı.
başlık - Komutun başlığı. visualContextMenu ve visualOptionsMenuiçinde geçersiz kılma yoksa, bu varsayılan olarak kullanılır.
simgesi(isteğe bağlı) - Simge olarak görüntülemek istediğiniz resim. Simgeler yalnızca seçenekler menüsünde desteklenen .
genişletme - Komutun genişletir menüyü tanımlayın. komutunugörsel bağlam menüsüne, görsel seçenekleri menüsüneveya her ikisine de ekleyebilirsiniz. Menü başlığı veya simge konumu gibi her menüdeki özellikleri özelleştirmek de mümkündür.

Komut tanımını, rapor ayarlarına geçirilen extensions nesnesindeki komut dizisine ekleyin. Komutlar, IExtensionstüründe ICommandExtension uzantılarından oluşan bir dizidir.

let embedConfig = {
    ...
    settings: {
        extensions: {
            commands: [...]
        }
    }
};

Yeni komut için commandTriggered olayını da işlemeniz gerekir. Bu olay özellikle commandNameiçin tetikleniyor.

report.on("commandTriggered", function(event) {
    let commandName = event.detail.command;
    ...
    if (commandName === "command name") {
        // Handler code
    }
});

Olayları işleme hakkında daha fazla bilgi için olayları işleme bölümüne bakın.

Simgeler isteğe bağlıdır. Kullanmayı seçerseniz, temel 64'e dönüştürülmelidir. Geçerli bir Temel 64 simgesi örneği için aşağıdaki koda bakın.

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACcFBMVEUAAAAAAAAAAAAAAAA/Pz8zMzMqKiokJCQfHx8cHBwZGRkuLi4qKionJyckJCQiIiIfHx8cHBwoKCgmJiYkJCQiIiIhISEfHx8eHh4nJyclJSUkJCQjIyMiIiIgICAfHx8mJiYlJSUkJCQjIyMhISEgICAfHx8lJSUkJCQiIiIhISElJSUjIyMjIyMiIiIhISEhISElJSUkJCQjIyMiIiIhISEkJCQiIiIhISEkJCQjIyMjIyMiIiIiIiIhISEhISEjIyMjIyMjIyMiIiIiIiIhISEjIyMiIiIhISEkJCQjIyMiIiIiIiIiIiIhISEkJCQjIyMjIyMiIiIiIiIhISEkJCQjIyMjIyMiIiIiIiIiIiIkJCQjIyMjIyMiIiIiIiIiIiIjIyMjIyMjIyMiIiIiIiIiIiIiIiIjIyMjIyMjIyMiIiIiIiIiIiIjIyMjIyMjIyMjIyMiIiIiIiIiIiIiIiIhISEiIiIiIiIjIyMhISEiIiIiIiIiIiIjIyMjIyMjIyMjIyMhISEiIiIiIiIjIyMjIyMiIiIiIiIjIyMjIyMhISEiIiIiIiIjIyMjIyMjIyMjIyMjIyMjIyMhISEhISEiIiIjIyMjIyMhISEiIiIiIiIjIyMjIyMjIyMhISEhISEiIiIjIyMjIyMjIyMhISEhISEiIiIjIyMjIyMjIyMjIyMhISEhISEhISEiIiIjIyMjIyMjIyMhISEhISEhISEiIiIjIyMjIyMjIyMjIyMhISEhISEhISEjIyMjIyMjIyMhISEhISEhISEiIiIjIyMjIyMjIyMhISEhISEhISEhISEjIyMjIyMjIyMjIyNZpHNAAAAAz3RSTlMAAQIDBAUGBwgJCgsMDQ4PEBITFBUWFxgZGhscHR4fICEiIyQmJygpKiwtMDIzNDU2Nzg5Oz0/QkVGR0hJSktMTk9QUVJTVllbXF5fYGFiY2VmZ2hpamtsbm9wcXN0dXd4eXp7fH1+f4CBg4SFhoeIiYqLjI2OkpOUl5mam5ydnp+goaKjpKapqqyusLGys7W2uru9vr/AwsTGx8jJysvNzs/Q0dLU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8fLz9PX29/j5+vv8/f5uCdcaAAADyklEQVQYGe3B+0NTZQAG4NftsKFotUBFY5XiBexehnbTCEtLKaVMrKhhmVciTcuszIiiMivNUrNC0RTE1KC4RyACbrDz/ksxQISxs53z7Zzz/bLnQUJCQkJCLEmedE8yhCR70j1JEDf/xT2H6/0M6Tx3cNuyW6Fb2tPbv6u+whB/3aEPCubBKGVJeSPDqKc2ZUGH7C2nVYZpKHvcCf28u5oZ2YmVLkSV/PzvjKxp523QJ3NfgNr+XueCJvf6BmrzfzwLsaXsCDC62qXQkHuR0flLJiKGJfWM7atURDD1G8b216OIJmkXdWlehHEeaaMeaqkCTdN+oU79RQizIUidjqVBw+w/qd8eB0ZxfkT9zt+BiBY00YgvHBjhrKARjVmI4M4mGrN/AoZNKKcx/3gxztQLNGorhpXSqJpUhHEepXHLMeg5GnfEgbG2U0DXHAyY300BmzHGIpUiKhVAqaKIYA5GcddSzBvABoqpduGGjRTUk+HtpaBijJjRQ1Fln1NU93Rct5vCgkEK24Fhqd2UosuDIW9SEh+G1FKScxj0IKW5FyG7Kc1OhJyhNCcxIE2lNEEPgDxKlAvgLUpUDKCcEn0G4FdKdBzAJUp0AUAbJWoB0EuJegBco0R9AOooUQeAE5SoHsABSnQGwIeU6ACATZToPQCrKVEBgGxKdA8GNFKaqwoGlFGaHxGygtIUI2SaSlmyMKiKkpzHkC2UpARDZvZRCjUTwyooxU+4biGlWI4RlZSgTsGIVZTgFdzgbqXt2lMwSiFt58NoSg1t1jARYyylzQoQ5jBt9YeCMAv6aaccjLOXNvoS46W10jYdMxBBLm2zChHto02+R2RTLtEW/82EhoeDtMMyaHqXNtgLba5KWu7sJEThbaXFOuciqpw+WisPMbxMS5Uipk9ooYMOxOQ6TsucngwdptfTIs1e6DKvjZa4cjd0uq+LFggshm6L/TSd+iwMeCZIs62FIS/RZMUwyEdTbYNhRTRRCQSsp2negZC1Ks2xFYJWqzSDD8Ly+xk3tRBxeLKHcQqsQFwe+pdxufoY4jT3MuPQcj/iln6KwmpmwQRTDlHQUQ9MobxPIZ+6YJYX/DQsWAQTLWymQR1PwFQZJ2nI2UyYbNJ+GlAxGebL76FOgUJYIruaulx+ABZJKacOX98C66zsZAzda2Cp239mVL/NgcUcr12jpsBGBdbLrqSGqrtgC+erXYyg16fALhnfcpwfZsNOT9VyjIt5sFnSujaOaH/dDfvd9HYLB7VvvhlyuPOPdAePrUmBRIobCQkJCQnx+R9iLyo0N1V+hgAAAABJRU5ErkJggg=="

Aşağıdaki kod, menü komut uzantısı eklemeye yönelik tam kod örneğidir.

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

let embedConfiguration = {
    type: 'report',
    id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Aad,
    accessToken: 'e4...rf',
    settings: {
        ...
        extensions: {
            commands: [{
                name: "command name",
                title: "command title",
                icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
                extend: {
                    visualContextMenu: {
                        title: "context menu title",
                    },
                    visualOptionsMenu: {
                        title: "options menu title",
                    }
                }
            }]
        }
    }
};

...

// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfiguration);

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

Komutlar varsayılan olarak menünün en altına eklenir. Gruplandırılmamış komutlar için, menuLocation özelliğini kullanarak menünün en üstüne veya altına bir komut yerleştirilip yerleştirilmeyeceğini seçebilirsiniz.

Not

Menünün en üstüne birden fazla uzantı eklerken eklenen son uzantı en üstte olur.

Örneğin, aşağıdaki kod menünün en üstündeki seçenekler menüsü komut uzantısını ve menünün altındaki bağlam menüsü komutunu ayarlamanıza olanak tanır.

extensions: {
    commands: [{
       name: "command name",
       title: "command title",
       icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
       extend:
       {
           visualContextMenu: {
               title: "context menu title",
               menuLocation: models.MenuLocation.Bottom
           },
           visualOptionsMenu: {
               title: "options menu title",
               menuLocation: models.MenuLocation.Top
           }
       }
    }]
}

Alt menüdeki komutları gruplandırma

Komutları aşağıdaki parametrelerle gruplandırmak için bir alt menü oluşturabilirsiniz:

adı - Grup adı. Bu, grup benzersiz tanımlayıcısıdır.
başlık - Menüde gösterilecek başlık.
menüYükle(isteğe bağlı) - Grubun menünün en üstüne mi yoksa altına mı yerleştirileceğini seçin.

Grup tanımı, uzantılar nesnesinin içinde IMenuGroupExtensiondizisi olan gruplar dizisine eklenmelidir.

Menü konumu değeri kullanmayı seçerseniz, Top grubun ilk komutunu eklerken grubu menünün en üstüne yerleştirir. Kullanılmamışsa veya Bottom değeri kullanılırken grup, grubun ilk komutunun eklendiği sırada menünün en altına eklenir.

Grup dizisinde tanımlanmış bir gruba komut eklemek için komutuna groupName özelliğini ekleyin.

Aşağıdaki kod, içinde iki komut bulunan seçenekler menüsüne nasıl alt menü ekleneceğini gösteren tam kod örneğidir.

extensions: {
    commands: [
        {
            name: "Command 1",
            title: "Command 1",
            extend: {
                visualOptionsMenu: {
                    groupName: "group-unique-identifier"
                }
            }
        },
        {
            name: "Command 2",
            title: "Command 2",
            extend: {
                visualOptionsMenu: {
                    groupName: "group-unique-identifier"
                }
            }
        }
    ],
    groups: [{
        name: "group-unique-identifier",
        title: "Group title",
        menuLocation: models.MenuLocation.Top
    }]
}

Yerleşik komutların görüntüsü üç görüntüleme moduna sahiptir.

Etkin - Görsel için kullanılabiliyorsa komut görüntülenir.
Devre Dışı - Komut, görsel için kullanılabiliyorsa ancak gri görünüyorsa (kullanıcı komutu seçemiyorsa) görüntülenir.
gizli - komut görünmez.

Şu anda kullanılabilir olan yerleşik komutlar şunlardır:

kopyala - Değeri, seçimi veya görseli kopyalayın. Yalnızca bağlam menüsü altında kullanılabilir (görsel yalnızca düzenleme modunda kullanılabilir).
detay -detay modunu kullanın. Yalnızca bağlam menüsünün altında kullanılabilir.
detaylandırma - detaylandırma özelliğini kullanın. Yalnızca bağlam menüsünün altında kullanılabilir.
expandCollapse - Seçimi, tüm düzeyi veya hiyerarşinin tamamını genişletin veya daraltma. Yalnızca bağlam menüsünün altında kullanılabilir.
exportData - Görselleştirme oluşturmak için kullanılan verileri dışarı aktarın. Yalnızca seçenekler menüsünün altında kullanılabilir.
includeExclude - Veri noktalarını dahil edin veya hariç tutun. Yalnızca bağlam menüsünün altında kullanılabilir.
visual kaldırma - Görseli silin. Yalnızca düzenleme modundaki seçenekler menüsünün altında kullanılabilir.
arama - Dilimleyici arama seçeneğini değiştirin. Yalnızca düzenleme modunda kullanılabilir.
bkz.Data - Görselleştirme oluşturmak için kullanılan verileri görüntüleme (Tablo olarak gösterolarak da bilinir).
sıralama - Değerlerin sıralama düzenini seçili veri alanına göre sıralayın ve seçin. Yalnızca seçenekler menüsünün altında kullanılabilir.
öne çıkarma - Görseli öne çıkarma. Yalnızca seçenekler menüsünün altında kullanılabilir.
içgörülerAnalysis - Görsel hakkındaki içgörüleri görüntüleyin. Yalnızca seçenekler menüsünde kullanılabilir.
addComment - Görsele açıklama ekleyin. Yalnızca seçenekler menüsünde kullanılabilir.
groupVisualContainers - Düzenleme modunda yalnızca bağlam menüsü altında kullanılabilir.
özetleme - Görselleştirmenin özetini görüntüleyin. Yalnızca bağlam menüsünün altında kullanılabilir.
clearSelection - Yalnızca bağlam menüsünün altında kullanılabilir.
visualCalculation -- Görsel Hesaplama Düzenleme Modu'na girmek için giriş noktası (DAX şablonlarıyla).

Yerleşik komutların görüntülenmesini özelleştirmek için ekleme yapılandırma ayarlarında bir komut nesnesi tanımlayın ve geçirin. Komutlar, ICommandsSettingsdizisidir.

let embedConfig = {
    ...
    settings: {
        commands: [...]
    }
};

Aşağıdaki kod, yerleşik komutları eklemeye yönelik tam kod örneğidir.

// The new settings that you want to apply to the report.
const newSettings = {
    commands: [
        {
            spotlight: {
                displayOption: models.CommandDisplayOption.Hidden,
            },
            drill: {
                displayOption: models.CommandDisplayOption.Disabled,
            }
        }
    ]
};

// Update the settings by passing in the new settings you have configured.
await report.updateSettings(newSettings);

Rapor ayarlarını yapılandırma
Olayları işleme
sayfaları ve görselleri alma

Last updated on 2025-03-17

Aracılığıyla paylaş

Rapor görseli için menü komutlarını değiştirme

Menü komutlarını değiştirme

Menü komutlarını genişlet

Menü öğesi konumunu ayarlama

Alt menüdeki komutları gruplandırma

Menü komutlarını özelleştir

İlgili içerik

Ek kaynaklar