Spotfire Confirmation Dialogs

These funcitons are not officially supported by Spotfire and might change from one version to the other. Use of them at your own risk

js 

okClick = function(x){alert("mee too!")}
noClick = function(x){alert("too bad")} 
xClick = function(x){alert("why cancel?")}

Spotfire.ConfirmDialog.showYesNoCancelDialog("Hello","do you like this",okClick,noClick,xClick)//last two areguments are optional

myDialog=Spotfire.ConfirmDialog.showDialog("hello","there",[])

myDialog.close()

Spotifre.ConfirmDialog methods:

showDialog(title,message,emptyArray?)
showOkDialog(title,message,okCallbackFunction)
showOkCancelDialog(title,message,okFunction,CancelFunction)
showYesNoDialog(title,message,yesFunction,NoFunction,?,?)
showYesNoCancelDialog(title,message,yesFunction,NoFunction,CancelFunction,?)
? are optional unknown arguments

To explore other function, open the console on developer tools and type Spotfire

Here are some more Spotfire API snippets

progress = Spotfire.Progress.createProgressOverlay(); 
progress.setText("Loading, please wait"); 
  setTimeout(function(){ 
  progress.node().remove(); 
},3000);

This ones can be useful to detect the user agent:

Spotfire.isWebPlayer
Spotfire.isProfessional
Spotfire.isAuthorMode
Spotfire.isInitialized

Explore the JavaScript Spotfire object properties and methods by searching for keywords

function traversePropertiesAndFunctions(obj, keyword, path = []) {
  for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      const currentPath = [...path, prop];

      if (typeof obj[prop] === 'function') {
        if (prop.toLowerCase().includes(keyword.toLowerCase())) {
          console.log(`Found function: ${currentPath.join('.')}`);
        }
      } else if (typeof obj[prop] === 'object') {
        traversePropertiesAndFunctions(obj[prop], keyword, currentPath);
      } else if (typeof obj[prop] === 'string') {
        if (prop.toLowerCase().includes(keyword.toLowerCase())) {
          console.log(`Found property: ${currentPath.join('.')}`);
        }
      }
    }
  }
}

// Example usage
traversePropertiesAndFunctions(Spotfire, 'page');

Here is how the Spotfire.AboutPopup works

// 1. Define the content for "Acme Corp"

var acmeContent = {

    // --- Header & Identity ---

    productName: "Acme Analytics Dashboard",

    version: "2.5.0 (Beta)",

    productInfoLabel: "Enterprise Edition",

    // --- Build / Release Info ---

    buildVersionLabel: "Internal Build:",

    buildDate: "October 15, 2025",

    buildDateLabel: "Last Updated:",

    

    // --- Legal Section ---

    copyright: "© 2025 Acme Corporation. All rights reserved.",

    patentFormat: "Confidential & Proprietary. Authorized use only.",

    law: "Warning: This computer program is protected by copyright law and international treaties.",

    // --- Links (CRITICAL: Must exist to prevent crash) ---

    homepage: {

        link: "https://www.acme.example.com",

        label: "Visit Acme Corporate"

    },

    support: {

        link: "mailto:support@acme.example.com",

        label: "Email IT Support"

    },

    supportLabel: "Need Help?",

    // --- System / Environment Info ---

    // If you remove this property, the popup window will be shorter.

    // If you keep it, the popup is taller to fit this text.

    machineEnvironmentLogString: "User: Corporate\\Admin\nRegion: US-East-1\nServer: PROD-05\nDatabase: Connected (Latency: 24ms)",

    

    debug: false

};

// 2. Launch the Popup

Spotfire.AboutPopup.show(

    "About Acme Analytics", // The Window Title (Argument 'e')

    "Dismiss",              // The Close Button Text (Argument 't')

    acmeContent             // The Data Object (Argument 'i')

);

You could replace the logo further

// 1. Define your content (keep your working object)

var validContent = {

    productName: "Acme Analytics", 

    version: "2.0",

    homepage: { link: "#", label: "Acme Home" }, 

    support: { link: "#", label: "Acme Support" }

};

// 2. Define your new logo URL

var newLogoUrl = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"; // Example URL

// 3. Launch the popup

Spotfire.AboutPopup.show("About Acme", "Close", validContent);

// 4. Swap the logo immediately

// We look for the image specifically by its 'alt' text or 'src' filename seen in your HTML

setTimeout(() => {

    // Find the specific image tag based on the HTML you provided

    var oldLogo = document.querySelector('img[alt="Spotfire"], img[src*="spotfireLogo.svg"]');

    

    if (oldLogo) {

        oldLogo.src = newLogoUrl;

        

        // Optional: Adjust sizing if your new logo looks weird

        oldLogo.style.height = "auto"; 

        oldLogo.style.maxWidth = "200px";

        oldLogo.style.marginBottom = "20px";

        

        console.log("Logo swapped successfully!");

    } else {

        console.error("❌ Could not find the Spotfire logo to replace.");

    }

}, 50); // Small delay to allow rendering

CopyTextDialog

Spotfire.CopyTextDialog.open(

    "https://example.com/share/12345", 

    "Share Analysis", 

    "Copy the link below to share this analysis with others:"

);

CopyTextAreaDialog

Spotfire.CopyTextAreaDialog.open("Text to Copy", "Title", "description")

Color Picker

// 1. Create a "Color Swatch" button

// This element will serve as both the button and the color display

var $btn = $("<div/>")

    .css({

        width: "50px",

        height: "30px",

        border: "1px solid #ccc",

        cursor: "pointer",

        position: "absolute",

        top: "100px",

        left: "100px",

        zIndex: 9999

    })

    .appendTo("body");

// 2. Initialize the Color Picker

// We pass the jQuery object ($btn) to the function

var colorControl = Spotfire.Picker.createColorPicker($btn);

// 3. Configure it using the returned API

colorControl

    .value("#32418f") // Set initial color (Spotfire Blue)

    .onChange(function(newColor) {

        console.log("🎨 User selected:", newColor);

    });

console.log("Color picker created! Click the colored rectangle on screen.");