RichText tricks for TextField in Designer

This post describes a technique to set rich text content into a Textfield of a form that was designed in LiveCycle Designer ES. Thanks to Paul Guerette who helped me out to understand this few months back.

There can be two scenarios in which you might want to set content into a rich text supported Textfield.

1. User types the rich text content into a text field and you wish to copy that to another Textfield.
2. LiveCycle ES server/some other way you wish to set rich text content into a form field. (Form pre-population scenario)

Where is rich text data in a text field?

When user types plain text in a pure Textfield (field format: Plain Text Only) then the data is set/get from rawValue property. BUT if the Textfield is having Rich Text as the field format then the data is store at .value.exData

How to check what the rich text data look like under the covers?

I use email submit button on a simplest form to see the XML that gets created for submission.

If you wish to do this then:

1. Create a simple dynamic PDF form and put a text field with Rich Text format set to it.
2. Drop a Submit button and put mailto:someone@abc.com as submit URL
3. Open this sample form in Preview mode type some text with rich-text formatting (Bold, Italics etc)
4. Hit the email submit button you would be able to see the exData content as the child element of your Textfield.

Now let’s look at above mentioned two scenarios in details:

Scenario 1: User types the rich text into a field and we want to copy that to another field.

How to copy rich text from one Textfield to another Text field?

Steps:

• Get the content out of first text field by this java script

txtInputTextArea.value.exData.saveXML();

• Set that value in the destination Textfield’s exData property.

txtOutput1.value.exData.loadXML(userEnteredRichText,1,1);

Scenario 2: We need to pre-populate the form and the rich text data is not typed in (received from web service call or out of database etc..)

How to set rich text data into a Textfield?

Steps:

• Receive the markup data. eg. Hi <b>John</b>,<br/>Please find application-<i>111</i> details below.
• Have exData ‘envelope’ ready in your form and inject the received markup data. (You may have to replace &lt; &gt; values with < , > if received data is having that)
• set the ‘envelope’ + data into Textfield’s exData element.

txtOutput1.value.exData.loadXML(cleanedValue,1,1);

Note:

What is ‘envelope’ which is mentioned in this example/blog entry?

I mentioned ‘envelope’ in Scenario 2 explanation which is something that allows me to insert markup data in a form that Textfield is expecting for rich text support.

What I have done in my sample (attached/linked below) is to have another Textfield storing this exData section with namespaces in it. This is what gets generated behind the scenes when user types the rich text content in Textfield.

I have a ‘ccc’ string in this whole block where the actual data(markup data) is needed for the Textfield to show that correctly.

So in my form script I use this ‘envelop’ to store the exData block and then via script I replace the ‘ccc’ value with the markup data that I receive. And then I use this merged xml block to set to the Textfield’s exData property.

Download Sample implementation:

Use this PDF file that has both of these scenarios implemented as a sample.

Richtext in Textfield Sample

Advertisement