Power BI Embedded - Error calling powerbi.embed() - javascript

I am trying to embed a simple Power BI report inside a ASP web (.NET Core) using controllers. I have already get correctly embedToken, embedURL and ReportID, but when i try to call powerbi.embed() to initialize the report i get the following error:
"ncaught TypeError: this.element.getAttribute is not a function
at e.t.getUniqueId (powerbi.min.js:2)
at e.t.populateConfig (powerbi.min.js:2)
at e.t (powerbi.min.js:2)
at new e (powerbi.min.js:5)
at t.embedNew (powerbi.min.js:2)
at t.embedInternal (powerbi.min.js:2)
at t.embed (powerbi.min.js:2)
at Object.<anonymous> (my-extension.js:125)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)"
I have tried the EmbedToken, embedUrls, and ReportId in Power BI embed Playground and they works fine, but i get that problem in the code. I believe that the problem may reside in the powerbi.js file, but i have also tried with different files, from nugget package and GitHub and I still have the same problem.
I left the code to get the tokens and initialize the Power BI Report below:
JS file to initialize the Report and Call API to get the tokens: Consider MyPanel as a simple pop-up properties panel:
this._button.onClick = (ev) => {
this._enabled = !this._enabled;
this._button.setState(this._enabled ? 0 : 1);
//Execute an action here
//if null, create docking panel
if (this.panel == null) {
this.panel = new MyPanel(this.viewer, this.viewer.container, 'myPanel', 'My Panel');
this.panel.addVisibilityListener((show) => {
this._button.setState(show ? 0 : 1);
});
}
var request = jQuery.ajax({
url: '/api/forge/PBI/url'
});
request.done(function (data) {
console.log(data);
// Read embed application token from textbox
var txtAccessToken = data.accessToken;
// Read embed URL from textbox
var txtEmbedUrl = data.embedUrl;
// Read report Id from textbox
var txtEmbedReportId = data.reportId;
var models = window['powerbi-client'].models;
var permissions = models.Permissions.All;
var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: txtAccessToken,
embedUrl: txtEmbedUrl,
id: txtEmbedReportId,
permissions: permissions,
settings: {
panes: {
filters: {
visible: true
},
pageNavigation: {
visible: true
}
}
}
};
var div = $('#PowerBIEmbed');
var report = powerbi.embed(div, config);
});
The C# files to get the tokens an respond to API request:
[ApiController]
public class PowerBi : ControllerBase
{
[HttpGet]
[Route("/api/forge/PBI/url")]
public EmbedConfig GetPBIToken()
{
EmbedConfig pBIData = PBICredentials.GetEmbedToken();
return pBIData;
}
}
public class PBICredentials
{
public static EmbedConfig GetEmbedToken()
{
var a = new Configurations();
using (var client = new PowerBIClient(new Uri(Configurations.ApiUrl),
Authentication.GetTokenCredentials()))
{
// Retrieve the selected Report
var Reports = client.Reports.GetReportsInGroup(Configurations.WorkspaceId);
var Report = Reports.Value.FirstOrDefault();
// Generate an embed token to view
var generateTokenRequestParameters = new GenerateTokenRequest(TokenAccessLevel.View);
var tokenResponse = client.Reports.GenerateTokenInGroup(Configurations.WorkspaceId,
Report.Id, generateTokenRequestParameters);
// Populate embed variables (to be passed client-side)
EmbedConfig embed = new EmbedConfig()
{
AccessToken = tokenResponse.Token,
EmbedUrl = Report.EmbedUrl,
ReportId = Report.Id
};
return embed;
}
}
}
public class EmbedConfig
{
[JsonPropertyName("accessToken")]
public string AccessToken { get; set; }
[JsonPropertyName("embedUrl")]
public string EmbedUrl { get; set; }
[JsonPropertyName("reportId")]
public Guid ReportId { get; set; }
}
Consider the authentification file and Configuration as in the Course "Developers in One Day" From Microsoft Power BI: https://www.youtube.com/playlist?list=PL1N57mwBHtN1AGWHnJMhtvJCIG_IlC07D
Any kind of help will be thanked!
Best regards,
Carlos

You are getting the error at below line:
var div = $('#PowerBIEmbed');
You need to get a reference to the first element inside the div array.
Change the above line to:
var div = $('#PowerBIEmbed')[0];
// or
var div = $('#PowerBIEmbed').get(0);
Please find the reference here: https://learn.microsoft.com/javascript/api/overview/powerbi/embed-report#example

Related

Signalr Close Message Recieved From Server Error

I have been dealing this error for a long time. I just want to make signalr to listen my 2 method. When i comment the (this) methods it works perfectly.
But it doesnt work. Can someone help me? Sometimes i can get the value but then it gets me the error like below the image. I researched some pages but cant find any answer actually.
Vuejs
const hubConnection = new signalR.HubConnectionBuilder()
.configureLogging(signalR.LogLevel.Debug)
.withUrl("http://localhost:7002/ChatHub", {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets,
})
.build();
hubConnection.start();
this.connectionId = hubConnection.connectionId;
this.connection = hubConnection;
hubConnection.on("UserConnected",(users) => console.log(users));(this)
hubConnection.on(categoryId, (all) => {
all = JSON.parse(all);
this.userMessage = {
id: all.Id,
text: all.Text,
userId:all.UserId,
userName:all.UserName,
categoryName: all.CategoryName,
createdOn: all.CreatedOn,
};
this.messages.push(this.userMessage);
console.log(this.userMessages);
});
},
using Microsoft.AspNetCore.SignalR;
using System.Text;
using Microsoft.AspNetCore.SignalR.Client;
using Microsoft.AspNetCore.Http;
using System;
using System.Web;
using System.Net.Http.Headers;
using System.Linq;
using System.IdentityModel.Tokens.Jwt;
using System.IdentityModel.Tokens;
using System.Collections.Generic;
using System.Threading.Tasks;
using Message.Dal.Concrete;
using Message.Dal.Abstract;
using Message.Dal.Model;
using Microsoft.Extensions.Configuration;
namespace Message.Dal.SignalRHub
{
public class ChatHub : Hub
{
private readonly IHubContext<ChatHub> _chatHub;
private readonly IHttpContextAccessor _httpContextAccessor;
private readonly IElasticRepository<OnlineUserModel> _elasticRepository;
private readonly string _indexName;
public ChatHub(IHubContext<ChatHub> chatHub,IElasticRepository<OnlineUserModel> elasticRepository,IConfiguration configuration)
{
_chatHub = chatHub;
_httpContextAccessor = new HttpContextAccessor();
_elasticRepository = elasticRepository;
_indexName = configuration["elasticsearchserver:User"].ToString();
}
public async Task SendMessage(Guid categoryId,string message)
{
await _chatHub.Clients.All.SendAsync(categoryId.ToString(),message);
}
public override Task OnConnectedAsync()
{
var token = string.Empty;
var httpContext = _httpContextAccessor.HttpContext.Request.Cookies;
var onlineUserModel = new OnlineUserModel();
onlineUserModel.Id = Context.ConnectionId;
if(!httpContext.Any())
{
return Task.CompletedTask;
}
token = httpContext.Where(x=> x.Key == "CodeChatBackend").FirstOrDefault().Value;
if(AuthenticationHeaderValue.TryParse(token,out var headerVal))
{
var handler = new JwtSecurityTokenHandler();
var val = handler.ReadJwtToken(headerVal.ToString());
onlineUserModel.UserName = val.Claims.FirstOrDefault(x => x.Type == "Name").Value;
}
var checkOnlineUser = _elasticRepository.GetUserAsync(onlineUserModel.UserName,_indexName);
if(checkOnlineUser.Result == null)
{
_elasticRepository.CreateUserAsync(onlineUserModel.Id,onlineUserModel,_indexName);
}
var getOnlineUser = _elasticRepository.GetAllAsync(_indexName);
_chatHub.Clients.All.SendAsync("UserConnected",getOnlineUser);(this)
base.OnConnectedAsync();
return Task.CompletedTask;
}
public override Task OnDisconnectedAsync(Exception exception)
{
var httpContext = _httpContextAccessor.HttpContext.Request.Cookies;
var token = string.Empty;
var result = _elasticRepository.DeleteUserAsync(Context.ConnectionId,_indexName);
var getOnlineUser = _elasticRepository.GetAllAsync(_indexName);
_chatHub.Clients.All.SendAsync("UserConnected",getOnlineUser);(this)
base.OnDisconnectedAsync(exception);
return Task.CompletedTask;
}
}
}
When i delete the onconnectedasync client method. It works perfectly. Am i missing something?
I fixed it! My mistake totally. I was trying to make one hub to connect different methods. To fix this: Create second hub class and configure your startup, then call hub method with a new connection.

Passing values to HTML File STORED in Asset Folder in Android

I was trying to pass the parameters to HTML file stored in android Asset Folder. I was passing the parameters to the function written in java script on my HTML file. But at certain times, I'm getting Exception, which I find difficult to sort out the issue.
Exception::
`I/chromium: [INFO:CONSOLE(1)] "Uncaught SyntaxError: missing ) after argument list", source: file:///android_asset/templateOffer.html (1)`.
Java script Code in HTML file:
function setWineDetails(tempOffer,wineBrnd,wineName,
wineCurrency,winePrice,placeLineOne,PlaceLineTwo,userName,wineMtchVal){
document.getElementById("usrname").innerHTML = userName;
document.getElementById("wineTpe").innerHTML = tempOffer;
document.getElementById("wine_brnd_id").innerHTML = wineBrnd;
document.getElementById("wine_name_id").innerHTML = wineName;
document.getElementById("wine_currcy_id").innerHTML = wineCurrency;
document.getElementById("wine_price_id").innerHTML = winePrice;
if (placeLineOne != = "" || placeLineOne != = null) {
document.getElementById("place_line_one_id").innerHTML = placeLineOne;
document.getElementById("place_line_second_id").innerHTML = PlaceLineTwo;
}
if (wineMtchVal == "" || wineMtchVal == null) {
document.getElementById("wine-percentages").style.visibility = 'hidden';
} else {
document.getElementById("wine-percentages").style.visibility = 'visible';
document.getElementById("wineMtch_id").innerHTML = wineMtchVal;
}
}
function setImage(wineImage){
document.getElementById("wineImage_id").src = wineImage;
}
function setValuesToOfferView(offerPercentage,offerExpiry){
document.getElementById("offer_per_id").innerHTML = offerPercentage;
document.getElementById("offer_expiry_id").innerHTML = offerExpiry;
}
passing parameteres::
private void loadWebViewContent(){
offerWebView.getSettings().setJavaScriptEnabled(true);
offerWebView.setWebViewClient(new WebViewClient(){
public void onPageFinished(WebView view, String url){
//Here you want to use .loadUrl again
//on the webview object and pass in
//"javascript:<your javaScript function"
offerWebView.loadUrl("javascript:setWineDetails('"+offerTemp+"','"+wineBrand+"','"+wineName+"','"+wineCurrency+"','"+winePrice+"','"+placeLineOne+"','"+PlaceLineTwo+"','"+userName+"','"+wineMatch+"')");
offerWebView.loadUrl("javascript:setValuesToOfferView('"+offerPercentage+"','"+offerExpiry+"')"); //if passing in an object. Mapping may need to take place
offerWebView.loadUrl("javascript:setImage('"+wineImage+"')"); //if passing in an object. Mapping may need to take place
}
});
offerWebView.loadUrl("file:///android_asset/templateOffer.html");
}

Execute Javascript on external url using HybridView, Xamarin cross platform

I have tried to execute JavaScript on an external url (ie: http://facebook.com) using WebView from Visual Studio Mac 2019, and so far no results.
To do so, I have tried to follow along with the official tutorial here https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview, and also tried a simpler one here: https://xamarinhelp.com/xamarin-forms-webview-executing-javascript/
Here is what I did with explanations:
On my shared folder, I created an HybridWebView class with the following code:
public class HybridWebView : WebView
{
Action<string> action;
public static readonly BindableProperty UriProperty = BindableProperty.Create(
propertyName: "Uri",
returnType: typeof(Func<string, Task<string>>),
declaringType: typeof(HybridWebView),
defaultValue: default(string));
public string Uri
{
get => (string)GetValue(UriProperty);
set
{
SetValue(UriProperty, value);
}
}
public void RegisterAction(Action<string> callback)
{
action = callback;
}
public void Cleanup()
{
action = null;
}
public void InvokeAction(string data)
{
if (action == null || data == null)
{
return;
}
action.Invoke(data);
}
public Func<string, Task<string>> ExecuteJavascript
{
get { return (Func<string, Task<string>>)GetValue(UriProperty); }
set { SetValue(UriProperty, value); }
}
}
From The macOS project which I use to test my cross-platform app, I tried the following custom renderer:
public class HybridWebViewRenderer : ViewRenderer<HybridWebView, WKWebView>
{
protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
{
base.OnElementChanged(e);
var webView = e.NewElement as HybridWebView;
if (webView != null)
{
Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.ExecuteJavascript.ToString())));
}
}
}
To note that the following part wouldn't work:
var webView = e.NewElement as HybridWebView;
if (webView != null)
webView.ExecuteJavascript = (js) =>
{
return Task.FromResult(this.ExecuteJavascript(js)); // issue at ExecuteJavascript with following error ('HybridWebViewRenderer' does not contain a definition for 'ExecuteJavascript' ), hence replaced by Control.LoadRequest ...
};
From my ViewModel, I did the following:
public Func<string, Task<string>> EvaluateJavascript { get; set; }
public async Task OnConnectTapped()
{
Console.WriteLine("on connect tapped");
// passing the url onto a connection service
var hybridWebView = new HybridWebView
{
Uri = "https://facebook.com/"
};
//hybridWebView.InvokeAction("document.getElementById('td');");
//var result = await hybridWebView.RegisterAction(data => DisplayAlert("Alert", "Hello " + data, "OK"));
var result = await hybridWebView.ExecuteJavascript("document.cookie;");
Console.WriteLine("result is {0}", result);
}
Here is the error when trying to execute my code:
System.NullReferenceException: Object reference not set to an instance of an object
at MyApp.ViewModel.MainModel.OnConnectTapped () [0x00031] in .../../././/ViewModel/MainModel.cs:451
at .......<.ctor>g__c5|48_9 () [0x0001f] in /../../../.cs:143
at System.Runtime.CompilerServices.AsyncMethodBuilderCore+<>c.<ThrowAsync>b__7_0 (System.Object state) [0x00000] in /Users/builder/jenkins/workspace/xamarin-macios/xamarin-macios/external/mono/mcs/class/referencesource/mscorlib/system/runtime/compilerservices/AsyncMethodBuilder.cs:1021
at Foundation.NSAsyncSynchronizationContextDispatcher.Apply () [0x00002] in /Library/Frameworks/Xamarin.Mac.framework/Versions/6.6.0.12/src/Xamarin.Mac/Foundation/NSAction.cs:178
at at (wrapper managed-to-native) AppKit.NSApplication.NSApplicationMain(int,string[])
at AppKit.NSApplication.Main (System.String[] args) [0x00040] in /Library/Frameworks/Xamarin.Mac.framework/Versions/6.6.0.12/src/Xamarin.Mac/AppKit/NSApplication.cs:100
at redacted.macOS.MainClass.Main (System.String[] args) [0x00017] in /Users/dom-bruise/Projects/redacted/redacted.macOS/Main.cs:11
For me, it could either be because I can't execute external pages, or the part where I replaced by the following messing up my attempt.
if (webView != null)
{
Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.ExecuteJavascript.ToString())));
}
My main goal here is to have my app execute JavaScript underneath the hood on pages using WebView, and fill in forms automatically calling back C# from my app.

How can I get defined instance/var from Java in NativeScript?

I've created a plugin which connects and subscribes to pusher channel successfully via NativeScript using this Java plugin,
now I'm trying to create an eventListener to get events in Nativescript,
this is my Java plugin:
public class PusherAndroid {
public void connectToPusher(String app_key, String channel_name, String event_name) {
PusherOptions options = new PusherOptions().setCluster("eu");
Pusher pusher = new Pusher(app_key, options);
pusher.connect(new ConnectionEventListener() {
#Override
public void onConnectionStateChange(ConnectionStateChange change) {
System.out.println("State changed to " + change.getCurrentState() +
" from " + change.getPreviousState());
}
#Override
public void onError(String message, String code, Exception e) {
System.out.println("There was a problem connecting!");
}
}, ConnectionState.ALL);
Channel channel = pusher.subscribe(channel_name);
channel.bind(event_name, new SubscriptionEventListener() {
#Override
public void onEvent(PusherEvent event) {
System.out.println("Received event with data: " + event.toString());
}
});
}
}
and this is my module:
module.exports = {
connect:function(app_key, channel_name, event_name) {
var psh = new com.pxb.pusherandroid.PusherAndroid();
psh.connectToPusher(app_key, channel_name, event_name);
var EventListener;
function initializeEventListener() {
if (EventListener) {
return;
}
EventListener = com.pxb.pusherandroid.PusherAndroid.extend({
interfaces: [com.pusher.client.channel.SubscriptionEventListener],
onEvent: event => {
console.log(event);
}
});
}
initializeEventListener();
<HERE I NEED MY CHANNEL>.bind(event_name, new EventListener());
}
};
Now, how can I get this channel in Javascript, to use it as my defined connected channel and bind eventListener to it?
Channel channel = pusher.subscribe(channel_name);
thank you
I dont really know how NativeScript works, but couldn't you just searialize your Channel to a json string, store it in a global variable on your PusherAndroid class and then access and desearialize it on your module?
thanks to #Manoj, there's no need to code in Java and try to use them in Javascript,
we can directly use Java classes and methods with Javascript,
there's really not enough reference for this.
here is my module after deleting all java code and just calling the classes and methods from pusher-java-library directly:
module.exports = {
connect:function(app_key, channel_name, event_name) {
PusherOptions = com.pusher.client.PusherOptions;
Pusher = com.pusher.client.Pusher;
Channel = com.pusher.client.channel.Channel;
SubscriptionEventListener = com.pusher.client.channel.SubscriptionEventListener;
PusherEvent = com.pusher.client.channel.PusherEvent;
var options = new PusherOptions().setCluster("eu");
var pusher = new Pusher(app_key, options);
pusher.connect();
var channel = new Channel(pusher.subscribe(channel_name));
}
};
now going to add my eventlistener with Javascript <3

How to deserialize JSON object in NET Core using Newtonsoft.Json.JsonConvert.DeserializeObject?

I create a WebSocket chat in NET Core. I don`t know how to deserialize real JSON object.
Parse this like a simple string - worked. But this is not what i need.
let Message = `{
login: userName,
text: messageField.value
}`
chat.socket.send(Message);
messageField.value = "";
JS Real code.
chat.sendMessage = function () {
// var message = userName + ": " + messageField.value;
let Message = {
login: userName,
text: messageField.value
}
chat.socket.send(Message);
messageField.value = "";
}
And this is how i deserialize:
private static async Task<string> ReceiveStringAsync(WebSocket socket, CancellationToken ct = default(CancellationToken))
{
var buffer = new ArraySegment<byte>(new byte[8192]);
using (var ms = new MemoryStream())
{
WebSocketReceiveResult result;
do
{
ct.ThrowIfCancellationRequested();
result = await socket.ReceiveAsync(buffer, ct);
ms.Write(buffer.Array, buffer.Offset, result.Count);
}
while (!result.EndOfMessage);
ms.Seek(0, SeekOrigin.Begin);
if (result.MessageType != WebSocketMessageType.Text)
{
return null;
}
// Encoding UTF8: https://tools.ietf.org/html/rfc6455#section-5.6
using (var reader = new StreamReader(ms, Encoding.UTF8))
{
JsonTextReader jsonReader = new JsonTextReader(reader);
var serializer = new JsonSerializer();
Message msg = serializer.Deserialize<Message>(jsonReader);
return await reader.ReadToEndAsync();
returns simple object,
not the one i tried to deserialize.
In debugger its displayed as [object Object].
[JsonObject]
public class Message
{
[JsonProperty("login")]
public string login { get; set; }
[JsonProperty("text")]
public string text { get; set; }
}
EXCEPTION
Newtonsoft.Json.JsonSerializationException: Cannot deserialize the current JSON array (e.g. [1,2,3]) into type 'Metanit.Models.Message' because the type requires a JSON object (e.g. {"name":"value"}) to deserialize correctly.
To fix this error either change the JSON to a JSON object (e.g. {"name":"value"}) or change the deserialized type to an array or a type that implements a collection interface (e.g. ICollection, IList) like List that can be deserialized from a JSON array. JsonArrayAttribute can also be added to the type to force it to deserialize from a JSON array.
Why exception tolds me Cannot deserialize the current JSON array
its not an array!
It is:
let Message = {
login: userName,
text: messageField.value
}

Categories