Integrating TIBCO LiveView™ Web into TIBCO Spotfire®
By:
Last updated:
9:19am Dec 12, 2018

Introduction

The LiveView Web Spotfire visualization type is a custom extension for Spotfire that allows users to integrate the real-time visualizations they've configured in LiveView Web into their Spotfire reports. After a little configuration, LiveView Web visualizations can communicate with Spotfire visualizations to enable Spotfire data marking and Spotfire visualizations can drive what data is displayed in LiveView Web visualizations via LiveView web query parameterization.

(Click on Image for Larger Size)

Installation

The LiveView Web Visualization custom extension is available as .spk files that are to be deployed via Spotfire Server's Deployments and Packages configuration. Once deployed, Spotfire Analyst clients will be updated and a new visualization type will be available in the visualizations toolbar. The .spk files are bundled in the .zip file attached to this page below. Note that the JSViz framework (found here) is a prerequisite for enabling the LiveView Web Visualization extension. Once the two LVWeb spk files have been installed on the Spotfire Server, manually update the services (like the webplayer service) on each node in order for the extension to work on the WebPlayer or Automation Services.

On the LV Server, in order for CORS to work, update the liveview.properties file property liveview.server.allowedOrigins=<hostname> to specify the hostname of the WebPlayer Server.

Configuration

Configuration of a LiveView Web Visualization is performed just like any other Spotfire visualization, via the Visualization Properties dialog. The key section of the Visualization Properties dialog for making configuration changes is the Config Parameters section. The JSON element that you configure here is used to determine how to connect to LiveView Web including any necessary authentication credentials, what LiveView Web card to display, as well as how interaction with the LiveView Web card will affect other visualizations in Spotfire and vise-versa. By default when adding a new LiveView Web visualization to a Spotfire report, this configuration JSON is auto-populated with the following default values:

{
  "id": null,
  "connection": {
    "lvWebUrl": "http://localhost:10080/lvweb",
    "username": null,
    "password": null
  },
  "parameterMap": null,
  "markingMap": null
}
  • id - The ID of the card to display. If no id is provided, the card search interface will be displayed. Use the lvweb-list command to determine the IDs of the dashboard

    • lvweb-list –p /path/to/project-folder –c
  • connection - Contains connection configuration properties
    • lvWebUrl - The URL of the LiveView Web web application that hosts the card to display
    • username - The username to use if the LDM project requires authentication. If no authentication is required, this property is not needed.
    • password - The password to use if the LDM project requires authentication. If no authentication is required, this property is not needed.
  • parameterMap - A map of Spotfire column names to LVWeb query parameter names. When a row is marked in Spotfire, the values of the specified column names are uses as the values for the corresponding LVWeb query parameters. For example, if parameterMap is configured as:
    {
      "parameterMap": {
        "category": "categoryValue"
      }
    }

    And the query configured for the LiveView Web card is:

    SELECT * FROM ItemsInventory WHERE category = $categoryValue

    Then upon marking a row in Spotfire, the row's category value would be used to set the $categoryValue parameter in the LiveView Web card.

  • markingMap - A map of LiveView Web field names to Spotfire column names. When a data point is clicked in LiveView Web, the Spotfire table is searched for rows whose specified column has a value equal to the field value in the clicked point. All rows whose column value matches the selected data point's field value are marked in Spotfire.
    {
      "markingMap": {
        "lvwebFieldName": "sfColumnName"
      }
    }

Exporting Configuration From LiveView Web

LiveView Web now has a new option in the card menu that will help when trying to configure a LiveView Web Visualization in Spotfire. From the card menu, select Export -> Embedded Configuration. This will present a dialog with the JSON configuration for that card. This can be copied directly as the Config Properties JSON in Spotfire. Note that if authentication is required, the password will still have to be configured as it is not included in the embedded configuration. Similarly parameterMap and markingMap will also have to be configured separately because those properties are unique to the Spotfire environment.

Notes

  • In order to display embedded LiveView Web cards in Spotfire, the corresponding Live Datamart server must be configured to support CORS. This can be accomplished by setting the liveview.server.allowedOrigins property in the liveview.properties file in the LDM project.
  • It has been reported that after updating versions of the extension, existing LiveView Web visualizations will not automatically udpdate. You may need to remove and re-add the visualization to get the latest version. Be sure to copy the Config Parameters JSON value to make the process easier!

Known issues with Spotfire 7.5

Version 1.0.11328 introduced packaging to enable deployment of the LiveView Web visualization extension to Spotfire 7.5 servers. However, issues arose when attempting to integrate LVWeb visualizations. To address these issues, update to extension version 1.0.11424 or later and deploy the hotfix plugin attached below to your LDM project (extract/merge hotfix.embedded.circularJson.zip to your LDM project). Note (the hotfix is only necessary with LiveView Web v1.3.0, later versions will have the fix built-in).

*LDM/LVWeb authentication is currently not supported with Spotfire 7.5. Upgrading Spotfire versions is the only way to enable it.

Feedback (3)

Mohsin,

   unfortunately, the stack above does not give us enough information to diagnose a possible cause of the problem.   Is it possible for you to give a description of the setup and maybe some screenshots?  In addition, please describe the point in time that the error occurs.

Versions of prodcuts and components being used is almost always helpful too.

If you can send that info along, we'll try to get you up and going with this feature.  Thank you, Lorinda

Lorinda Visnick 8:36am Feb. 05, 2018

Hi,

 

I am trying to configure the same but it seems it is not able to fetch the data from lv server. i am not sure what i configured wrong.

but every time when i am refreshing the spotfire lv it is showing me below error .

Type: SyntaxError
Message: Unexpected token } in JSON at position 3496
Stacktrace: SyntaxError: Unexpected token } in JSON at position 3496
    at JSON.parse (<anonymous>)
    at http://localhost:8001/CustomView/x3cM5eg1TkCjMvSE2fCNQ/NoDocumentViewId/...
    at http://localhost:8001/?package=js:5023:1
    at invokeCallback (http://localhost:8001/?package=js:12850:105)
    at Object.success (http://localhost:8001/?package=js:12852:75)
    at fire (http://localhost:8001/?package=js:299:110)
    at Object.fireWith [as resolveWith] (http://localhost:8001/?package=js:308:74)
    at done (http://localhost:8001/?package=js:893:120)
    at XMLHttpRequest.callback (http://localhost:8001/?package=js:934:54)

 

mohsin.pathan 5:06am Feb. 05, 2018

Great to see this up on the community!  We have a lot of exciting work coming out around this type of use case and it's been a big request from our community of customers. Looking forward to hearing / seeing the cool stuff that keeps being invented to use it. 

Mark Palmer 6:15am May. 25, 2017