Jump to content

I am trying to embed a spotfire into an ASP.NET Core with Angular web app with no success

ILIA BROUDNO

By ILIA BROUDNO
in Spotfire

 Share

Recommended Posts

ILIA BROUDNO Rookie

ILIA BROUDNO

Posted
Posted

Following the example here https://community.spotfire.com/s/article/TIBCO-Spotfire-JavaScript-API-Overview?t=1678988775203

I made this

<script type="text/javascript"

    src="https://spotfire-next.cloud.tibco.com/spotfire/wp/GetJavaScriptApi.ashx?Version=7.5">

;

</script>

<script>

    var serverUrl = "https://spotfire-next.cloud.tibco.com/spotfire/wp/";

    var analysisPath = "/Samples/Expense Analyzer Dashboard";

    var customizationInfo = new spotfire.webPlayer.Customization();

    window.onload = function() {

     var app = new spotfire.webPlayer.Application(serverUrl,

                            customizationInfo,

                            analysisPath);

     var doc=app.openDocument("container");

    }

</script>

<div id="container"></div>

the contents of home.component.html

That did not result in the spotfire sub-window appearing like it should.

It only rendered <div id="container"></div>

I am using Angular 14. How should I adjust the example to make it work?

Link to comment
Share on other sites
Tejas Devadkar Contributor

Tejas Devadkar

Posted
Posted

Hello Ilia,

What do you exactly notice after you add the Spotfire API code to your web application? Do you see any errors? Is the call even reaching to Spotifre server? are there any errors in the Dev tools console?

What i'd suggest is to make a simple html script work at your end and then move to complex implementation.

You may host the below html web page onto any Web Server and try browsing the page if it reaches to your Spotfire server and renders the Spotfire analysis. Make sure to edit the below script to include your Spotfire Server URL in the< script src=" "> and the path to your Spotfire Library folder dxp in the var analysisPath.

This snippet is present in the community page you are referring in the "Getting Started" section

<html> <head>  <meta charset="utf-8"/>  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>Simple mashup example</title>  <script src="https://spotfire-next.cloud.tibco.com/spotfire/js-api/loader.js"></script>; </head> <body>  <div id="container"></div> </body> <script>  var app;  var doc;  var webPlayerServerRootUrl = "https://spotfire-next.cloud.tibco.com/spotfire/wp/"";  var analysisPath = "/Samples/Expense Analyzer Dashboard";  var parameters = '';  var reloadInstances = true;  var apiVersion = "11.4";  var customizationInfo;    spotfire.webPlayer.createApplication(  webPlayerServerRootUrl,  customizationInfo,  analysisPath,  parameters,  reloadInstances,  apiVersion,  onReadyCallback,  onCreateLoginElement   );    function onReadyCallback(response, newApp)  {  app = newApp;  if(response.status === "OK")  {  // The application is ready, meaning that the api is loaded and that   // the analysis path is validated for the current session   // (anonymous or logged in user)  console.log("OK received. Opening document to page 0 in element renderAnalysis")  doc = app.openDocument("container", 0);  }  else  {  console.log("Status not OK. " + response.status + ": " + response.message)  }  }    function onError(error)  {  console.log("Error: " + error);  }    function onCreateLoginElement()  {  console.log("Creating the login element");    // Optionally create and return a div to host the login button  return null;  } </script> </html> 

You may look into Spotfire server logs for entries to check if the API is able to reach the server and successfully authenticate.

Hope this helps.

Link to comment
Share on other sites
ILIA BROUDNO Rookie

ILIA BROUDNO

Posted
  • Author
Posted

What I notice Tejas is no errors, but as I mentioned it does not render anything besides <div id="container"></div>

It is supposed to have 2 script tags in addition to that. I think Angular strips them off.

So nothing happens The URL in the sample is a working one and replacing it with my own won't fix the problem.

I am guessing that example is not compatible with Angular front end and all you would need to reproduce my problem is create a sample angular application (via Visual Studio for example or angular CLI) and try to place that sample code somewhere.

What I did is created an ASP.NET Core 6.0 with Angular app via Visual Studio 2022 and then placed the sample code (see above) inside home.component.html (replacing what was there).

It's Angular 14 that I am using.

Link to comment
Share on other sites
Tejas Devadkar Contributor

Tejas Devadkar

Posted
Posted

Okay , so if there are no errors in the console. It is important to understand if the API is even reaching Spotfire or not. (I don't suspect this is something to do with any JS Framework specific)

CAUTION: Please note the website should be hosted, if you browse a local web page/project it will not work.

For testing purposes can you quickly test if a simple HTML like in the example community work? if not, you need to make it work at first. Save a .html file and host it on any web server and test browsing. This will help you troubleshoot the basic flow. You may later move to your Angular app setup.

The Spotfire report, not rendering could be troubleshot later if the authentication to the Spotfire server has happened and still the rendering does not happen. Please check the tss/tomcat/logs/server.log file to see if the user is authenticated to Spotfire(after you browse the page).

Are both the sites, your Spotfire as well as the external session secured (i.e HTTP)? if , so could it be the common SateSite cookie attribute not allowing cross-sites? (default SameSite attribute value is LAX)

Can you browse your web page with embedded Spotfire and then in the dev tools >> Applciations>> Cookies check what the SameSite attribute is set on each cookie? it should be None.(Default is Lax that restricts certain cross-site operations). There are ways to set it to None from the Spotfire side if needed.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Lastly, You may raise a support ticket with TIBCO with your issue and attach the server logs. As the logs need to be checked for further troubleshooting.

thanks,

Link to comment
Share on other sites
ILIA BROUDNO Rookie

ILIA BROUDNO

Posted
  • Author
Posted

The reason I strongly suspect the issue is Angular is because Firstly I HAVE tested it without angular (normal ASP.NET Core app) and it did work. And secondly because of what I see rendered in the browser and because Angular 14 is known to strip off <script> tags.

Regarding logs, I am still testing against the url that I originally posted (spotfire-next.cloud.tibco.com provided in the example) so I can't provide any spotfire logs, but I am pretty sure it does not reach spotfire.

Regarding https vs http (cross-site issue) Both the example urls are https and the local site url is http which means there is potential for cross site issues but interestingly it works anyway (without angular) and more interestingly if I change the example urls from https to http it does NOT work even though both http and https are valid tibco urls.

I was not able to see the "SameSite attribute" on the cookies (probably because it is set on the server and once again I don't have access to it), but I do see 4 cookies listed in the browser for spotfire-next.cloud.tibco.com none of them have this attribute listed but all 4 show "send for" : "Secured Connections Only".

Based on this evidence I conclude that "SameSite" must be set to LAX as you say or it would not have worked without angular either. And secondly "send for" attribute is probably what's preventing me from using http.

Lastly and most importantly,

How do I open a ticket with TIBCO?

Link to comment
Share on other sites
Tejas Devadkar Contributor

Tejas Devadkar

Posted
Posted

Hello

Did you try using this wrapper: https://www.npmjs.com/package/@tibco/spotfire-wrapper ?

Hope this helps you.

TIBCOSoftware/spotfire-wrapper

https://github.com/TIBCOSoftware/spotfire-wrapper

https://www.appsloveworld.com/angular/100/220/how-to-integrate-spotfire-analyatic-report-with-common-user-credentials-into-angu

=== 

And secondly because of what I see rendered in the browser and because Angular 14 is known to strip off <script> tags.

Lastly and most importantly, How do I open a ticket with TIBCO?

===

If you can make the API work using a vanilla javascript then the Spotfire JS API's are just fine and your systems can integrate with Spotfire cloud environment. Implementing the Spotfire API's in any of the frameworks/external applications then becomes a out-side-of-Spotfire thing that would be upto the developers to figure out. 

Anyway, you may reach out to TIBCO at https://support.tibco.com if you/your org has an active product license and support purchased.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...