Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
There is an abberant behaviour when creating visuals in Power BI.
I've created a visual that draws a rectangle to fill the background of the visual (the same as drawing a rectangle shape - though I can set the fillet radius to a fixed value rather than percentage of the visual width/height). The visual does not take any data as input and has options in the Vizualisation panel to set the properties of the rectangle (fill colour, opacity, border width, fillet radius, etc...).
However,...
When the visual is first created (insert a new visual into a report) the background rectangle is 16px too high in the frame - the reason for this appears to be that, whilst the visual defaults to selecting a Title (enabled option in Visualisations pane), the font-size and height styles are not included witin the DOM. If the Title is disabled, then renabled then the DOM is updated and the visualisation is positioned correctly.
DOM on creation of visual:
<div class="visualTitle preTextWithEllipsis"
ng-if="viewModel.visualTitleVisible()"
title="" apply-style="::viewModel.readOnlyState.titleStyle"
ng-bind="viewModel.visualTitle.text"
style="visibility: visible;">
</div>
DOM following disabling and re-enabling Title.
<div class="visualTitle preTextWithEllipsis" ng-if="viewModel.visualTitleVisible()" title="" apply-style="::viewModel.readOnlyState.titleStyle" ng-bind="viewModel.visualTitle.text" style="visibility: visible; font-size: 12px; height: 16px;"> </div>
Is it possible to raise an issue with the developers to ensure that font-size and height is set when the visual is created so that the visual is positioned correctly in the frame?
Thanks
Solved! Go to Solution.
Hi @diaAzul,
Thank you for the clarification.
@v-chuncz-msft @v-ljerr-msft Since this issue is related to all of visuals including custom visuals.
Can you send this issue to Power BI dev team for further investigation?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
You may add suppressDefaultTitle to capabilities.json.
"suppressDefaultTitle": true
You may add suppressDefaultTitle to capabilities.json.
"suppressDefaultTitle": true
@v-chuncz-msftthank you.
I've updated capabilities.json as suggested and the visual now displays correctly.
Best regards
DiaAzul.
The internal iframe has width and height once the visual is added to the report page.
Would it be possbile to rely on these values or use percentage of height and width?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Hi @v-viig,
I've looked at external references, the issue is that the top left frame origin for the custom visual is determined by Power BI - i.e if there is a title it is x pixels down within the sandox, if there is no title then top left is the same as the sandbox frame origin. As the Power BI app controls the location of the custom visual within the sandox I have no control over the placement of the visual (though I can obviously get the overall size of the sandbox as you say).
I suspect that what is happening is that the title text is null (or blank), though the title is selected to be shown, when the visual is first created. I believe that what normally happens is that at the point when data is added to the visual, the title text is filled with the field names. However, as my visual is not data driven the title text is not initialised and when the visual is drawn a null (or blank) text string is passed to the function which returns the height offset for the visual within the sandbox; at that point the function probably throws an error as there is a null (or blank) input leading to the correct attributes not being added which would correctly position the visual.
It's not the end of the world, but it is annoying and there is potential need for more error checking/better test script in Power BI to make sure that null strings are initialised and handled correctly when passed to functions [if that is the error].
Thanks
Size of the iframe can be taken from viewport property of options that Power BI sends to update method.
Are you able to use viewport size?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Hi @v-viig,
Thanks for the suggestion; yes, I am aware of how to extract dimensions from the host options passed during update. However, that is not my problem. The following diagram might make the issue clearer.
The grey rectangle is the background created by my custom visual. The screengrab below each step (A, B, C) are the settings in the Visualisation panel:
The point I am trying to raise is that the visual should draw as C when it is created, not A; and it should not be necessary to switch of the Title and then switch it back on again to get the visual to draw correctly.
The visual (pbviz file) and link to github source code is at https://diaazul.github.io/
Thanks
Hi @diaAzul,
Thank you for the clarification.
@v-chuncz-msft @v-ljerr-msft Since this issue is related to all of visuals including custom visuals.
Can you send this issue to Power BI dev team for further investigation?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
14 | |
2 | |
2 | |
1 | |
1 |