RichText tricks for TextField in Designer

May 20, 2009 at 2:35 am 13 comments

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

Advertisements

Entry filed under: LiveCycle Designer, LiveCycle ES. Tags: , , .

Workspace URL parameters Styling in Task Instructions

13 Comments Add your own

  • 1. Amal Elaine  |  May 23, 2009 at 9:35 pm

    This is a really great post too. I can’t wait to see what you put together for the prepopulation we’ve been discussing in the livecycle google group!

    Reply
  • 2. Bob  |  June 9, 2009 at 5:50 am

    Do you know of a way to modify a standard text object — as opposed to a multi-line text field — to automatically break to subsequent pages if their is an overflow of content?

    I’m trying to create a contract with embedded fields, and it seems the easiest way is to use the text object as the primary body container. Of course my problem is that the text object doesn’t break despite its being contained within a flowing page and subform.

    Thanks.

    Reply
    • 3. pandyaparth  |  June 9, 2009 at 6:58 am

      Hi Bob,
      Did you try multi-line text field for display purpose? I’m thinking of trying out text-field that looks like text object to achieve what you need. You should change the appearance of that text field to look like a text object (with some background fill and removal of borders). Also make the text field to read only.
      Before you assign the text to this text field you should get the contract content with embedded field values. This will allow the lengthy contract details to break at proper location.
      regards,
      Parth

      Reply
      • 4. Bob  |  June 10, 2009 at 3:56 am

        Parth,

        Thanks for your quick reply. Last night I was so frustrated that I went to Adobe can came across LiveCycle Designer ES (I have been using 8.0), installed the trial product, and there were the check boxes I’d been looking for: “Allow Page Breaks Within Content” and “Keep with Next”

        The page break worked great when I added the text object to a new form. The PDF preview was great. So I saved the form as a dynamic PDF and everything is back to the way it was before—the text once again runs down page and gets lost below the footer and doesn’t break to the next page.

        Any ideas? I can’t be the only one with this problem, right?

  • 5. Bob  |  June 10, 2009 at 4:36 am

    OK, the solution to my last post was installing Adobe Reader 9.0. Of course the problem remains that earlier versions will not render the document properly. So in that sense the problem lingers.

    My latest quest will involve disabling the restriction on saving the form data in Reader 9.0.

    It’s always something…

    Reply
  • 7. E. Loralon  |  October 28, 2009 at 3:34 pm

    Hi Parth,

    I have a question regarding text formatting inside a text field on a LiveCycle designed form.

    Is it possible to use the tab key for indentation inside a text field on a form? I have some users, who have been using MS Word forms but now need to use a PDF for their task. They would like to be able to indent by pressing the tab key or any other way used for indentation.

    Reply
    • 8. pandyaparth  |  October 28, 2009 at 11:29 pm

      Hi,
      I thought that Ctrl+Tab would work but as the tab key is used to change focus between form fields there was no success with any other combination as well.
      At this point I can only think of putting 4(or more) spaces manullly to get some indentation.
      BTW, did you notice that Ctrl+E shows a cool text formatting toolbar when you have focus on a text field? The word users might like that…
      regards,
      Parth

      Reply
  • 9. Loralon  |  November 25, 2009 at 4:55 pm

    Thank you Parth,

    Yes, actually when I discovered the Ctrl+E I thought my problem was solved but the users want more features.

    So I proposed to do the following: add a word template to my form and create a button on the form to open the word document so that the users work from one form/location.

    II am currently able to achieve the above but the question is now to have another button on the form to print both the form and the attachment.

    So I was wondering whether you might be able to help me using JavaScript to create a button that will print the form and the attached document at the same time.

    Thank you in advance for your help.

    Loralon

    Reply
  • 10. Kim  |  November 22, 2012 at 3:16 pm

    Thank you Parth on this fine demonstration of the Rich text field. However it seems that I have struck some difficulties/challenges.

    1. it seems not to work if you place your TextField on a Master Page
    2. It seems like it is only working on Dynamic PDF’s

    Can you elaborate on these things? I am using LiveCycle ES3 – and I am trying to create a rich text field for the purpose of marking with TEST on printed forms.

    Reply
    • 11. pandyaparth  |  November 22, 2012 at 10:36 pm

      Hi,
      This will only work on Dynamic PDF form. As this requires the script to run.
      I can’t think of a reason why it won’t work on Master Page so try with dynamic PDF and it should work.
      cheers,
      Parth

      Reply
      • 12. Kim  |  November 22, 2012 at 11:24 pm

        I really agree with you, and it seems very strange to me as well.

        Here is my scenario:
        I have a Dynamic PDF form, which has one Master Page and a lot of repeating fields for invoice, task list and so on. I found out just now that your example works on the Master Page if the form is only on one page, then I get rich text in my text field. But if the number of lines in the invoice makes the form add an extra page I don’t get the rich text – then I just get the text without any formatting. Can you elaborate on why this might be?

        Sincerely
        Kim Christensen

  • 13. Kim  |  November 23, 2012 at 7:12 am

    I figured it out now – just to let you know that there is nothing wrong with your code as such.

    My code was built on the assumption that I could manage without having 2 Text Fields and just update and overwrite the one of them with the cleanedValue. This actually holds – if you don’t place the Text Field on a Master Page that can be be repeated. If you do this the code will be run several times and the second time it is run it won’t be formatted (the formatting is removed the first time the code is run).
    Thank you so much for answering the post and keep up the good posts coming :-).

    \Kim

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Recent Tweets

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Recent Posts

Feeds

The fine print!!

The views on this blog are my own and don’t necessarily represent my employer's views, strategies or opinions.

Pages

May 2009
M T W T F S S
« Apr   Jun »
 123
45678910
11121314151617
18192021222324
25262728293031

%d bloggers like this: