Valintaikkunan luominen Power BI -visualisoinnille
Joskus visualisointia luodessasi on hyödyllistä näyttää asiakkaalle lisätietoja erillisessä ikkunassa. Saatat esimerkiksi haluta:
- Näytä lisätietoja , kuten tekstihuomautus tai video
- Näytä syötetietojen valintaikkuna – esimerkiksi päivämäärä -valintaikkuna
Näitä tarkoituksia varten voit luoda valintaikkunan ponnahdusikkunan, jota kutsutaan valintaikkunaksi tässä artikkelissa.
Valintaikkunan huomioitavat seikat
Kun luot valintaikkunan visualisoinnille, muista, että:
- Voit kehityksen aikana määrittää valintaikkunan koon ja sijainnin.
- Kun valintaikkuna käynnistyy, raportin tausta näkyy harmaana.
- Valintaikkunan otsikko sisältää visualisoinnin kuvakkeen ja sen näyttönimen otsikkona.
- Valintaikkunassa voi olla enintään kolme toimintopainiketta. Voit valita, mitkä painikkeet näytetään tietystä valinnasta.
- Valintaikkunassa on käytössä monipuolinen HTML
iframe. - Kun valintaikkuna on näkyvissä, raportissa ei voi suorittaa mitään toimia, ennen kuin se hylätään.
- Valintaikkunakoodi voi käyttää ulkoisia npm-kirjastoja samalla tavalla kuin visualisointia.
Tärkeä
Valintaikkunaa ei pidä käynnistää spontaanisti. Sen pitäisi olla käyttäjän toiminnon välitön tulos.
Valintaikkunan suunnitteleminen visualisoinnille
Jos haluat määrittää valintaikkunan, sinun on lisättävä koodiin kaksi osaa:
- Toteutustiedosto – Paras käytäntö on luoda toteutustiedosto kullekin valintaikkunalle.
- Valintaikkunan käynnistävä koodi: jos haluat käynnistää valintaikkunan, lisää koodi tiedostoon
visual.ts.
Valintaikkunan toteutustiedoston luominen
Suosittelemme luomaan toteutustiedoston jokaiselle luomalle valintaikkunalle. Sijoita valintaikkunatiedostot kansioon src :
Kunkin valintaikkunan toteutustiedoston tulee sisältää seuraavat osat:
Valintaikkunaluokan luominen
Luo valintaikkunan valintaikkunan luokka. initialState Parametri openModalDialog välitetään dialogin alihankkijalle sen luomisen yhteydessä. -objektin initialState avulla voit välittää parametreja valintaikkunaan, jotta voit vaikuttaa sen toimintaan tai ulkoasuun.
Valintaikkunakoodi voi käyttää seuraavia IDialogHost menetelmiä:
IDialogHost.setResult(result:object)– Valintaikkunakoodi palauttaa tulosobjektin, joka on siirretty takaisin sen kutsuvan visualisoinnin.IDialogHost.close(actionId: DialogAction, result?:object)- Valintaikkunakoodi voi ohjelmallisesti sulkea valintaikkunan ja antaa tulosobjektin takaisin kutsuvan visualisoinnin pariin.
Tuonti tiedoston päälle:
import powerbi from "powerbi-visuals-api";
import DialogConstructorOptions = powerbi.extensibility.visual.DialogConstructorOptions;
import DialogAction = powerbi.DialogAction;
// React imports as an example
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import reactDatepicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
Tämä esimerkki edellyttää näiden pakettien asentamista:
npm i react-dom react react-datepicker
Luokan realisointi:
export class DatePickerDialog {
static id = "DatePickerDialog";
constructor(options: DialogConstructorOptions, initialState: object) {
const host = options.host;
let pickedDate: Date;
const startDate = new Date(initialState['startDate']);
// Dialog rendering implementation
ReactDOM.render(
React.createElement(
reactDatepicker,
{
inline: true,
openToDate: startDate,
onChange: (date: Date) => {
pickedDate = date
host.setResult({ date: pickedDate })
}
},
null),
options.element
);
document.addEventListener('keydown', e => {
if (e.code == 'Enter' && pickedDate) {
host.close(DialogAction.Close, {date: pickedDate});
}
});
}
}
Luo tulosluokka
Luo luokka, joka palauttaa valintaikkunan tuloksen, ja lisää se sitten valintaikkunan toteutustiedostoon.
Alla olevassa esimerkissä DatePickerDialogResult luokka palauttaa päivämäärämerkkijonon.
export class DatePickerDialogResult {
date: string;
}
Valintaikkunan lisääminen rekisteriluetteloon
Jokaisen valintaikkunan toteutustiedoston täytyy sisältää rekisteriviittaus. Lisää alla olevan esimerkin kaksi riviä valintaikkunan toteutustiedoston loppuun. Ensimmäisen rivin on oltava samanlainen jokaisessa valintaikkunan toteutustiedostossa. Valintaikkuna näkyy toisella rivillä. muokata sitä valintaikkunaluokan nimen mukaan.
globalThis.dialogRegistry = globalThis.dialogRegistry || {};
globalThis.dialogRegistry[DatePickerDialog.id] = DatePickerDialog;
Valintaikkunan käynnistäminen
Ennen kuin luot valintaikkunan, sinun on päätettävä, mitkä painikkeet se sisältää. Power BI -visualisoinnit tukevat seuraavia kuutta valintaikkunapainiketta:
export enum DialogAction {
Close = 0,
OK = 1,
Cancel = 2,
Continue = 3,
No = 4,
Yes = 5
}
Jokainen luomasi valintaikkuna on tavattava -tiedostossa visual.ts . Tässä esimerkissä valintaikkuna on määritetty kahdella toimintopainikkeella.
import powerbi from "powerbi-visuals-api";
import DialogAction = powerbi.DialogAction;
const dialogActionsButtons = [DialogAction.OK, DialogAction.Cancel];
Tässä esimerkissä valintaikkuna käynnistetään napsauttamalla visualisointipainiketta. Visualisointipainike on määritetty osana tiedoston visuaalista konstruktoria visual.ts .
Valintaikkunan koon ja sijainnin määrittäminen
Ohjelmointirajapinnan versiosta 4.0 tai uudemmasta versiosta voit määrittää valintaikkunan koon ja sijainnin käyttämällä - DialogOpenOptions parametria openModalDialog. Jos haluat tietää, mitä versiota käytät, tarkista apiVersion pbiviz.json .
export interface RectSize {
width: number;
height: number;
}
export interface DialogOpenOptions {
title: string;
size?: RectSize;
position?: VisualDialogPosition;
actionButtons: DialogAction[];
}
Sijainti-parametrin avulla voit päättää, missä valintaikkunan pitäisi avautua näytössä. Voit halutessasi avata valintaikkunan näytön keskellä tai voit määrittää eri sijainnin suhteessa visualisointiin.
const enum VisualDialogPositionType {
Center = 0,
RelativeToVisual = 1
}
export interface VisualDialogPosition {
type: VisualDialogPositionType;
left?: number;
top?: number;
}
- Jos tyyppiä ei ole määritetty, oletustoiminta on avata valintaikkuna keskellä.
- Sijainti annetaan kuvapisteinä suhteessa visualisoinnin vasempaan yläkulmaan.
Tässä esimerkissä näytetään 250 x 300 kuvapisteen päivämäärän valintavalintaikkuna, jossa on 100 kuvapistettä vasemmalla ja 30 kuvapistettä visualisoinnin yläreunan alapuolella:
export class Visual implements IVisual {
private target: HTMLElement;
private host: IVisualHost;
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.target = options.element;
const dialogActionsButtons = [DialogAction.OK, DialogAction.Cancel];
const sectionDiv = document.createElement("div");
const span = document.createElement("span");
span.id = "datePicker";
let button = document.createElement("button");
button.id = "DateButton";
button.innerText = "Date";
button.onclick = (event) => {
const initialDialogState = { startDate: new Date() };
const position = {
type: VisualDialogPositionType.RelativeToVisual,
left: 100,
top: 30
};
const size = {width: 250, height: 300};
const dialogOptions = {
actionButtons: dialogActionsButtons,
size: size,
position: position,
title: "Select a date"
};
this.host.openModalDialog(DatePickerDialog.id, dialogOptions, initialDialogState).
then(ret => this.handleDialogResult(ret, span)).
catch(error => this.handleDialogError(error, span));
}
sectionDiv.appendChild(button);
sectionDiv.appendChild(span);
this.target.appendChild(sectionDiv)
}
// Custom logic to handle dialog results
private handleDialogResult( result: ModalDialogResult, targetElement: HTMLElement){
if ( result.actionId === DialogAction.OK || result.actionId === DialogAction.Close) {
const resultState = <DatePickerDialogResult> result.resultState;
const selectedDate = new Date(resultState.date);
targetElement.textContent = selectedDate.toDateString();
}
}
// Custom logic to handle errors in dialog
private handleDialogError( error: any, targetElement: HTMLElement ) {
targetElement.textContent = "Error: " + JSON.stringify(error);
}
}
Valintaikkunan sulkemisen määrittäminen
Ensisijainen menetelmä valintaikkunan sulkemiseen on se, että käyttäjä napsauttaa [x]-painiketta, jotakin toimintopainiketta tai raportin taustaa.
Voit myös ohjelmoida valintaikkunan sulkeutumaan automaattisesti kutsumalla IDialogHost sulkemismenetelmää. Tämä menetelmä on estetty viiden sekunnin ajan valintaikkunan avaamisen jälkeen, joten aikaisin kun voit sulkea valintaikkunan automaattisesti, on viisi sekuntia sen aloittamisesta.
Älä näytä valintaikkunaa
Näyttöön tulee valintaikkuna, jossa on valintaruutu, jonka avulla käyttäjä voi estää valintaikkunoita.
Tämä valintaruutu on tietoturvaominaisuus, joka estää visualisointia luomasta modaalisia valintaikkunoita (joko tarkoituksella tai ilman käyttäjän suostumusta).
Tämä esto on käytössä vain nykyisessä istunnossa. Jos siis käyttäjä estää CV-modaaliset valintaikkunat, mutta muuttaa myöhemmin mieltään, hän voi ottaa valintaikkunat uudelleen käyttöön. Tämän tekemiseksi heidän on aloitettava uusi istunto (päivitettävä Power BI -palvelun raporttisivu tai käynnistettävä Power BI Desktop uudelleen).
Huomioitavat asiat ja rajoitukset
Alkaen powerbi-visuals-API 3.8:sta valintaikkunakuvake ja otsikko määritetään visualisoinnin kuvakkeella ja näyttönimellä, eikä niitä voi muuttaa.
Valintaikkunan kokorajoitukset on kuvattu alla olevassa taulukossa.
Suurin/pienin Leveys Korkeus Enintään 90 % selaimen leveydestä 90 % selaimen korkeudesta Vähintään 240 kuvapistettä 210 kuvapistettä Kun määrität valintaikkunan sijainnin, vaakasuuntainen sijainti voi olla positiivinen tai negatiivinen kokonaisluku sen mukaan, kummalla visualisoinnin puolella haluat ruudun olevan. Pystysijainti ei voi olla negatiivinen, koska se asettaa sen visualisoinnin yläpuolelle.
Seuraavat ominaisuudet eivät tue Power BI -visualisoinnit -valintaikkunaa:
- Upotettu analytiikka
- Julkaise verkossa
- Raporttinäkymät
Voit ohjelmoida visualisoinnin tunnistamaan, salliiko nykyinen ympäristö valintaikkunan avaamisen, valitsemalla totuusarvon this.host.hostCapabilities.allowModalDialog.