Tip of the Week

Creating a HTML Editor for your Text Areas

One of the updates from version 3.0 to 3.1 is that Text Areas now use HTML rather than RTF (Rich Text Format).  However, there is no way to enter raw HTML directly in the Text Area.  By using a combination of a Property Control (to enter the HTML) and a Script Control (to display the HTML using the API), we can create an HTML editor which will allow you to enter HTML code and then create a new Text Area to display it in.  

First, we need to create the Property Control. For this we will use a multi-select list box and size it to be wider and higher than the default.



This will be the control that the users can enter HTML into.  

Second, we need to create a Script Control which will create a new Text Area and then display the HTML in the Text Area.

from Spotfire.Dxp.Application.Visuals import HtmlTextArea
textArea = Document.ActivePageReference.Visuals.AddNew[HtmlTextArea]()
textArea.AutoConfigure()
textArea.HtmlContent = strHTMLContent

The value from the property created earlier is passed in as an input parameter (called strHTMLContent) to the Script Control.

When you are done, you can test it out (as shown below).  



Although this feature will also work in the Web Player, the real use case it to allow an author to have more control over the layout and style of the text area, including tables, style sheets, remote images, and even some nifty things like audio and video.  

Comments

 

stephen.marshall said:

So is there any way to display the contents from another page... I tried to use iframes but that didn't work.. I've also been interested in trying to get protovis to work within this context but IE doesn't support SVG...

cheers

steve

June 16, 2010 2:42 PM
 

Stefan.graf said:

Could you please give an example for embedding a video over html?!

Thanks in advance!

Stefan

June 25, 2010 5:34 AM
 

Kevin Hanegan said:

Im not sure you can display contents from another page. The text area seems to only allow raw HTML tags and not tags like <SCRIPT>, or even <DIV> , so I would assume <IFRAME> would fall into that category. If you want to use a true webpage, what I would recommend is using the WebDetails visualization which comes as an example in the SDK. I am planning a future tip of the week on that.

Having said that, there are other ways to embed visualizations in the text area, and hope to finish a tip to display next week just on this topic.

June 25, 2010 1:40 PM
 

Kevin Hanegan said:

I am working on a video example and will post it as soon as Im done.

Kevin

June 25, 2010 1:42 PM
 

Stefan.graf said:

Many Thanks for that!

Stefan

June 28, 2010 6:44 AM
 

gondola display said:

good post,thank you for share

August 2, 2010 11:22 PM
 

Niketa Malhotra said:

Hi Kevin

Did you ever post the tip for embedding visualisations or property controls like sliders into the html? We need it desperately now...

June 28, 2011 12:03 AM
 

sollypaul said:

i tried the example

it is working in the client but not in the web player

this is the first time i am tryin to open a analysis file with script control in it...so if ther are any prerequisites plz mention

Below shown is the error

Unable to open analysis 'firstscript'.

System.InvalidOperationException: Attempt to add an owner to a node state of type 'NewDocumentNodeState'.

at Spotfire.Dxp.Framework.DocumentModel.State.NewNodeState.AddOwner(IDocumentNodeOwner owner)

at Spotfire.Dxp.Framework.DocumentModel.UndoableListAvlLeaf`1..ctor(SerializationInfo info, StreamingContext context)

can u plz help me out

June 28, 2011 6:24 AM
 

Tip of the Week said:

In previous tips , we have discussed how you can add HTML directly into a Text Area. To take this one

October 16, 2011 11:26 PM
 

Prafulla said:

Thanks for this useful tips.We are trying to run video from textarea and will update once done.

November 9, 2011 5:30 AM
 

uggkensington said:

http://www.uggkensingtons.org/

http://www.uggkensingtons.org/ugg-fox-fur-short-boots-5531-c-54.html | UGG Fox Fur Short Boots 5531

http://www.uggkensingtons.org/ugg-kensington-boots-5678-c-2.html | UGG Kensington Boots 5678

http://www.uggkensingtons.org/ugg-rainier-eskimo-boots-5189-c-85.html | UGG Rainier Eskimo Boots 5189

http://www.uggkensingtons.org/ugg-retro-cargo-boots-1895-c-3.html | UGG Retro Cargo Boots 1895

December 27, 2011 8:12 PM
 

uggskensingtonsale said:

www.uggskensingtonsale.org

www.uggskensingtonsale.orgugg-adirondack-boots-ii-c-6.html | UGG Adirondack Boots II

www.uggskensingtonsale.orgugg-adirondack-tall-boots-c-11.html | UGG Adirondack Tall Boots

www.uggskensingtonsale.orgugg-amberlee-boots-c-34.html | UGG Amberlee Boots

www.uggskensingtonsale.orgugg-annabelle-boots-c-35.html |

December 28, 2011 3:59 AM
 

uggskensingtonsale said:

www.uggskensingtonsale.org

www.uggskensingtonsale.orgugg-adirondack-boots-ii-c-6.html | UGG Adirondack Boots II

www.uggskensingtonsale.orgugg-adirondack-tall-boots-c-11.html | UGG Adirondack Tall Boots

www.uggskensingtonsale.orgugg-amberlee-boots-c-34.html | UGG Amberlee Boots

www.uggskensingtonsale.orgugg-annabelle-boots-c-35.html |

December 28, 2011 3:59 AM
 

uggskensingtonsale said:

www.uggskensingtonsale.org

www.uggskensingtonsale.orgugg-adirondack-boots-ii-c-6.html | UGG Adirondack Boots II

www.uggskensingtonsale.orgugg-adirondack-tall-boots-c-11.html | UGG Adirondack Tall Boots

www.uggskensingtonsale.orgugg-amberlee-boots-c-34.html | UGG Amberlee Boots

www.uggskensingtonsale.orgugg-annabelle-boots-c-35.html |

December 28, 2011 3:59 AM
 

uggretrocargosale said:

January 4, 2012 8:49 PM

Leave a Comment

(required) 
(optional)
(required) 
Submit

Syndication

Tags

Other Spotfire Blogs

Spotfire's interactive information visualization and analytic solutions give users a remarkable experience for quickly and easily querying data and reporting results for superior business intelligence. From portfolio management and customer retention programs to key processes such as CRM, marketing, research, bioinformatics, yield and asset management and design for manufacturing, enterprises around the world rely on Spotfire's business analytics software to improve operational performance.

©Copyright 2000-2011 TIBCO Software Inc | Privacy Policy | Terms of Use I Blog I Contact Us I Content Center