This is the first time I am trying to embed a Power BI report with React.
I used the following method and it is working fine. But the issue is that my access token failed after nearly one hour. When I run the project after one hour I have to generate a new access code and add it into the following code. What is the solution for this ?
my code -->
<PowerBIEmbed
embedConfig={{
type: 'report',
id: 'xxxxx',
embedUrl: "xxxxx",
accessToken: ' xxxxxxxxx',
tokenType: models.TokenType.Aad,
settings: {
panes: {
filters: {
expanded: false,
visible: false
}
},
background: models.BackgroundType.Transparent,
}
}}
eventHandlers={
new Map([
['loaded', function () { console.log('Report loaded'); }],
['rendered', function () { console.log('Report rendered'); }],
['error', function (event) { console.log(event.detail); }]
])
}
cssClassName={"Embed-container"}
getEmbeddedComponent={(embeddedReport) => {
window.report = embeddedReport;
}}
/>
Thank you
Jeewan
You have to purchase a premium licence.
https://learn.microsoft.com/en-us/power-bi/enterprise/service-premium-features
Related
I'm new one in rails and trying to add Apexchart js to my project in rails7.
So i did
document.addEventListener('turbo:load', function(){
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector('.user-apex-chart'), options);
if (chart) {
chart.render();
}
})
before I run
npm install apexcharts --save
I have Esbuild and turbo on
and add to application.js this:
import ApexCharts from 'apexcharts'
in package.json it has apex
"dependencies": {
"#hotwired/turbo-rails": "^7.1.1",
"#popperjs/core": "^2.11.5",
"apexcharts": "^3.35.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"esbuild": "^0.14.38",
"sass": "^1.51.0",
"tom-select": "^2.0.0"
},
no erorrs when I started the server..
but seems it doesn't see Apex.
What I did wrong?
the test code following below is working:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
This is likely caused because your application.js script tag has defer="defer" and the library by default renders script tags that expect ApexCharts to exist.
Explanation of defer
The library supports passing defer: true to the options argument and then it will wrap create chart code inside an event listener.
<%= line_chart series, {defer: true} %>
I don't know if the event listener will work with turbo yet though.
I know that one of the major steps in power bi embedded is to give your app permission to it (I have an existing app in azure ad) but what if I'm just trying to get it working on localhost!
Here's my code: and nothing is working. Getting 403 currently.
**for testing purposes, I retreived my access token via: https://learn.microsoft.com/en-us/rest/api/power-bi/embed-token/reports-generate-token-in-group#code-try-0
<PowerBIEmbed
embedConfig={{
type: 'report', // Supported types: report, dashboard, tile, visual and qna
id: 'myreportId',
embedUrl:
'https://embedded.powerbi.com/appTokenReportEmbed?reportId=myreportid',
accessToken:
'xxx',
permissions: models.Permissions.All,
tokenType: models.TokenType.Embed,
viewMode: models.ViewMode.View,
settings: {
panes: {
filters: {
expanded: false,
visible: false,
},
},
background: models.BackgroundType.Transparent,
},
}}
eventHandlers={
new Map([
[
'loaded',
function() {
console.log('Report loaded');
},
],
[
'rendered',
function() {
console.log('Report rendered');
},
],
[
'error',
function(event) {
console.log(event.detail);
},
],
])
}
cssClassName="report-style-class"
getEmbeddedComponent={embeddedReport => {
console.log({ embeddedReport });
// this.report = embeddedReport as Report;
// window.report = this.report;
}}
/>
It seems like you are using the wrong tokenType
You need to use tokenType: models.TokenType.Aad
For more information regarding tokenType, you can check this documentation: https://learn.microsoft.com/javascript/api/overview/powerbi/embedding-solutions
If this does not resolve the problem, there may be other causes of error 403.:
• The user has exceeded the amount of embedded token that can be generated on a shared capacity.
• The Azure AD auth token expired.
• The authenticated user isn't a member of the group (workspace).
• The authenticated user isn't an admin of the group (workspace).
• The authenticated user doesn't have permissions. Permissions can be updated using refreshUserPermissions API
• The authorization header may not be listed correctly. Make sure there are no typos.
Reference:
https://learn.microsoft.com/power-bi/developer/embedded/embedded-troubleshoot
I am using Facebook marketing API 3.3 version to read product feeds but I don't know where can I get the product-catalog-id.Here is the URL :
GET /v3.3/{product-catalog-id}/product_feeds
You can get your product-catalog-id in the settings page of catalog page (https://www.facebook.com/products/catalogs)
Programatically, I'm using Graph API 13.0, you can fetch your business id via:
GET me/businesses
response:
{ data: [ { id: 12345, ... }, { id: 23456, ... } ] }
Then use the business ID to fetch product catalogs:
GET ${businessId}/owned_product_catalogs
response:
{ data: [ { id: 12345, name: 'foo', ... }, { id: 23456, name: 'bar', ... } ] }
See https://developers.facebook.com/docs/marketing-api/reference/product-catalog
I have the Scheduler loading multiple appointments. Some of those appointments should be read-only and the user should not be able to select them. Some of the appointments they should be able to select and edit, though. The logic for this is determined on the server and passed as a field in the payload on load.
I've attempted to hook into several client side events, such as Edit, MoveStart, and ResizeStart and cancel the edit events. This does work, however I would like the user to not even be able to select the event.
I do not see any client side events for Selecting that I can cancel.
I did attempt to iterate through the appointments on DataBound, but was unsure of how to prevent selecting at that point.
I suggest using a custom event template with and edit button and setting editable and selectable properties as false for the scheduler.
<script id="event-template" type="text/x-kendo-template">
<div>
<label>Title: #: title #<label>
# if (allowEdit) { #
<button style="margin-left:50px;" onclick="editSchedulerEvent(#:id#)">Edit</button>
# } #
</div>
<div>
Attendees:
# for (var i = 0; i < resources.length; i++) { #
#: resources[i].text #
# } #
</div>
</script>
<div id="scheduler"></div>
<script>
function editSchedulerEvent(id){
var scheduler = $("#scheduler").data("kendoScheduler");
var event = scheduler.dataSource.get(id);
scheduler.editEvent(event);
}
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
eventTemplate: $("#event-template").html(),
editable: false,
selectable: false,
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
atendees: [1,2],
allowEdit: true
},
{
id: 2,
start: new Date("2013/6/6 10:00 AM"),
end: new Date("2013/6/6 11:00 AM"),
title: "Interview",
atendees: [3,4],
allowEdit: false
}
],
resources: [
{
field: "atendees",
dataSource: [
{ value: 1, text: "Alex" },
{ value: 2, text: "Bob" },
{ value: 3, text: "John" },
{ value: 4, text: "Jane" }
],
multiple: true
}
]
});
</script>
</body>
</html>
I have a model record created and being saved through a route and controller. When I save the record through the controller (via a savePlace action), I am seeing this error in the JS console:
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
I've tried not setting anything on the model as well as setting dummy data on the model, but I get the same error. I am also user ember-cli http-mocks as a test backend to handle JSON responses. I realize it may be the response, but I'm not sure how else to configure the response.
Here's the relevant code:
routes/places/new.js:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.createRecord('place');
},
});
controllers/places/new.js:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
saveGeom(geom) {
this.get('model').set('geometry', geom);
},
savePlace(data) {
this.get('model').set('name', this.get('name')).set('description', this.get('description'));
this.get('model').save().then(function() {
alert("SUCCESS");
}, function(error) {
console.log(error);
});
}
}
});
server/mocks/place.js:
placeRouter.post('/places', function(req, res) {
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.send({
"places": {
id: 1,
name: "Triangle",
description: "Ryan Christiani",
geometry: {
"type": "Polygon",
"coordinates": [
[
[-84.32281494140625,34.9895035675793],
[-81.73690795898438,36.41354670392876],
[-83.616943359375, 34.99850370014629],
[-84.05639648437499,34.985003130171066],
[-84.22119140625, 34.985003130171066],
[-84.32281494140625,34.9895035675793]
]
]
}
}
});
});
Thanks!
I think you are using the wrong brackets in the wrong places in your JSON Object.
Check out this page
http://www.tutorialspoint.com/json/json_syntax.htm
The http-mocks configuration is wrong. It should be this the code snippet below. The server was instead responded with an array of objects (the response for 'GET /'). Not sure why that would trigger a JSON.parse error, but this is the correct configuration.
placeRouter.post('/', function(req, res) {
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.send({
'places': [
{
id: 1,
name: "Using Ember CLI to create a Fixture Adapter.",
description: "Ryan Christiani",
geometry: {
"type": "Polygon",
"coordinates": [
[
[-84.32281494140625,34.9895035675793],
[-81.73690795898438,36.41354670392876],
[-83.616943359375, 34.99850370014629],
[-84.05639648437499,34.985003130171066],
[-84.22119140625, 34.985003130171066],
[-84.32281494140625,34.9895035675793]
]
]
}
}]});
});