How to - Show a "loading..." prompt when reloading external data

Last updated:
1:38am Nov 27, 2019

Supported Version: Spotfire 7.0 or later

A guide on how to get a refresh indicator which looks something like the below, note however that we cannot trap the "Viz redrawn" event as part of this hence the slight delay after the bar vanishing and the table updating:


Approach

  • Add a progress indicator inside a div; hidden by default
  • Use a html button which calls JS to show the progress indicator, and then triggers python by forcing a click event on a second spotfire button
  • The Iron Python uses a special RefreshAsync method introduced in Spotfire 7 to manipulate html after tables have refreshed
  • Use a known workaround to force the html to redraw (force a new whitespace at the end)

Attached you'll find a zip containing all the files needed to get started:

  1. Sample html
  2. Javascript layer
  3. Iron Python layer
  4. An optional SQL script which fabricates a table taking two seconds to load (can be set up using an MSSQL connection); this is purely for testing purposes.

Instructions

Each file contains comments to walk you through setting this up, however the full instructions are as follows:

  1. Extract the contents of the zip file.
  2. Create a text area if you don't have one on the page yet.
  3. Go into Document > Properties, and create a new Iron Python script
    1. Change YOUR_TABLE_NAME to the relevant table (and add more if required)
    2. Add a script parameter with name=vis and type=visualization
  4. On your text area, "Edit html" and:
    1. copy and paste the contents of Reloader.html into it
    2. Insert a spotfire action button where prompted to do so inside the html and trigger the python script, passing in the text area as the script parameter

    3. (Optional) Change the <Style> section to contain your own spinner, of which many can be found here
    4. Add a new Javascript file, and copy the contents of Reloader.js into it.
    5. Save and close the Spotfire html editor

Don't forget that you can use any refresh indicator you want inside the provided "loading" div!

 


We hope you find this page useful. Do you have a challenge we could help with? Get in touch!

Tel +44 1908 550229 | Email | Website


Attachments

AttachmentSize
Package icon reloader.zip1.7 KB

Feedback (9)

Hi All

I have downlaoded the files and re-tested everything and it works fine for me - including in the web player.

Can you make sure you follow the instructions to the latter - I think people are tripping up on setting the "vis" script parameter. Add it as a script parameter, name=vis, type=visualization. Then wire it up to your text area on the action button:

 

janine.rawnsley 1:26am Nov. 27, 2019

Hi All,

I just found the solution for this issue. If your DXP fails after running script, please replace your IronPython script by following instructions from below link.

https://community.tibco.com/wiki/how-execute-ironpython-script-after-table-refresh-completion-tibco-spotfire

For "yourSecondScriptName", you could use the name as "afterLoad" and create another python script under this name with below code:

from Spotfire.Dxp.Application.Visuals import *
 
for p in Document.Pages:

 for vis in p.Visuals:

  if vis.Title == "yourTextAreaTitleName":

   newHtml = vis.As[HtmlTextArea]().HtmlContent

   oldDiv = '<div id="loading" style="display:inline">'

   newDiv = '<div id="loading" style="display:none">'

   newHtml = newHtml.Replace(oldDiv,newDiv)
 
   # Apply change

   vis.As[HtmlTextArea]().HtmlContent = newHtml;

   vis.As[HtmlTextArea]().HtmlContent += " " # Force re-render
 
#Where 'yourTextAreaTitleName' is the name of your text area that has the contents of Reloader.html.
 
Hope this could help.
 
chaiyut.y 10:50pm Nov. 12, 2019

This is great except I fail after the tables are updated the bar turns on the tables update then Spotfire locks up. Getting vis not defined error when the after load routine is ran. I have set the input below the script to the Visualization and selected the text area and title it vis. Please advise code I am using is below.

# Reload data tables.
# 1, Change YOUR_TABLE_NAME
# 2, Set param "vis": The text area which contains the html which will display our loading div
import clr
from System.Collections.Generic import List, Dictionary
from Spotfire.Dxp.Data import DataTable
from Spotfire.Dxp.Framework.ApplicationModel import NotificationService
from Spotfire.Dxp.Application.Visuals import HtmlTextArea

#vis = vis.As[HtmlTextArea]()
#vis.HtmlContent = Document.Properties["getdetails"]

# Tables(s) to refresh - change/add more if required
Tbls = List[DataTable]()
Tbls.Add(Document.Data.Tables['Assets'])
Tbls.Add(Document.Data.Tables['IL_SR_ACTIVITY_DETAILS'])

vis.Title = 'getdetails'
# Notification service
notify = Application.GetService[NotificationService]();

# After tables are refreshed, update html
def afterLoad(exception, Document=Document, notify=notify):
if not exception:
# Hide the loading div
newHtml = vis.As[HtmlTextArea]().HtmlContent
oldDiv = '

'
newDiv = '
'
newHtml = newHtml.Replace(oldDiv,newDiv)

# Apply change
vis.As[HtmlTextArea]().HtmlContent = newHtml;
vis.As[HtmlTextArea]().HtmlContent += " " # Force re-render

else:
#notify.AddErrorNotification("Error refreshing table(s)","Error details",str(exception))
notify.AddErrorNotification("Error refreshing table(s)","Error details","Did not work")

# Refresh table(s)
Document.Data.Tables.RefreshAsync(Tbls, afterLoad)

greg.gegner 3:02pm Jan. 16, 2019

I have all working, loading bar triggered, table refreshed, but at completion, the bar is not cleared.
I think the issue is identifying the text area based on the "VIS" text area parameter.

Is anyone able to better define how to specify the parameter for defining the text area? 

dave.williams 7:09am Mar. 20, 2018

Natasha 8:16pm Nov. 04, 2017

I tried several times but it didn't work for me. 

can you please upload the dxp file?

 

 

Natasha 8:16pm Nov. 04, 2017

Hi,

I have implemented same, the progress bar is working in professional client but it is not working in web player.  What could be the reason, do I want to enable HtmlSanitation is set to True?

You help much appriciated.

Thanks,

Velmurugan N

velmurugan.n 11:00pm Aug. 30, 2016

Great!

Can you please share a simple dxp if available that contains this as a use case?I am new to web technologies.Thanks in advance.

eriftops 2:59pm Aug. 18, 2016