Jump to content
We've recently updated our Privacy Statement, available here. ×
  • Spotfire Javascript Mashup API and Technique to Display a Single Visual from a Page


    Introduction

    One of the limitations of Spotfire's Javascript API is only an entire page can be accessed when displaying content.  This can present a problem when you want to reuse only specific visuals from an existing Spotfire Dashboard that's been designed for use within the normal Consumer or web based view.  The example below shows how you can take an existing DXP layout and use IronPython to "flatten" it. 

    Solution

    This "flattening" allows you to then reference individual visuals from the DXP.  To enable this, the IronPython script moves each visual to its own page allowing it to be referenced separately.  The new page name is the original page plus the visual name separated by an "=".  This allows you to easily create a dashboard with an appropriate layout for use natively within Spotfire but still allow the individual visuals within a Spotfire dashboard to be accessed via the Javascript API.  The IronPython script is activated by simply setting a flag through a configuration block or parameter when accessing the DXP through the Javascript API.  In this example, a Document Property called FlattenDXP is used to trigger the script which is also called FlattenDXP.

    image.png.4691b3062e400e18128333fb90764412.png

    The IronPython code is below.

    if (Document.Properties["flattenDXP"] == 'Y'):
    	# Get a list of all pages in the original layout
    	allOrigPages = []
    	for page in Document.Pages:
    		allOrigPages.append(page)
    
    	# Move each visual to a new page and then delete the original page once the visuals have been moved
    	for page in allOrigPages:
    		for viz in page.Visuals:
    			newPageTitle = page.Title + '=' + viz.Title
    			newPage = Document.Pages.AddNew(newPageTitle)
    			Document.Pages.MoveVisualTo(viz,newPage)
    		Document.Pages.Remove(page)
     

    Example

    Here is the sample page showing the default, full page view and then the ability to show just a single visual.

    image.thumb.png.4f7c3a9e06a0fc49748a9c40aa8752fb.png

    I've also included the HTML code for this page.

    <html>
    <head>
    
      <title>Simple Portal</title>
      <script type="text/javascript" src="http://localhost/spotfire/wp/GetJavaScriptApi.ashx?Version=7.5"></script>
    
    <script>
    var c_serverUrl = "http://localhost/spotfire/wp/";
    var c_analysisPath = "/Techniques/IronPython/Flatten DXP Script";
    
    var c_parameters = "flattenDXP=Y;";
    var customization = new spotfire.webPlayer.Customization();
    customization.showStatusBar = true;
    customization.showToolBar = false;
    customization.showPageNavigation = false;
    customization.showFilterPanel = false;
    customization.showDodPanel = false;
    
    var appSingle;
    var c_reloadAnalysisInstance = false;
    appSingle = new spotfire.webPlayer.Application(c_serverUrl, customization, c_analysisPath, c_parameters, c_reloadAnalysisInstance)
    
    var appFull;
    var c_reloadAnalysisInstance1 = false;
    
    appFull = new spotfire.webPlayer.Application(c_serverUrl, customization, c_analysisPath, null, c_reloadAnalysisInstance1)
    
    function initPage () {
    var viewFull   =appFull.openDocument("FullDXPPage", "Sales Summary");
    var viewSingle =appSingle.openDocument("SingleDXPVisual", "Sales Summary=Profit per State");
    }
    
    function changeVisual (visSel) {
    var viewSingle =appSingle.openDocument("SingleDXPVisual", "Sales Summary="+visSel[visSel.selectedIndex].value);
    }
    </script>
    
    </head>
    <body style="background-color: 333333; color: 91C6E1; font-family: arial; font-weight: bold; font-size: 12pt;" onload="initPage();">
    <h1>Flatten DXP Example</h1>
    
    <table>
    <tr>
    <td>Full Page
        <div id = "FullDXPPage"  style="width: 900px; height: 800px; ">Full</div>
    </td>
    <td>Single Visual
        <select id="VisualSel" onChange="changeVisual(this);">
    		<option>Profitability by State</option>
    		<option selected>Profit by State</option>
    		<option>Profit per Account Type</option>
    	</select>
    	<div id = "SingleDXPVisual" style="width: 970px; height: 800px;">Single</div>
    </td>
    </tr>
    </table>
    </body>
    </html>
     

     

    flatten_dxp_script.dxp


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...