Başlatma URL'si oluşturma

Başlatma URL'si oluşturarak, API çağrısını Power BI görselinin host.launchUrl() koduna ekleyerek yeni bir tarayıcı sekmesi veya penceresi açabilirsiniz.

Önemli

host.launchUrl() Yöntemi Visuals API 1.9.0'da kullanıma sunulmuştur.

Örnek

Arabirimi içeri aktarın IVisualHost ve görselin host oluşturucusunda nesnenin bağlantısını kaydedin.

import powerbi from "powerbi-visuals-api";
import IVisualHost = powerbi.extensibility.visual.IVisualHost;

export class Visual implements IVisual {
    private host: IVisualHost;
    // ...
    constructor(options: VisualConstructorOptions) {
        // ...
        this.host = options.host;
        // ...
    }

    // ...
}

Kullanım

API çağrısını host.launchUrl() kullanın ve hedef URL'nizi dize bağımsız değişkeni olarak geçirin:

this.host.launchUrl('https://some.link.net');

Kısıtlamalar

• Göreli yolları değil, yalnızca mutlak yolları kullanın. Örneğin, gibi https://some.link.net/subfolder/page.htmlmutlak bir yol kullanın. Göreli yol/page.html açılmıyor.

• Şu anda yalnızca HTTP ve HTTPS protokolleri desteklenmektedir. FTP, MAILTO ve diğer protokollerden kaçının.

En iyi yöntemler

• Genellikle, bir bağlantıyı yalnızca kullanıcının açık eylemine yanıt olarak açmak en iyisidir. Kullanıcının bağlantıya veya düğmeye tıklamanın yeni bir sekme açılmasına neden olduğunu anlamasını kolaylaştırın. Bir çağrı kullanıcının eylemi olmadan veya farklı bir launchUrl() eylemin yan etkisi olarak tetikleniyorsa, kullanıcı için kafa karıştırıcı veya sinir bozucu olabilir.

• Görselin düzgün çalışması için bağlantı gerekli değilse, raporun yazarına bağlantıyı devre dışı bırakması ve gizlemesi için bir yol vermenizi öneririz. Bir raporu üçüncü taraf bir uygulamaya eklemek veya web'de yayımlamak gibi özel Power BI kullanım örnekleri, bağlantıyı devre dışı bırakmayı ve gizlemeyi gerektirebilir.

• Döngünün içinden, görselin update işlevinden veya diğer sık yinelenen kodlardan bir çağrı tetiklemekten launchUrl() kaçının.

Adım adım bir örnek

Bağlantı başlatma öğesi ekleme

Görselin constructor işlevine aşağıdaki satırları ekleyin:

    this.helpLinkElement = this.createHelpLinkElement();
    options.element.appendChild(this.helpLinkElement);

Anchor öğesini oluşturan ve ekleyen özel bir işlev ekleyin:

private createHelpLinkElement(): Element {
    let linkElement = document.createElement("a");
    linkElement.textContent = "?";
    linkElement.setAttribute("title", "Open documentation");
    linkElement.setAttribute("class", "helpLink");
    linkElement.addEventListener("click", () => {
        this.host.launchUrl("https://learn.microsoft.com/power-bi/developer/visuals/custom-visual-develop-tutorial");
    });
    return linkElement;
};

Visual.less dosyasında bir girdi ile bağlantı öğesinin stilini tanımlayın:

.helpLink {
    position: absolute;
    top: 0px;
    right: 12px;
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #80B0E0;
    border-radius: 20px;
    color: #80B0E0;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    background-color: #FFFFFF;
    transition: all 900ms ease;

    &:hover {
        background-color: #DDEEFF;
        color: #5080B0;
        border-color: #5080B0;
        transition: all 250ms ease;
    }

    &.hidden {
        display: none;
    }
}

Geçiş mekanizması ekleme

Bir geçiş mekanizması eklemek için, raporun yazarının bağlantı öğesinin görünürlüğünü değiştirebilmesi için statik bir nesne eklemeniz gerekir. (Varsayılan değer gizli olarak ayarlanır.) Daha fazla bilgi için statik nesne öğreticisine bakın.

showHelpLink Boole statik nesnesini capabilities.json dosyasının objects girdisine ekleyin:

"objects": {
    "generalView": {
            "displayName": "General View",
            "properties":
                "showHelpLink": {
                    "displayName": "Show Help Button",
                    "type": {
                        "bool": true
                    }
                }
            }
        }
    }

Görselin update işlevine aşağıdaki satırları ekleyin:

if (settings.generalView.showHelpLink) {
    this.helpLinkElement.classList.remove("hidden");
} else {
    this.helpLinkElement.classList.add("hidden");
}

Gizli sınıf, öğesinin görüntülenmesini denetlemek için visual.less dosyasında tanımlanır.