How to Embed a Spotfire visualization into SharePoint Online

[Chad Holland]

Thank you in advance for any help. I am trying to embed a Spotfire Visualization into a Modern Sharepoint Online page, and it is like smashing my head into a wall over and over. I tried 2 different approaches, and neither work.

I tried the embed webpart, which allows you to embed webviewer pages, things like YouTube or other sources. This should work for Spotfire as well, but I just get the following error when I input the webplayer link. Error: "This website doesn't support embedding using just the address. Try pasting the embed code instead. If it's important to embed from this site using just the address, please send us feedback."

The other approach I attempted, was the link webpart, but this doesn't have the functionality I need.

Note, I have searched Spotfire's community to no avail. Every post I can find is nothing but links to other questions that link to other questions, none actually offering a solution. Also, yes I do have to use Sharepoint for this, it is the intranet architecture my company uses, and this should not be an answer.

TLDR: I am looking for a guide that will go into detail explaining how to get Spotfire Visualizations embedded into a Sharepoint Online Modern page.

[Seema Krishnani]

HTLM embed code should work

1. Use this HTML Embed code to embed the analysis in a web page.

 

https://docs.tibco.com/pub/spotfire_server/10.4.0/doc/html/en-US/TIB_sfire_bauthor-consumer_usersguide/GUID-FA4C9AE1-1E14-4A21-B951-EE4E72DC7373.html

 

2. If Interaction is needed two way then use the Spotfire JavaScript API.

https://community.spotfire.com/wiki/tibco-spotfire-javascript-api-overview

Please also check the below youtube video

 

https://www.youtube.com/watchv=wm863bw3XCw

[Tyger Guzman 2]

On a team site you can create a document folder and host .aspx pages using https://community.spotfire.com/wiki/tibco-spotfire-javascript-api-overview. Saving aspx allows the pages to be opened in browswer from SharePoint Online rather than a HTML page.

This will essentially be a custom html/aspx page that resides in a document library.

Test by saving test.aspx

contents:

Hello World and saving in a document library in your team site on Sharepoint Online. Then implementhttps://community.spotfire.com/wiki/mashup-example-multiple-views-using-tibco-spotfire-javascript-api.

 

Here is a template for an aspx/html page using the Javascript API. It can be used to create a custom aspx page saved in a document library or used as an embedded item on a Wiki or Webpart Page.

This has been tested in a Sharepoint WIKI page as embedded code and also a webpart page as Script Editor

 

 

 

 

 

Template

 

 

#elem1 {

padding: 0;

margin: 0 auto;

width: 100%;

height: 900px;

}

 

 

 

 

 

 

var app;

var doc;

var webPlayerServerRootUrl = "https://mycompany.com/spotfire/wp/";

var analysisPath = "/Folder/Folder/Folder/Folder/Analysis";

var parameters = '';

var reloadInstances = false;

var apiVersion = "7.14";

var customizationInfo = {

showAbout: false,

showAnalysisInformationTool: false,

showAuthor: false,

showClose: false,

showCustomizableHeader: false,

showDodPanel: false,

showExportFile: false,

showExportVisualization: false,

showFilterPanel: false,

showHelp: false,

showLogout: false,

showPageNavigation: false,

showReloadAnalysis: false,

showStatusBar: false,

showToolBar: false,

showUndoRedo: false

};

var viewOne0;

 

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")

viewOne0 = app.openDocument("elem1", 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;

}

[Tyger Guzman 2]

You may want to check with your Sharepoint Admins as well. There is a setting / list of approved urls for embedded iframes etc : https://support.office.com/en-us/article/allow-or-restrict-the-ability-to-embed-content-on-sharepoint-pages-e7baf83f-09d0-4bd1-9058-4aa483ee137b