dm-p / powerbi-visuals-html-content Goto Github PK

Service Name
Sharepoint and Onedrive for Business

Sample HTML, or Walkthrough

Essentially, you just need to use the link containing the file path ending in the file extension.
Example link:
https://[org].sharepoint.com/: v:/r/sites/[Site]/[Path]/[video_name].mp4

Example embed:

I was able to get the correct URL by opening the video in Sharepoint or OneDrive and clicking "Copy Link". Under the link options, select, "People with existing access can use the link". You may need to remove any query added to the URL. Question mark and after.

For responsiveness purposes, it would be pretty handy if we could get the current viewport height and width as helpers within the Handlebars template. As we're using flexbox for the main UI, this might not be possible, but could open up some cool use cases if we can get them.

Thanks for using HTML Content! Please read this issue before creating one yourself, as it may contain what you already need to know.

Certification Requests

Firstly, if you're going to ask for the visual to be certified, HTML Content cannot be certified under the Microsoft's current rules. We elaborate on this a little bit more in the FAQ. Please be assured I check frequently for rule changes.

If you need a certified visual that can handle simple HTML use cases, I recommend you go for Shielded HTML Viewer instead.

Specific Use Cases Not Working

Unfortunately we don't have a completely free rein when it comes to making HTML work inside Power BI. It might be likely that what you want to do is not possible under these limitations - the visual's website currently contains a living document of everything we know about.

Please refer to the linked article prior to creating an issue, to ensure that what you want to do isn't already listed. If it is,listed then there isn't much I can do to help, unfortunately.

If you're sure that what you're attempting isn't covered, then please create an issue with as much detail as possible. The visual is highly extensible so the more detail you can provide to help me reproduce it (or even something that straight-up reproduces it so I don't have to), then I will have more productive time investigating for you :)

Visual works perfectly in desktop or in the service(app.powerbi)
but when we are embedding the report, it doesn't

We were in version16, updated for the 17 and still the same...
Problem started on 4th or 5th july

I had this visual in an existing report, but this last week when opening it in PowerBI desktop, the instances of the visual aren't rendering. They still appear when the report is published.
The icon for html content has disappeared from the palette, and if I click on one of the blank visuals I do not get the configuration pane for the visual.
I tried adding the visual from the marketplace and from a downloaded file. PowerBI tells me that it is already installed and offers to refresh it. This makes no difference.
I tried creating a brand new report and adding the visual from the marketplace. It says it is installed, but no icon appears in the palette.

Power BI Setup (please complete the following information):

• Platform: PowerBI Desktop
• OS: Windows 10
• Browser: Edge
• Version 2.88.721.0 64-bit (December 2020)

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: [e.g. 2.0.0.0] - unfortunately due the bug, I cannot get this information. However the file name is htmlContent.htmlContent443BE3AD55E043BF878BED274D3A6855.1.1.0.15

Hello,
I wish to see your visual with the certified Power BI visual badge.
It makes me so sad to not be able to export my work in pdf.
Kiss from France

Describe the bug

Dear,

When using mailto or tel we get this message:

We are able to make normal 'https://www.' links work, but when using 'mailto' or 'tel' we get the above message in PowerBi Desktop and in the service nothing happens when we click on it.

Can you help us find what causes this error?
Thanks you in advance.

Kind regards,
Dennis

Power BI Setup (please complete the following information):

• Platform: Power BI Desktop andPower BI Service
• OS: Windows 10
• Browser: Chrome
• Version: 1.0.2.0

Additional context
this is how the data looks:

This is the HTML we use:

HTML = "" &MarketingContacts[Title ]&"

Description:

Power BI report with visual "HTML Content" does not show the content of an IFRAME inserted there.
The IFRAME's sandbox attribute is set with the following flags: sandbox = "allow-same-origin allow-scripts".

Details:

If only the flag "allow-same-origin" is set you get the following error message from the Chrome inspector:
Blocked script execution in '' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

If both flags are set "allow-same-origin allow-scripts" you get the following error message:
DOMException: Failed to read the 'serviceWorker' property from 'Navigator': Service worker is disabled because the context is sandboxed and lacks the 'allow-same-origin' flag.

It looks like the combination of the two flags doesn't work.

Users have observed that ordered (<ol>) and unordered (<ul>) lists are not rendering correctly.

Root cause: the developer visual has some overriding styling that prevents this, so we need to revert this in the visual.

When editing The Advanced HTML code. I have bits of code that are long on a single line. The editor does allow for text wrapping of text.. However, this makes it difficult to read, see example below.

proposed solution(s)

I would like the ability to click and drag the Advanced Editing Options window to become larger. Similar to how you can expand the filters Pane when working on a report page.
Narrow

Wide

Draggable elements do not seem to work in powerbi visuals.

Drag events also do not fire.

To test I have tried a very simple div with a draggable="true" property and tried to access ondrag and ondragstart events to no avail

(I am currently uncertain what could be causing this and am just posting here to notify for the https://www.html-content.com/ potential limitations section)

We at least need the basics of the view model setting up for unit testing.

As we can include measures, it would be handy if we can add a value to allow the user to group measures by category, similar to a column. We can do this by adding a sampling field to the visual.

Describe the bug

With a Content Security Policy (CSP) enabled and a frame-ancestors directive such as frame-ancestors 'self' 'unsafe-inline' https://* ms-appx-web://*; (which should allow everything via the https://* item), the browser still refuses to load the iframe and the browser console returns the error:
Refused to load https://run.outfieldapp.com because it does not appear in the frame-ancestors directive of the Content Security Policy.

When the CSP is disabled it loads successfully.

When the CSP is enabled and you try to load it with an iframe html snippet in a jsfiddle it loads successfully.

To Reproduce

Steps to reproduce the behavior:

1. Our embed via power bi is behind a user+password wall so I cannot share a direct example.
2. However, this CSP is active on https://run.outfieldapp.com/users/sign_in for example so you should be able to make on quickly in power bi yourself and reproduce it using the URL in an html content iframe and then try it in a browser (not IE).

Expected behavior

Expected iframe to load.

Screenshots/Workbook

n/a

Power BI Setup (please complete the following information):

• Platform: Power BI Desktop
• OS: windows 10
• Browser Safari or Chrome
• Version Safari Version 14.0.3 (16610.4.3.1.4) or Chrome Version 89.0.4389.114 (Official Build) (x86_64)

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: March 2021 version 2.91.884.0 64-bit

Additional context

n/a

not sure if this is possible, But I would like to use the rich editing of Visual Studio Code to edit my text.

I would like to have a button or an icon that would enable me to open my Body HTML Template or Stylesheet with visual studio code.

When clicked the current code in the window would be opened in Visual Studio Code.

as far as getting code back into the editor, I would be ok just using copy and paste to return to the HTML content visual.

Describe the bug

When using an iframe in value for the visual, that uses a src URL including an ampersand, the ampersand is encoded as & amp ; which makes the URL disfunctional.

To Reproduce

Steps to reproduce the behavior:

1. Create Meausre
   HTML = "<iframe src=https://www.google.com/search?q=url+ampersand&num=5 style ='position: fixed; width: 100%; height: 100%'></iframe>"
   The URL should open up a Google search page with the search term "url ampersand" and only show 5 results because of the second query parameter
2. Add "HTML Content" Visual to the canvas and drag the measure to the values section of the visual
3. Go to visual settings and under "Content Formatting" toggle "Show Raw HTML"
4. See in the visual that the & sign was converted to & amp ; in the src URL.
5. Copy the displayed src URL and paste it in a browser window - the 5 result limit won't work.

Expected behavior

The ampersand sign shouldn't be converted to & amp ; in the URL.

Power BI Setup (please complete the following information):

• Platform: Power BI Desktop and Web Service
• OS: Windows 11
• Browser: Google Chrome
• Version: 108.0.5359.125

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: 1.2.0.16

Hi,

I know there is a way to play vimeo video's inside the power bi Service.
Is it possible to make YouTube video's play inside the visual as well?

If possible can you share the code?

Thanx

Describe the bug

Power BI's Feb 22 release has degraded the functionality for the Measure-Based Stylesheet field. With Power BI's new format pane preview enabled (on by default), the field is displayed, but it will not accept a field from a query table. Existing visuals retain the CSS styling set prior to the Power BI update, but the field now behaves as a textbox. New instances of the HTML visual will only accept CSS content pasted into the Measure-Based Stylesheet field.

After turning off the new format pane preview in Power BI's settings, the Measure-Based Stylesheet field is no longer displayed. However, it does display an Advanced Controls link that enables the user to select a query field containing CSS content.

To summarize, with the new format pane preview enabled, CSS can only be applied by pasting literal CSS text into the textbox displayed in the Measure-Based Stylesheet field. Any CSS updates must be copy-pasted into every HTML visual manually.

If the new format pane preview is turned off, the visual is again functional, but the experience different than before the Power BI update.

To Reproduce

Steps to reproduce the behavior:

Power BI version must be Feb 22 update.

1. Add a new HTML visual
2. Add the HTML content field
3. Attempt to add CSS content from a query table field.
4. Measure based stylesheet field will not accept a query table field. It will only accept literal CSS text pasted into the field.

Expected behavior

The Measure based stylesheet field should accept a query table field that contains CSS content.

Screenshots/Workbook

If applicable, attach screenshots or a sample workbook with data suitable for public viewing to help explain your problem.

Power BI Setup (please complete the following information):

• Platform: Power BI Desktop
• OS: Windows 11
• Browser: Edge, but not applicable for desktop reason (I think).
• Version: 1.2.0.16 (HTML visual version, if that's what is expected here).

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: 2.102.683.0 64-bit (February 2022)

Additional context

Add any other context about the problem here.

Hi,
Thank you very much for this component. It's very useful.
In one project, I'm using it to display rich-text, formatted as HTML.
Specifically, the text presented is formatted right-to-left (and then some more formatting, irrelevant to this issue).
When the text is longer than the control's height, a vertical scrollbar is shown, which is great.

However, the scrollbar is hiding the rightmost part of the content.

Two suggestions, if you may:

1. When the scrollbar is shown, allocate its own place, outside the content area
2. As a requested feature (not a bug), allow setting scrollbar's location - right or left.

Power BI Setup:

• Platform: Power BI Desktop + Power BI Report Server
• OS: Windows 10
• Browser: chrome

Visual Information :

• Version: 1.2.1.17

Being able to select and copy text from the visual would be a great addition.

Describe the bug

Something go wrong while the html pages using <script>$.get/$.post</script>

To Reproduce

Steps to reproduce the behavior:

1. New a HTML content visuals in power bi
2. New a measure:
   testEcharts = "<iframe src='http://127.0.0.1:8080/test.html' width:100%;height:100%></iframe>"
   Drop the measure to HTML content visuals.
3. Then we suppose the visuals should return the pages. But it did not show anything.

Power BI Setup (please complete the following information):

• Platform: Power BI Desktop
• OS: Windows10
• Browser chrome, edge,ie

My guess

Something goes wrong with "$.post" in this HTML page, see below.

<script> svgPath = "http://127.0.0.1:8080/MySvg.svg"; $.post(svgPath, function (svg) { blablabla; } </script>

Interestingly, while I change the svgPath to an external website, the problem can be solved. See below.

<script> svgPath = "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/ksia-ext-plan-min.svg"; $.post(svgPath, function (svg) { blablabla; } </script>

BTW, the page("http://127.0.0.1:8080/test.html") works well on chrome, edge, IE11, IE10 and IE9 EXCEPT IE8.

Could you help me? Thanks.

Describe the bug
I am visualizing formatted text on a Power BI Report and there is a text limit. You cannot scroll further, even though there is still text in the source field.

To Reproduce

1. Go to Power BI
2. Scroll down to last visable row of the formatted text field (my text field has 2 200 words)
3. See error as it is not possible to scroll down even further

Expected behavior
To have unlimited rows of text

Screenshots/Workbook
Not possible due to the sensitivity of the content

Power BI Setup (please complete the following information):

• Platform: Power BI Desktop and Power BI Service
• OS: Windows 10
• Browser: Edge
• Version: 114.0.1823.43 (Official build) (64-bit)

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: 2.118.621.0 64-bit (June 2023)

Additional context
None

We should be able to specify sort by HTML value or any of the fields added to Granularity.

I'm not a fan of the Export to PowerPoint or PDF from PowerBI.com, but some of my users like it. When you export the HTML visual, it prints a shield with an X on it.

It would be great if the visual could be exported. If this is another limitation by the Power BI service, can you add this to the list of restrictions?

Describe the bug

Reading through the documentation, one phrase was confusing

To Reproduce

Visit https://delightful-sea-0ba98881e.azurestaticapps.net/faq

The line Using innerHTML, or D3.HTML (user data or user input)
did not make sense to me.

Expected behavior

I think what you are trying to say here is that using external code and pulling that in is acceptable.
so examples would be something like using innerHTML or D3.html are approved external sources.

I would like to see a quick example of how I would pull that in, potentially

Describe the bug

The iframe reloads when click on other screen elements

To Reproduce

Create a iframe with what ever content, add a visual, for example stacked bar chart with content.
Click on a column
iframe container reloads so the page you navigated is lost

Expected behavior

HTML with an iframe should keep the content with out refreshing.

Screenshots/Workbook

Power BI Setup (please complete the following information):

• Platform: Powe BI Desktop
• OS: Windows 11

Hello.

I think this project is perfect solution viewing HTML on Power BI.

However, I want to add a feature of converting JIRA markdown to html .
I found npm project for this. (https://www.npmjs.com/package/jira2md)

But, I don't know where is original data for html.
below is my wrong code. Would you please how can i modify data?

public update(options: VisualUpdateOptions) { // add to covert jira to html let dataView: DataView = options.dataViews[0]; this.textValue.text(j2m.jira_to_html(<string>dataView.single.value));

Hi there!

I have an issue, when I publish the visual in power bi service it doesn't show the map. The message that shows is: "Chore blocked this page" as attached image:

I enter in power bi the following DAX Code: HTML = "<iframe src="&CodigoHTML[URL]&" style='position: fixed;width: 100%; height: 100%'></iframe>"

The "CodigoHTML[URL]" is: https://www.dhn.mil.pe/shnaNEW/histogramas_shna/archivos/Pucallpa.pdf

I would want to show that map in Power Bi, the link never change, but the information that it contains change every day (almost)

I tried to visualize this map by PDF Viewer, but doesn´t update the content even I update the the page of power bi desktop.

Please your help, I'm on this 3 days and don't find an alternative way...

Hi, my Marketing Director is requesting the following and I am wondering if this visual could be used: He is running an ad on LinkedIn with a link to a Power Bi report (published with a public web code). Wants to add LinkedIn tracking code to the report.

Let me know if you need any other information. Thanks!

Ann Kukich
Channel Media Group
[email protected]

In power bi service all the HTML tooltips only show the data on the first hover, after another hover it turns blank.
So for tooltips in power bi this visual is broken.

This started after the latest update of power bi service.
In power bi desktop everything still works.

To Reproduce

Steps to reproduce the behavior:

1. Create a Power BI dashboard with an object that has a tooltip that uses this HTML content visual.
2. Make sure the HTML code is generated from a DAX measure.
3. Publish the Power BI dashboard to Power BI web Service
4. Hover over the object to popup the tooltip.
5. You will notice that the visual will generate only on the first hover in Power BI Service.
6. If you refresh the web page it will work again but again only on a first hover.

Screenshots/Workbook
Here you can see the problem, where the visual is not loading anymore after a first hover:

Here you can see what the visual should look like, this is in Power BI Desktop, here all still works:

Power BI Setup:

• Platform: [Power BI Service]
• OS: [Windows 10]
• Browser [Chrome, Microsoft Edge]
• Version [Service version13.0.18129.59]

Additional context

I created a PRO ticket at Power BI and they informed me on that this issue has to be resolved with the publisher of the visual and not with them.
Community posts about this issue:
https://community.powerbi.com/t5/Issues/HTML-tooltips-only-show-the-data-on-first-hover/idi-p/2472994
https://community.powerbi.com/t5/Service/Loading-HTML-content-on-report-page-tooltip-goes-to-blank-since/m-p/2472993

Hi,
I need to add to power bi Govmap iframe element with HTML
This is my iframe :
HTML = "<iframe id='ifrMap' frameborder= '0' scrolling= 'no' marginheight= '0' marginwidth= '0' width='350px' height='350px'src= 'https://www.govmap.gov.il/map.html?bb=1&zb=1&in=1&c=204000,595000&z=0' > </iframe>"
I have X,Y for every row in my data.
Do html-content know iframe?
if yes, how can i do that?
thanks,
bracha.

hi daniel @dm-p

Very presumptuous use of Issue
I sent an email to your email ([email protected]), looking forward to your reply.
my mail address is([email protected])

Regards
jiaopengzi

Describe the bug

Pseudo-elements do not work

To Reproduce

Steps to reproduce the behavior:

1. Go to CSS code
2. Add the block with ::before
3. run code
4. No result.

Expected behavior

Styling should change according to child content block
Screenshots/Workbook

If applicable, attach screenshots or a sample workbook with data suitable for public viewing to help explain your problem.

Power BI Setup (please complete the following information):

• Platform: [e.g. Power BI Desktop, Power BI Service]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: [e.g. 2.0.0.0]

Additional context

Add any other context about the problem here.

Add suitable linting configuration to codebase and fix up any issues.

description

I would like a button in both the Body HTML Template and Stylesheet that when pressed would auto format the code in the editing window.

I don't write the best code and thus, when I need to review or look at why I screwed up my HTML it is helpful to see the proper indentations.

Would it be possible to update FAQ based on queries similar to this
https://community.powerbi.com/t5/Desktop/Use-Html-content-lt-input-type-radio-gt-visual-to-build-a-slicer/m-p/3067925#M1041649

Hi developer team,

We want to embed site analytics for a webpage hosted on sharepoint. Something similar to this.

As we face some difficulty with accessing this data directly into our Power BI report, we went ahead to use the available custom connector 'HTML Content' and are trying to embed the complete analytics page in our report. But, we are getting the below error.

"domain.sharepoint.com refused to connect" even when all the permissions have been provided to the Power BI report.

What can be the best possible solution to make use of this connector to display the webpage hosted on sharepoint in our Power BI report?

Thanks!

To much redirecting

In Streamlit , the view app render HomPage in success , but in perosonal links,it doesn't work and showing the "to much redirecting".

Sample HTML, or Walkthrough

https://streamlit.io/ ; https://tinkerism-11074010-streamlit-example-streamlit-app-x7ywfc.streamlitapp.com/

Hi there,

I'm using this visual to show multi info card with the ability to use the hyperlinks to navigate into specified URLs in the dataset. I successfully created that. But there is one problem.

There is no option to control the elements conut in a row. It is just a row with one element. I really wish If I had an option to control that.

Could you add this feature please?

Hi,

I use your extension in Powerbi and it works great.

In my use case, I'm showing data in the html5 component, and it works fine. But when there is no data to display, I get a message that appears in the component "No data available to display." Is there a way to replace it with another message?

Thanks for your help

Noliverte

Describe the bug
I added the visualization to my report and it worked fine. I'm redesigning the report and can't delete it. I've tried right clicking on the visualization on the canvas, and on the custom visualization icon. Nothing.

To Reproduce

Steps to reproduce the behavior:

1. Install the visualization
2. Add to a report and select the HTML field as the "Values"
3. Right click on the visualization and there is not option to Delete

Expected behavior

I expect to be able to remove the visualization

Screenshots/Workbook

Power BI Setup (please complete the following information):

• Platform: Power BI Desktop
• OS: Windows
• Browser: N/A
• Version: I just installed PBI from the MS Store today, so its the latest. (can't find a version number...)

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: 1.2.0.16

The visual does not support exporting when export to PDF from the power BI service.

Hi,

Is it expected not to get d3.js scripts embedded in my html display in the custom visual on PowerBI?

More precisely, I have an html file with a javascript which dynamically produces a scatter plot. I would like to visualize it on PowerBI. This works fine on any browser but I cannot make it work on PowerBI for some reason. The pure html part is correctly displayed on PowerBI but the interactive visual produced with d3.js does not work.

Any insight here?

Hi,
I am using the HTML Content Visual in Power BI.
But I have an issue with the following sites, I am not sure why they are not opening. I would appreciate a hand with this one.

Below are the sites:

1. WebsiteFlipper = "<iframe width='300' height='200' frameborder='0' scrolling='no' allowfullscreen src='https://arcg.is/1XuWD4'></iframe>"
2. WebsiteGator =
   "<iframe width='800' height='600' frameborder='0' scrolling='no' allowfullscreen src='https://arcg.is/0uqPn8'></iframe>"

Have a nice day,
Best,
Andrea

I would like the visual to support viewing of different image formats and PDF related to a project involving invoice information

Support of the tag would enable us to use the html content visual to show different image formats AND PDF in the same visual through a measure which diverses on the type attribute in the tag

ref: https://www.w3schools.com/tags/tag_object.asp

ex:
<object> data="<<my blob url and key>>" type="application/pdf" width="100%" height="100%"> </object>

Based on image format the measure could change the type to "image/tiff", "image/jpg" etc based on fileextenson from the blog entry.
ref: https://www.iana.org/assignments/media-types/media-types.xhtml#image

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots/Workbook

If applicable, attach screenshots or a sample workbook with data suitable for public viewing to help explain your problem.

Power BI Setup (please complete the following information):

• Platform: [e.g. Power BI Desktop, Power BI Service]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: [e.g. 2.0.0.0]

Additional context

Add any other context about the problem here.

The stylesheet option for the HTML5 tool inn Power BI web is not available this morning. It was there last night, but gone today. This is occuring on multiple reports today.

A clear and concise description of what the bug is.

To Reproduce
If you look at the visual settings on the html5 tool, the smartsheet option is gone when using PowerBI on the web

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots/Workbook

If applicable, attach screenshots or a sample workbook with data suitable for public viewing to help explain your problem.

Power BI Setup (please complete the following information):

• Platform: [e.g. Power BI Desktop, Power BI Service]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Visual Information (please complete the following information, available by right-clicking the visual in Power BI and selecting About):

• Version: [e.g. 2.0.0.0]

Additional context

Add any other context about the problem here.

Hey Daniel,
Great job filling a gap in Power BI. I watched the interview you did with Mike at power bi tips.
Toward the end of the video you showed a version 2 that allowed multiple columns. That looks like a great feature and I wondered if you ever released it, or what happened?
Thanks!
Richard

Is your feature request related to a problem? Please describe.

I have observed that if HTML data is bigger than 32kb then it is truncated

Describe the solution you'd like

Is it possible to increase or remove the limitation. 128kb should be enough for my purposes