It is possible to render a power bi report in a windows form web browser control? I created an html file and added to navigate method but is not working. Also I added the html content to the documenttext property and is not working.
I'm using the embed for customer.. approach but I only get a blank page. This is the code that I pass to the webbrowser control. Do you have a sample using the windows forms project?
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title></title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' referrerpolicy='no-referrer'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.19.1/powerbi.min.js' integrity='sha512-JHwXCdcrWLbZo78KFRzEdGcFJX1DRR+gj/ufcoAVWNRrXCxUWj2W2Hxnw61nFfzfWAdWchR9FQcOFjCNcSJmbA==' crossorigin='anonymous' referrerpolicy='no-referrer'></script>
</head>
<body>
<div id='embedContainer'></div>
<script type="text/javascript">
const reportContainer = $('#embedContainer')[0];
const accessToken = 'token.....';
const embedUrl = 'https://xxx.powerbi.com/reportEmbed?reportId=0b0fe232.....';
const embedReportId = '0b0fe232.....';
const tokenExpiry = '5/20/2022 5:42:13 PM';
const models = window['powerbi-client'].models;
const config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: models.Permissions.All,
settings:
{
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
const report = powerbi.embed(reportContainer, config);
</script>
</body>
</html>
Thanks,
Ev
Yes. There are a number of approaches you can consider.
Power BI Secure Embedding just uses an IFrame and the desktop user will need to authenticate to Power BI. Minimally generate the embedding link from Power BI
and embed it in an a static HTML page like this:
<html>
<iframe title="Some Report"
style="position: absolute; height: 100%; width: 100%; border: none"
src="https://xxx.powerbi.com/reportEmbed?reportId=d12ecc27-a855-4b27-9..."
frameborder="0"
allowFullScreen="true">
</iframe>
</html>
Or you can build and register full web app to do embedding using either the Embed For Your Customers, or the Embed For Your Organization workflow. This adds a javascript API to control and interact with the embedded reports from your hosting application.
Related
I'm playing with OpenLayers to display COG files uploaded on GCS.
Using the NodeJS, an index.html and a main.js files, then building with Parcel (or others), everything works fine.
When I tried to skip using NodeJS, coding an HTML files with the CDN imports, and the inline JavaScript, it looks like OpenLayers is not able to retrieve all the needed dependencies. In particular in the network request/response, I have:
Request URL: https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.1/build/231.ol.js
Request Method: GET
Status Code: 403
Remote Address: 151.101.241.229:443
Referrer Policy: strict-origin-when-cross-origin
and if I try to hit directly the URL in the Browser:
https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.1/build/231.ol.js
I got:
Package size exceeded the configured limit of 50 MB. Try https://github.com/openlayers/openlayers.github.io/tree/master/en/v6.14.1/build/231.ol.js instead.
Why?
Below the content of the HTML file I stored on GCS (layer styling omitted),
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>COG on Google Cloud Storage</title>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.0/css/ol.css">
<style>
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var cogSource = new ol.source.GeoTIFF (
{
normalize: true,
sources: [
{
url: 'https://storage.googleapis.com/fao-gismgr-cache/TEST/L1_AETI_21.tif',
min: -9999,
max: 16000
}
],
transition: 0
}
);
var cogLayer = new ol.layer.WebGLTile (
{
source: cogSource
}
);
var cogView = new ol.View (
{
projection: 'EPSG:4326',
minZoom: 0,
maxZoom: 12,
center: [0,0],
zoom: 4
}
);
var map = new ol.Map({
target: 'map',
maxTilesLoading: 32,
layers: [cogLayer],
view: cogView
});
</script>
</body>
</html>
The COG and HTML file are on a public GCS bucket.
To test, I use Chrome with web-security disabled (CORS policies)
open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials
Could you help me?
Thanks in advance,
Davide
Thanks #Mike, I was having the same problem and tried your solution both with local and remote files and it worked without any problem.
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.12.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.12.0/css/ol.css">
I'm having trouble getting the Messenger Checkbox plugin to work: the Facebook script loads fine, it parses the page well (I can see this with the debug version of the SDK), but the checkbox remains in "hidden" status.
This is an HTML sample of my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TestCheckboxMessenger</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: "[my-app-id]",
autoLogAppEvents: true,
xfbml: true,
version: "v10.0",
});
FB.Event.subscribe("messenger_checkbox", function (e) {
if (e.event == "rendered") {
console.log("Plugin was rendered");
} else if (e.event == "checkbox") {
var checkboxState = e.state;
console.log("Checkbox state: " + checkboxState);
} else if (e.event == "not_you") {
console.log("User clicked 'not you'");
} else if (e.event == "hidden") {
console.log("Plugin was hidden");
}
});
};
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk/debug.js"
></script>
<div
class="fb-messenger-checkbox"
origin="https://[my-domain-name]/"
page_id="[my-page-id]"
messenger_app_id="[my-app-id]"
user_ref="[some-random-id]"
size="medium"
skin="light"
center_align="true"
></div>
<app-root></app-root>
</body>
</html>
I have carefully read the facebook documentation and the solutions proposed on StackOverflow, but the checkbox does not appear. I have taken into account the following points:
My page is served on HTTPS with a domain name that is whitelisted in my page options
The user_ref is a randomly generated id that is new on every page refresh
My app is in what was called "development mode" so I have Standard access to pages_messaging and I have admin role on the app (and I am connected to my account)
My Messenger webhook is live and working
As strange as it may seem, the conversation plugin works fine.
What conversation plugin looks like
Is there a method to debug the checkbox status? To know why it is hidden? Because I have no error message in the Chrome console and all this is very frustrating :)
Ok so, acccording to this Facebook Update, the checkbox plugin and some other features including optin mechanics, media messages, etc. have been deactivated in Europe and some other countries because of GDPR.
Facebook planned to restore them by Q1 2021, but now they are moving the timeline towards Q2 2021.
I don't understand why they don't put a warning message on the docs about these features... :(
I am trying to embed a Power BI report in my web page using an iframe, but it shows page name and side right filter with the report in the web page, can we hide both page name and filter from the report?
You can configure the settings for the report. Set the below flags to false in order to achieve what you want in the settings.
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
You can read about it here:
https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details
As mentioned by the other answer, you can try passing in these arguments if you are using the PowerBI JavaScript API: https://github.com/microsoft/PowerBI-JavaScript
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
Docs:
https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details
Failing that, you can try to manipulate the DOM of the iframe you're using like so:
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="demo_iframe.htm"></iframe>
<p>Click the button to change the background color of the document contained in the iframe.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myframe");
var y = (x.contentWindow || x.contentDocument);
if (y.document) y = y.document;
y.body.style.backgroundColor = "red";
}
</script>
</body>
</html>
You can see a demo if it here:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument
and an explanation on how this works here:
https://www.w3schools.com/jsref/prop_frame_contentdocument.asp
Microsoft have announced it is possible to turn off the loading image shown when a report is loading.
Loading Image
Use the Power BI Embedded JavaScript SDK to hide the flickering Power
BI logo that appears when a report is loaded. - power-bi-embedded-feature-hide-the-power-bi-logo-during-visualization-load
However I cannot find any mention of this in any of the JS SDK documentation or any examples online.
Has anyone achieved this yet?
First add a gif which you want instead of the Power BI logo. You can add it in a div element. This element will overlap the div element containing the report. The HTML code looks like below:
<div id="container">
<div id="overlay">
<img id="spinner" alt="Alternate Text" src="image/giphy.gif"/>
</div>
<div id="embedContainer" style="height: 600px; width: 100%; max-width: 1400px;">
</div>
</div>
Once you have added your gif. Now, make changes in the JavaScript Code. So you final JavaScript embedding code will be:
<script type="text/javascript">
// Read embed token
var embedToken = "<% =this.embedToken %>";
// Read embed URL
var embedUrl = "<% = this.embedUrl %>";
// Read report Id
var reportId = "<% = this.reportId %>";
// Get models (models contains enums)
var models = window['powerbi-client'].models;
// Embed configuration is used to describe what and how to embed
// This object is used when calling powerbi.embed
// It can also include settings and options such as filters
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: embedToken,
embedUrl: embedUrl,
id: reportId,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: false
}
};
$("#embedContainer").css("visibility", "hidden");
// Get a reference to the embedded report HTML element
var reportContainer = $('#embedContainer')[0];
// Embed the report within the div element
var report = powerbi.embed(reportContainer, config);
report.on("loaded", function (event) {
$("#overlay").hide();
$("#embedContainer").css("visibility", "visible");
report.off("loaded");
})
</script>
You can also add CSS to align you gif with your report:
<style>
#container{
position:absolute;
width: 1400px;
height:600px;
}
#overlay{
position:absolute;
width:inherit;
height:inherit;
}
#spinner{
display: block;
margin-top:10%;
margin-left: auto;
margin-right: auto;
width:10%;
height: 10%;
}
</style>
Further, you can refer to the following youtube link: https://www.youtube.com/watch?v=YhjtunTmnbw. This video is by the Power BI official YouTube account. In this video, you can learn how to get white-labelled embedded analytics in your application with Power BI Embedded. Discover how to hide the Power BI logo until the loaded or the rendered event, and how to use a personalized logo for the loading phase.
What the recommended way to do this, even in the article you referenced, is -
1. Hide the iframe (or the div containing it)
2. Listen to either the loaded event when using (phased loading)[https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API] or rendered otherwise
3. Show the div you hid before and voila - the embedded power bi is already loaded..
It is not currently possible to remove the PowerBI loading symbol. It would be great idea to suggest to input your own custom logo though
I created the serverless application using .Net core and hosted in AWS. I am able to create swagger.json by publishing API documentation under API gateway.
I am looking for the documentation to create swagger UI for those APIs.
Is any possibility to view the swagger UI in AWS itself.
I do not think AWS built a swagger UI in one of their services. At least, I am not aware of it.
However, it is possible to easily create a swagger visualization using S3.
There is an article on Medium which explains this well. [1]
Basically, what you need to script is:
Creation of an S3 bucket with static website hosting
Downloading the static swagger UI resources from GitHub
Syncing the resources to the S3 bucket
Downloading the swagger.json from API Gateway [2]
Uploading the swagger.json to S3
Modify index.html to point at your swagger.json
These steps are laid out in detail in the Medium article. [1]
References
[1] https://medium.com/nirman-tech-blog/swagger-ui-for-aws-api-gateway-endpoints-a667f25f5a4b
[2] https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-export-api.html
You can easily host self-contained swagger-UI web site in S3.
Here is an example: https://iris-fhir-server.s3.amazonaws.com/swagger-ui.html
Github: https://github.com/intersystems-community/Swagger-IRIS-FHIR
It's essentially your OpenAPI yaml or json files plus single HTML page like:
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist#3/swagger-ui.css" >
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
.errors-wrapper {
display: none !IMPORTANT;
}
</style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"> </script>
<script src="https://unpkg.com/swagger-ui-dist#3/swagger-ui-standalone-preset.js"> </script> <script>
window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
"dom_id": "#swagger-ui",
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout",
validatorUrl: "https://validator.swagger.io/validator",
//url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Patient.yml",
urls: [
{url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Organization.yml", name: "Organization"},
{url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Patient.yml", name: "Patient"},
{url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Practitioner.yml", name: "Practitioner"},
{url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Condition.yml", name: "Condition"},
{url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Medication.yml", name: "Medication"},
{url: "https://iris-fhir-server.s3.amazonaws.com/openapi/Observation.yml", name: "Observation"}
],
"urls.primaryName": "Patient"
})
window.ui = ui
}
</script>
</body>
</html>