K úpravě vestavěných vizuálů v Power BI Desktop nás Microsoft nepustí (když nepočítáme JSON soubor a volbu Switch Theme v PBID) a zároveň se může stát, že nám stávající možnosti aplikace ani „custom visuals“ z webu store.office.com (odkaz ke stažení Power BI vlastních vizuálů) prostě nestačí. Buď tedy můžeme vytvořit zcela nový vizuál nebo upravit někým vytvořený.
Vizuály jsou psány v TypeScriptu a pro jejich úpravy potřebujeme mít znalosti již zmíněného TypeScriptu a HTML (samozřejmě také Power BI).
Následující postup by měl usnadnit práci, doporučuji první celé přečíst a teprve pak postupovat step-by-step:
1. nainstalujeme NodeJS: https://nodejs.org/en/download/
2. následuje ve Windows PowerShell konzoli příkaz: npm install -g powerbi-visuals-tools
3. zkontrolujeme, zda je instalace OK zadáním příkazu: pbiviz
4. dalším krokem je instalace certifikátu přes příkaz: pbiviz –install-cert
Pozor na správné umístění certifikátu! Umístit do Trusted Root Certification Authorities.
5. stáhneme libovolný existující vizuál z: https://github.com/NazevAutora/NazevVizualu
Spousta z nich jsou Microsoftí, i ten vzorový: https://github.com/Microsoft/PowerBI-visuals-sampleBarChart
Pokud vizuál na GitHub nemůžeme najít, tak funguje možnost stáhnout ho jako PBIVIZ soubor ze store.office.com (sekce Power BI) a otevřít jako ZIP balíček. Zde v resources otevřít soubor ve stylu: PBI_CV_886A053E_9DFD_4EA0_A47D_CCAEB89AF969.pbiviz.json
Následuje spousta informací a také odkaz na GitHub, kde můžeme vizuál stáhnout (většina má licenci MIT):
6. Stažený ZIP soubor z GitHub rozbalíme a adresář umístíme do příslušné složky. Velmi doporučuji mít v tom pořádek!
7. Struktura konkrétní složky vizuálu bude dost pravděpodobně vypadat následujícím způsobem:
- tsconfig.json – co a kde má hledat a spouštět (Typescript compiler settings)
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html - pbiviz.json – víceméně cesty, názvy, kontakt na autora atd. (Main configuration file, potřebuje PowerShell)
- package.json – informace pro npm
- style\visual.less – Less style, který definuje velikost písma, barvu, atd. (Less styles for your visual)
- capabilities.json – schopnosti vizuálu, ale ne jak bude vypadat! (Used to define the capabilities of your visual)
https://github.com/Microsoft/PowerBI-visuals/blob/master/Capabilities/Capabilities.md - src\Visual.ts – TypeScript kód, který definuje podobu! (Typescript code for your visual)
https://github.com/Microsoft/PowerBI-visuals-sampleBarChart/tree/master/Tutorial
8. Jakmile máme vizuál upraven, tak v PowerShell upravíme cestu (CD nebo CD..), protože je důležité aby PS našel package.json, který je v kořenovém adresáři staženého klonu!
9. Následuje instalace příkazem: npm install
10. Pokud chceme jednotlivé úpravy okamžitě testovat v Office 365, tak musíme první Nastavení\ Obecné\ Vývojář\ Povolit vizuál vývojáře pro testování
11. Následuje ideálně v dalším PowerShell okně spuštění serveru příkazem: pbiviz start
12. Po startu je třeba povolit přístup (Office 365)
13. Následně otevřeme v editačním režimu nějakou sestavu v Power BI Services a vizuál vývojáře je k dispozici
14. Jakmile jsou naše úpravy hotové, tak uděláme *.pbiviz soubor.
V PowerShell musíme mít nastavenou cestu k pbiviz.json a dát příkaz: pbiviz package
15. Hotový soubor najdeme v podadresáři dist\NazevVizualu
16. Když budeme chtít úplně nový vizuál, tak v PowerShell: pbiviz new MujVizual
Vygeneruje se adresář se všemi potřebnými soubory a můžeme vesele doupravit a opět testovat buď na webu
nebo přes vytvořené PBIVIZ soubory, které přidáme do PBID aplikace.
Dokumentace k IVizual.
Podrobnější dokumentace k IVizual.
Jeden podrobný návod na tvorbu vlastního vizuálu.
Na co si dát pozor při tvorbě shrnuje článek jednoho z tvůrců na community.powerbi.com.