Power BI Custom Visuals' Community
Welcome to Power BI Custom Visuals Community! Power BI custom visuals is all about community. We are very excited to announce that custom visuals now have a special place in the Power BI community site, to share knowledge, ideas and news! Custom visuals development discussion – Ask questions and share knowledge about developing custom visuals. Custom visuals ideas – Share your ideas, ask for features, propose new custom visuals. Custom visuals community blog – Community news and announcements for new custom visuals available, new APIs released, tips & tricks from developers and users. Power BI custom visuals useful links for developers Developer documents - find here all documents you need Step-by-step tutorial Looking for advanced tutorial? Find it here Visit also our github Find here Power BI visuals' Samples Custom visual's webinar For technichal questions and help please reach out [email protected]Timeline Storyteller custom visual not working
Hi, I'm not sure exactly where to post this but I'm sure someone will correct me if necessary 🙂 I'm not sure if it's been reported here previously (doesn't seem to be) but the Timeline Storyteller custom visual for Power BI appears to have broken with a recent PBI update.. there is a growing list of complaint feedback on the MS AppSource page (link below), but it appears the developer (which says it's Microsoft) hasn't acknowledged this so far? The negative reviews seems to begin around the end of last month (July 2020). https://appsource.microsoft.com/en-au/product/power-bi-visuals/WA104381136?tab=Reviews# Just trying to find a way to bring this to someone's attention if possible, as obviously people are trying to use it (including myself) with no luck. Hoping some action can be taken. Cheers, GregpersistProperties
Hi I am new to custom visual development and therefore this query. I have developed a simple custom slicer that, as expected, filters data based on checkbox selections. I am saving the selection state using persistProperties method but on saving the report or reloading, I lose the saved state and instead the last saved state is loaded. What might I be doing wrong here? The state persistence works fine as long as I am navigating within the report. Any pointers on implementing persistProperties and why I am losing the state on save, would be appreciated.Tooltip appearing in top left corner of browser when a field is added
Tooltips in custom visuals are appearing at the top left corner of the browser window in Power BI Online (screen position 0,0). This bug began around April 20, 2020. I thought this might be a bug in my custom visual or a bug caused by conflicting libraries so I tried to test using a newly created, basic visual. This bug occurs in the update counter visual that is created by default in a new visual which is attached with minor changes to show the tooltip on mouse down. This bug appears when a field is added to a category and disappears when the visual is updated either through a selection in a different visual in the report or by changing options in the formatting pane or adding a measure. The bug reappears if the field is removed and a field is added again. In reports with multiple data roles, the issue reappears when all fields are removed from the visuals and fields are added back in again. "use strict"; import "core-js/stable"; import "./../style/visual.less"; import powerbi from "powerbi-visuals-api"; import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import IVisual = powerbi.extensibility.visual.IVisual; import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions; import VisualObjectInstance = powerbi.VisualObjectInstance; import DataView = powerbi.DataView; import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject; import TooltipShowOptions = powerbi.extensibility.TooltipShowOptions; import VisualUpdateType = powerbi.VisualUpdateType; import IViewport = powerbi.IViewport; import { VisualSettings } from "./settings"; export class Visual implements IVisual { private target: HTMLElement; private updateCount: number; private settings: VisualSettings; private textNode: Text; host: powerbi.extensibility.visual.IVisualHost; element: HTMLElement; updateOptions: VisualUpdateOptions; constructor(options: VisualConstructorOptions) { console.log('Visual constructor', options); this.target = options.element; this.updateCount = 0; this.host = options.host; if (document) { const new_p: HTMLElement = document.createElement("p"); new_p.appendChild(document.createTextNode("Update count:")); const new_em: HTMLElement = document.createElement("em"); this.textNode = document.createTextNode(this.updateCount.toString()); new_em.appendChild(this.textNode); new_p.appendChild(new_em); this.target.appendChild(new_p); this.target.onmousedown = ((event) => { var category = this.updateOptions.dataViews[0].categorical.categories[0]; let selectionId = this.host.createSelectionIdBuilder() .withCategory(category, 0) .createSelectionId().getKey(); let ttip: TooltipShowOptions = { dataItems: [ { displayName: "Update Count", value: "" + this.updateCount } ], identities: [selectionId], coordinates: [100, 100], isTouchEvent: false }; this.host.tooltipService.show(ttip); }) this.target.onmouseup = ((event) => { this.host.tooltipService.hide({ immediately: false, isTouchEvent: false }); } ) } } public update(options: VisualUpdateOptions) { this.updateCount++; this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]); if (this.textNode) { this.textNode.textContent = (this.updateCount).toString(); } this.updateOptions = options; } private static parseSettings(dataView: DataView): VisualSettings { return <VisualSettings>VisualSettings.parse(dataView); } public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject { return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options); } }Cannot import multiple r-script sources in RHTML visual
I'm unable to import multiple r-script source files in RHTML visuals. Power BI and R seem to import the first file referenced, but any subsequent source(./r_files/foo.r) calls appear to be ignored. This behavior is not getting repeated in RStudio using the same instance of R. Any guidance would be appreciated. Steps to reproduce: 1) Create new visual using the RHTML template and create a new .r file in the r_files directory: > pbiviz new sampleRHTMLVisual -t rhtml > cd sampleRHTMLVisual > echo $null >> .\r_files\test.r 2) Flesh out required information in pbiviz.json: visual:description visual:supportUrl visual:author:name visual:author:email 3) Insert the following code as the first line in script.r: source('./r_files/test.r') 4) Compile and load the visual: > pbiviz package 5) Observe the error message: Can't display this visual. R script error. Error in libraryRequiredInstall("ggplot2"): could not find function "libraryRequireInstall" Execution halted
How can I perform a web request with Authentication headers from a React based custom Visual?
I'm making a React Based custom visual that is inteded to work with my connector, I have a table with URLs where each URL points to an image, you can request that image but the request needs to contain an authorization header, something like this in my React component: try { const response = await fetch(url, { method: "GET", headers: { "Authorization": AUTH_TOKEN } }); At this moment, the token is hardcoded const AUTH_TOKEN = "Bearer eyJ...", my idea is to validate that I can load the images with this aproach, then I would figure it out how to generate or pass this token. But I'm noticing that if I pass the headers, the request is not performed (If the headers are not passed, I can get the images from public sources, for example wikipedia images, but I need to be authenticated to get the images from the desired server) But for my specific case (where the request needs to be authenticated, I'm getting an error): Looking in the Edge console I'm getting: https://upload.wikimedia.org/wikipedia/commons/1/17/Amblyglyphidodon_aureus001.jpg' from origin 'null' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response. component.tsx:59 GET https://upload.wikimedia.org/wikipedia/commons/1/17/Amblyglyphidodon_aureus001.jpg net::ERR_FAILED I'm getting the same message from the URL of my server. So, I'm assuming the request is being blocked by Power BI, is there a way to pass the headers in the request?
Funnel chart – how to display more than one value?
ENG Hi everyone, When using the native Power BI funnel visual, we typically add the category (e.g., stages of a sales funnel) and a measure in the values field. However, I often need to display more than one value, such as the number of opportunities at each stage and the average ticket value for those opportunities. I know it’s possible to add the average ticket to the tooltip, but users often want to see both numbers directly on the visual without hovering. In horizontal bar charts, we can customize the data label to show the value and series detail, as well as adjust label positioning. I’ve tried various funnel visuals, but I would like the native funnel chart to offer more flexibility in customization, similar to other visuals that have evolved over time. Does anyone have a tip or workaround for this? If not, I’d like to submit this as a feature request. Thanks! PT Olá, pessoal, Ao trabalhar com o visual de funil nativo do Power BI, adicionamos a categoria (por exemplo, etapas do funil de vendas) e a métrica em valores. No entanto, muitas vezes preciso mostrar mais de um valor, como a quantidade de oportunidades em cada etapa e o ticket médio dessas oportunidades. Sei que é possível colocar uma segunda medida na dica de ferramenta, mas os usuários costumam querer ver ambos os números diretamente no gráfico, sem precisar passar o mouse. Em gráficos de barras horizontais conseguimos personalizar o rótulo para exibir o valor e o detalhe da série, além de ajustar a posição desses rótulos. Já testei vários visuais de funil, mas gostaria que o visual nativo oferecesse mais opções de customização, assim como acontece com outros gráficos que evoluíram ao longo do tempo. Alguém tem alguma dica ou solução alternativa? Se não houver, deixo aqui a sugestão de melhoria para futuras versões. Obrigado!
Third-party cookies and Custom Visuals that make web requests
Hello everyone I'm writing this post in regards to the imminent deprecation of "third party" (i.e.: cross-site) cookies in browsers like Chrome and others. My company has developed several custom visuals that make web requests to our backend services in order to fetch data. Of course these calls rely on cookies to make sure users are authenticated on our backend services and properly authorized. Until now, this was possible without issues. What we did in our visuals until now is this: We make a GET request to our backend to check if the user has their authentication cookie set If authentication fails, we open a new tab using host.launchUrl(https://our_backend_login_page) where the user can authenticate, and in the custom visual we start polling the backend to check when the user has logged in When the backend replies with success, it means the cookie has been set and the user is authenticated. We can now load the rest of the visual Thanks to the "WebAccess" privilege, that allows us to make cross-site requests to specific domains without any problem, this worked perfectly until now. However, the new policy in Chrome and other browsers will soon break this mechanism, as Chrome itself lets you know: Now, in their guide here, Google suggests various alternatives to third-party cookies, but from my preliminary research and tests the two main ones do not seem promising: The CHIPS method (aka: partitioned cookies) seems to not be applicable here, because it requires the partitioned cookie to be set from within the embedding site... but I cannot embed my site directly in the visuals, because the visuals themselves are sandboxed iframes (that is why I do the open new tab + polling method instead, like I described before) The Storage Access API method seems, on paper, to be exactly what we need: we can just explicitly request access to the user and if they accept third-party cookies will start working again. However, when I tried to implement the suggested flow, it doesn't work. Specifically, I get the following error when trying to invoke the document.requestStorageAccess() method: I cannot find much info on this error but, like the problem with the CHIPS method, it seems to be related to the fact the the Custom Visuals iframes are sandboxed and configured so that a call to window.origin returns null. Now, can anyone tell me if I did something wrong, or am I correct in what I just wrote? Am I missing something? Are the ways to implement one of those two approaches in a PoweBI custom visual? If the answer is no, does anyone know of any alternative solutions? The only thing I can think of is using the recently introduced option to access the local storage from a Custom Visual to store an authentication token (for example: JWT). However, this is not as straightforward as it sounds, because we must first ACQUIRE the authentication token somehow. I've thought of some hacky workarounds, but nothing that sounds like a proper solution. Does anyone have any better ideas? Thanks in advance for your support.
