How do I reference values from a data table in a javascript script within an HTML Text Area?

[djones]

I have a data table with just one row, two columns which is being created via a python data function. I'd like to use the values from these columns in an html text area via javascript. The main problem I'm running into is the length of each value - it's over the 65536 character limit that spotfire allows for document properties. If I bring the value into the text area as a calculated value, it's truncated at the 65536 limit. How can I get these values into javascript to use in my function?

For what it's worth, these values are JSON that update based on markings.

Thanks!

Edited September 25 by djones

[djones]

I've figured out a way to do this in case anyone in the future needs it. Used an iron python data function to get my long variables and injected them into the HTML Text area. So basically each time it changes, the text area is updated. I have the value directly in the html, but set the style to display: none. then grab that value in javaqscript using document id.

 

If there's a better solution someone please let me know!

Edited September 25 by djones

[David Boot-Olazabal]

Hi djones,

Great to hear you solved it!
Could you share your solution (the iron python, html code and javascript that is)?

Kind regards,

David

Edited September 26 by David Boot-Olazabal

[djones]

@David Boot-Olazabal
My python data function writes out to a data table. basically any python script you want here - just had the output as a dataframe with one row. so my data table has the columns plotly_data and plotly_layout.

My text area script is:

 

from Spotfire.Dxp.Data import DataPropertyClass
from Spotfire.Dxp.Data import IndexSet
from Spotfire.Dxp.Data import DataValueCursor
from Spotfire.Dxp.Application.Visuals import *
from Spotfire.Dxp.Data import *

ta = ta.As[HtmlTextArea]()

# Get the Data Table passed as a script parameter
dataTable = data

# Define the column you want to access (replace 'columnName' with the actual column name)
column = "plotly_data"  # Replace 'plotly_data' with your column name
column2 = "plotly_layout"

# Create a cursor to access the column's values
cursor = DataValueCursor.Create(dataTable.Columns[column])

# Loop through the rows in the data table
for row in dataTable.GetRows(cursor):
    # Get the value for the current row from the cursor
    plotly_data = cursor.CurrentValue
    #print(value)  # Process or print the value


# Create a cursor to access the column's values
cursor2 = DataValueCursor.Create(dataTable.Columns[column2])

# Loop through the rows in the data table
for row in dataTable.GetRows(cursor2):
    # Get the value for the current row from the cursor
    plotly_layout = cursor2.CurrentValue
    #print(value)  # Process or print the value

ta.HtmlContent = f'<SpotfireControl id="a5429f688cac4b9c8dd65467d223ef5c" /><br><div id="plotly_chart" style="width: 100%; height: 600px;"></div><br><span id="plotly_data" style="display:none;">{plotly_data}</span><span id="plotly_layout" style="display:none;">{plotly_layout}</span>'

script parameters:
data: type = data table (the one output from the data function)

ta: type = visualization (the text area I'm in)

so basically this takes the ploty values from the data function and inserts it into the HtmlContent.


There's probably a more efficient way to do this, it's just what I got working. Next steps for me would be to update the data function based on marking and update automatically.

 

 

The SpotfireControl is a script that grabs the values from the injected HTML and creates the plotly chart with it. Hope that helps!