Δημιουργία διεύθυνσης URL εκκίνησης

Μια διεύθυνση URL εκκίνησης σάς επιτρέπει να ανοίξετε μια νέα καρτέλα προγράμματος περιήγησης ή παράθυρο προσθέτοντας την host.launchUrl() κλήση API στον κώδικα μιας απεικόνισης Power BI.

Σημείωμα

Η host.launchUrl() μέθοδος παρουσιάστηκε στο API απεικονίσεων 1.9.0.

Δείγμα

Εισαγάγετε τη IVisualHost διασύνδεση και αποθηκεύστε τη σύνδεση στο host αντικείμενο στην κατασκευή της απεικόνισης.

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;
        // ...
    }

    // ...
}

Χρήση

Χρησιμοποιήστε την host.launchUrl() κλήση API και διαβιβάστε τη διεύθυνση URL προορισμού ως όρισμα συμβολοσειράς:

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

Βέλτιστες πρακτικές

• Συνήθως, είναι προτιμότερο να ανοίγετε μια σύνδεση μόνο ως απόκριση στη ρητή ενέργεια ενός χρήστη. Διευκολύνετε τον χρήστη να κατανοήσει ότι κάνοντας κλικ στη σύνδεση ή στο κουμπί έχει ως αποτέλεσμα το άνοιγμα μιας νέας καρτέλας. Μπορεί να προκαλέσει σύγχυση ή εκνευριστικό για τον χρήστη εάν μια launchUrl() κλήση ενεργοποιείται χωρίς ενέργεια χρήστη ή ως παρενέργεια μιας διαφορετικής ενέργειας.

• Εάν η σύνδεση δεν είναι απαραίτητη για τη σωστή λειτουργία της απεικόνισης, συνιστούμε να παρέχετε στον συντάκτη της αναφοράς έναν τρόπο απενεργοποίησης και απόκρυψης της σύνδεσης. Ειδικές περιπτώσεις χρήσης του Power BI, όπως η ενσωμάτωση μιας αναφοράς σε μια εφαρμογή άλλου κατασκευαστή ή η δημοσίευσή της στο web, ενδέχεται να απαιτούν απενεργοποίηση και απόκρυψη της σύνδεσης.

• Αποφύγετε την ενεργοποίηση μιας launchUrl() κλήσης μέσα από έναν βρόχο, τη συνάρτηση της update απεικόνισης ή οποιονδήποτε άλλο συχνά επαναλαμβανόμενο κώδικα.

Ένα αναλυτικό παράδειγμα

Προσθήκη στοιχείου εκκίνησης σύνδεσης

Προσθέστε τις ακόλουθες γραμμές στη συνάρτηση της απεικόνισης constructor :

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

Προσθέστε μια ιδιωτική συνάρτηση που δημιουργεί και επισυνάπτει το στοιχείο αγκύρωσης:

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 :

.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;
    }
}

Προσθήκη μηχανισμού εναλλαγής

Για να προσθέσετε έναν μηχανισμό εναλλαγής, πρέπει να προσθέσετε ένα στατικό αντικείμενο, έτσι ώστε ο συντάκτης της αναφοράς να μπορεί να εναλλάσσει την ορατότητα του στοιχείου σύνδεσης. (Η προεπιλογή ορίζεται σε κρυφό.) Για περισσότερες πληροφορίες, ανατρέξτε στο θέμα Εκμάθηση στατικών αντικειμένων.

Προσθέστε το showHelpLink στατικό αντικείμενο δυαδικής τιμής στην καταχώρηση αντικειμένων του αρχείου capabilities.json :

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

Προσθέστε τις ακόλουθες γραμμές στη συνάρτηση της απεικόνισης update :

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

Η κλάση κρυφό ορίζεται στο αρχείο visual.less για τον έλεγχο της εμφάνισης του στοιχείου.

Ζητήματα προς εξέταση και περιορισμοί

• Χρησιμοποιήστε μόνο απόλυτες διαδρομές, όχι σχετικές διαδρομές. Για παράδειγμα, χρησιμοποιήστε μια απόλυτη διαδρομή όπως https://some.link.net/subfolder/page.html. Η σχετική διαδρομή/page.html, δεν θα ανοίξει.

• Προς το παρόν, υποστηρίζονται μόνο τα πρωτόκολλα HTTP και HTTPS . Αποφύγετε τα πρωτόκολλα FTP, MAILTO και άλλα πρωτόκολλα.