Stefan Cameron on Forms
Building intelligent forms using Adobe LiveCycle Designer

Seeing the Entire Value

I’m sure many of you out there have run into problems with fields on printed forms where the value entered in the field was too long to fit within the field’s visible area. The result is a black “+” sign on the lower left corner of the field — not much help in reading the entire content when it’s printed and you can’t scroll anymore:

What if there was a way to configure the field so that the entered value’s font size would automatically shrink to fit the value within the field’s visible area (down to a certain limit)? Of course, it’s possible the text may end-up too small to read without a magnifying glass but the entire content would be printed nonetheless (as long as the minimum font size wasn’t hit):

The trick here is to set the field’s value font to a size of zero (0) but it’s not as obvious as it may seem…

In Designer, there are two ways to do this:

The first is to use script in the field’s Initialize event (FormCalc in this case but JavaScript would do just fine too):

$.font.size = "0pt"

The second is to use the Font palette. In this case, however, only the value font’s size may be set to zero. Attempting to set the font size for the caption (or the caption and value combined) to zero won’t work. To specify the value font only, use the Selector widget at the top (highlighted in green on the image below) and pick the Edit Value item. Then, set the font size to zero (highlighted in yellow).


Posted by Stefan Cameron on July 26th, 2006
Filed under Designer
Both comments and pings are currently closed.

34 Responses to “Seeing the Entire Value”

  1. Zack on July 28th, 2006

    Hi again Stefan,

    I’ve got another unrelated question you might be able to answer. I’m working with a signature field and want to hide it if it’s signed, but make it visible if it’s not signed. I already know how to hide and show, and I’ve seen topics on the forums for checking to see if the signature field is signed, but they all use something like:

    var f = event.target.getField(“form1.subform1.signaturefield1″);

    They then check the status or the signatureInfo of this variable to make sure it’s greater than 2. (The defaults are set up so that 1 and 2 are invalid signatures, while 3 and 4 are valid). This seems to work fine for them, but I haven’t been able to even use the event.target.getField function. It just doesn’t show up in the list of fields and functions when I hit dot after target.

    Maybe they’re using FormCalc whereas I’m using javascript; I don’t really know. Any ideas or alternative solutions? Thanks,

    -Zack

  2. Stefan Cameron on July 28th, 2006

    Zack,

    What they’re doing with the event.target.getField method is accessing the underlying AcroForm Field Object for the XFA field by asking the Acrobat Document (event.target) for the AcroForm Field that matches the fully-qualified SOM expression they specify. I talk about this stuff in my earlier posting on AcroForm Objects.

    The reason why it may not be working for you is because you aren’t using a fully-qualified SOM expression to address your signature field. Assuming you have a simple object hierarchy on your form, the fully-qualified SOM for the signature field you wrote would actually be like this:

    “form1[0].subform1[0].signatureField[0]”

    Giving that to event.target.getField should get you an AcroForm Field object from which you can call the signatureInfo method in order to get the Acrobat SignatureInfo object which represents the signature. This object would then give you the information I think you’re after.

    To help you get the correct fully-qualified SOM expression for any object on your form, you can use the code from my AcroForm Field Name Generator post.

    Last of all, JavaScript must be used when accessing the Acrobat API. The reason why you don’t see a listing for “getField” when you add the dot (“.”) after “event.target” is because the Object Assist window you get in only programmed to display XFA-related methods and properties. Since the “getField” method is a property of the Acrobat Document object, it doesn’t show-up in the list — hence my post on AcroForm Objects, which I encourage you to read.

  3. Thompson on August 2nd, 2006

    Hi

    I’m trying to design the form for mail-merge function, but I’ve a problem. How can I control the length of sentence based on text field with pre-populated data (retrieve frm DB)?

    For example, the variables (text fields) are within the sentences of a paragraph, can the length of the sentences in letter paragraph be adjusted to fit after the pre-population of textfields?

    e.g.
    In design-time:
    “Forms have proven their flexibility in the %TF%. They are a familiar paradigm from the physical world, and it’s easy to structure form entries as machine-readable data.”

    Expected in run-time:
    “Forms have proven their flexibility in the physical world. They are a familiar paradigm from the physical world, and it’s easy to structure form entries as machine-readable data.”

    Since the DB field of the variable is varchar2(50), but I can’t set the textfield width equal to 50. Otherwise, many space would append to the the above “physical world”.

    Thanks

  4. Stefan Cameron on August 2nd, 2006

    Thompson,

    I think what you need to use is a Floating Field inside your paragraph.

    Floating Fields are typically used inside static text in order to inject values into a paragraph, for example, like the current date, a page number, etc.

    It’s also possible to bind a Floating Field to a data node in a data connection — which is exactly what you need to do since the data for the text that replaces the “%TF%” place-holder in your paragraph comes from a database.

    You would just need to place a text object on your form, set its text to be the paragraph you quoted (without the “%TF%” place-holder) and, once you’ve positioned the insertion cursor where the “%TF%” place-holder would go, insert a Float Field using the “Insert | Floating Field” top-level menu option.

    At this point, your paragraph will look something like, “… proven their flexibility in the {Text Field}. They are a…” Notice a text field has been inserted as a Floating Field inside the paragraph. Now, set the text object’s width and/or height to be expandable using the Layout palette so that if the inserted word should cause the text to reflow, the object’s boundaries will grow to accommodate the new length of the paragraph.

    Finally, select the Floating Field either by highlighting it in the paragraph or by selecting it in the Hierarchy palette (named “TextField1″ by default) and bind it to the proper data node in your data connection to your data base.

    When you preview the form, the Floating Field’s value should be set to the value from the data connection and the paragraph should read, “… proven their flexibility in the physical world. They are a…”

    To help illustrate this concept, I’ve created a little sample form which uses data from an XML file to achieve the same thing:

    Download Sample [zip]

    Note: If you open this form in Acrobat, don’t forget to import the data into the form using the options under the “File | Form Data” menu.

  5. Cliff Malone on October 29th, 2006

    Hi.
    I am a retired attorney that now has a web site that sells legal forms in pdf format. After purchase, test is typed by the user into field boxes and I want them to be expandable or shrinkable depending on how much text is inserted. In many legal documents, it is not acceptable to have blank lines and spaces. Is there an Adobe program or other software program that will do this? Remember the user will not tolerate anyting other than a simple and automatic procedure. For example, this final product would not be accpetable: “___Last Will of John Smith___”. It would have to shrink to fit as: “Last Will of John Smith”. Any thoughts? Thanks. Cliff Malone.

  6. Stefan Cameron on October 31st, 2006

    Cliff,

    I think what you’re looking for is something slightly different from what I’m talking about in this post.

    XFA has a property you can specify on fields that says that their width and/or height is expandable. If you put a text field on a form and set its width to be “expand to fit” using the Layout palette, the field’s content area (where you enter its value) will automatically be extended to fit the value you enter into it.

    If you make the content area 1 inch wide and then enter “Last Will of John Smith” into it, assuming this takes more than 1 inch to display, the field will be extended just wide enough to fit the entire value completely.

  7. Eric on November 1st, 2006

    I’m trying to create a text field in a html form. Currently I have This retrieves the exact contents of the field. Is there a way where a user can type a part of the data and still retrieve the whole thing? Thanks Eric

  8. Stefan Cameron on November 2nd, 2006

    Eric,

    Just for clarity, are you using LiveCycle Forms to render an XDP to an HTML document or is this just pure HTML you’re trying to do?

    Personally, it sounds like just pure HTML and you seem to be looking for a way to do some sort of word completion as a user starts entering a value into a text box.

    Is that right or am I totally missing the boat?

  9. Charles on November 6th, 2006

    Hi,

    I have a question about floating fields. Is it possible to dynamically change the text in a floating text field without linking to an external datasource, such as an XML file? In short, I want to run this script on the click of a button.

    form1.mySubForm.myFloatingTextField.rawValue = “Text copied from a non-floating text field.”;

    My goal is to allow the user to change the text in floating text fields by entering info in non-floating text fields and clicking a button. Thanks!

  10. Stefan Cameron on November 7th, 2006

    Charles,

    This is certainly possible but there are three very important things you need to know in order to get this to work properly:

    1. Floating fields are, by definition, hidden fields which are referenced by static text. That means that when you insert a floating field into a text object, an actual text field gets inserted into the form. If you look at the hierarchy tree in the Hierarchy palette after you insert the floating field, you’ll find an object with a name similar to “TextField”. You can change the name if you wish (e.g. to “myFloatingTextField”) to make it easier for writing scripts.
    2. Since floating fields are hidden (and should remain hidden), changing their value at runtime with script such as the one you suggested won’t trigger a repair to the form’s layout (because hidden objects don’t usually need to be rendered). Therefore, after setting its value, you must force the form to be re-rendered using the

      xfa.layout.relayout()

      statement (which works in both FormCalc and JavaScript). (The reason it works with data binding is because data binding generally occurs prior to the form being rendered so the floating field’s value shows-up correctly from the start.)

    3. You must preview and save your form as a dynamic form (e.g. “Acrobat 7.0.5 Dynamic PDF”) in order to be able to modify the content of a text object. In static PDF forms, text objects are rendered directly to the canvas as artwork and therefore cannot be modified as opposed to being actual objects in dynamic PDF forms.
  11. Joseph Moffatt on March 7th, 2007

    Hi Everybody,

    Are there any other examples of floating fields out there?

    All I want to do is reproduce a text-field value from one page within a paragraph on a second page.

    Is it possible to do this:

    1) character by character? As the user inputs a character in the text field, it is reproduced within the paragraph?
    2) on mouseExit? When the user exits the text field, the value is reproduced within the paragraph?
    3) on submission? The value is reproduced within the paragraph when a submission button is clicked?

    Thanks in advance.

  12. Stefan Cameron on March 14th, 2007

    Joseph,

    Displaying a value in a floating field at runtime is definitely possible.

    Unfortunately, I believe there’s a bug with floating field rendering where you must explicitly call

    xfa.layout.relayout();

    after setting a floating field’s value in order to get the new value to be displayed within the text where the floating field is referenced. In my opinion, this update should occur immediately and shouldn’t require the entire form’s layout to be updated either.

    To update a floating field’s value on field’s mouse exit event, all you need is the following script in the field’s MouseExit event (although I would recommend using the Exit event instead since this also covers the user hitting the Enter key while focus is still in the field in order to commit its value as well as covering the Tab key when tabbing to the next field):

    FloatingField.rawValue = this.rawValue;
    xfa.layout.relayout();

    Note that the above script is in JavaScript but could be translated to FormCalc as well.

    In order to set a floating field’s value on the click of a button (could be regular or submit type), it’s just as easy: Just use the same script as above but place it in the button’s Click event.

    Finally, because of the fact that xfa.layout.relayout() must be called after an update to a floating field and that calling this method causes text in the field in which you’re entering characters to be highlighted, it’s not possible to update the floating field’s value as characters are entered. Essentially, you would only ever see the last character you typed.

  13. Joseph Moffatt on March 16th, 2007

    Many Thanks Stefan.

    I’m getting to grips with floating fields now.

    One thing I noticed is that if a value is entered into a text field and then that field is hidden using the presence property, the value in the associated floating field is not hidden with it.

    Is there a simple way to resolve this?

    Thanks again.

  14. Stefan Cameron on March 19th, 2007

    Joseph,

    You’re very welcome!

    Unfortunately, there’s no simple way to resolve the behaviour you’re observing.

    Floating Fields are, by definition, hidden fields which are referenced by text objects (<draw> nodes in XFA).

    Text objects only display the value of Floating Fields which they reference and therefore don’t have any dependence on those fields’ presence types (e.g. visible, invisible or hidden).

  15. Jim Garner on April 25th, 2008

    Can you point me in the right direction?

    I have a wordy contract that the boss would like to see automated. There are key areas of the contract that will change from client to client.

    The rub is that when a field has just a little text in it the flowing text of the paragraph should close-up any space after the entry. Same for when a lot of text is inserted into the field… the rest of the flow should move to accommodate the space of more entered characters.

    I have attempted in LiveCycle to use a size 0, and have tried to have western flowing of subforms, etc…. but the boss wants the static text and the text entered into the fields to look as if it was just inserted onto the line using MS-Word… No font changes or line position changes.

    What is the best way to go about this please?

    PS. Great info here. Thanx!

  16. Stefan Cameron on May 1st, 2008

    Jim Garner,

    I’m glad you find my blog useful!

    I think what you need is to set the field’s height and/or width to expand to fit the entire value.

    As for the following:

    I have attempted in LiveCycle to use a size 0, and have tried to have western flowing of subforms, etc…. but the boss wants the static text and the text entered into the fields to look as if it was just inserted onto the line using MS-Word… No font changes or line position changes.

    I’m not sure I understand. Perhaps setting the field’s value type to “read-only” via the “Object palette > Value tab > Type property” would do the trick?

  17. Diane on February 6th, 2009

    I am using the floating field option in my form. however, when i go to view my form each of the floating fields have duplicated and are showing other places on the form, mainly at the top of the page. where I initially use the floating fields works awesome. I just need to get rid of the duplications.

  18. Stefan Cameron on February 8th, 2009

    Diane,

    Whenever you add a floating field to a text object, Designer creates a hidden field as a sibling to that text object which is the actual floating field (the text object just displays its value at the location you inserted the floating field). It’s possible those hidden (floating) fields may have become visible somehow. You could try selecting them and hiding them by setting the “Object palette > Field tab > Presence property” to “Hidden (exclude from layout)”.

  19. Khalid on March 11th, 2009

    I used the Font =”0″ method and it seems to work as I am entering text into the field but when I tab away from the field it cuts off the text and add the “+” symbol to the field to indicate more text. Also printing the form cuts off the text and shows the “+” symbols instead of printing the entire form.

    Any idea why this is?

    I am using LiveCycle Designer 8.0

    Thanks.

  20. Stefan Cameron on March 20th, 2009

    Khalid,

    It sounds like whatever you did to set ‘Font = 0′ didn’t work. To make it work, either set the value font size of the field to zero (as indicated in my post) or go to the XML Source tab, select the field in the Hierarchy palette so scroll quickly to it in the source and set its value font size to zero like this:

    <field>
        ...
        <font face="Myriad Pro" size="0"/>
        ...
        <caption>...</caption>
        ...
    </field>

    Note that you need to set the size attribute on the font node which is a child of the field node, not the font node inside the caption node (inside the field node).

  21. Teresa Kong on June 1st, 2009

    I have the same question as Jim (Post #15).

    I have a loan agreement which has many clauses and paragraphs in the document. The users would like to be able to insert text in a dynamic text field and have the paragraph to expand/shrink according to the amount text entered within… without leaving spaces making the document looking unprofessional.

    Is there a way for the text to expand or move dynamically with the text fields? or a way for users to type directly into a floating field within a paragraph?

    Your help is appreciated. Thanks.

  22. Stefan Cameron on June 8th, 2009

    Teresa Kong,

    As I suggested to Jim, you should be setting the field’s height to expand to fit the value that’s typed into it.

    Does that not solve the problem? If not, I’ll need more detailed information on what the formatting problem is.

  23. Kapil on June 18th, 2009

    I have a requirement where there is a form with some static text in it..It will open up in a Browser window and End user should be able to edit the static text…there are certain values which will be fetched from DB at runtime and hence I thought of using FLoating field for them….the issue is that how can i put together editable text and floating fields together..i thought of using a text field object and to hide its apperance and border properties but not sure what will happen if the user enters the text to the end of line ,will the floating field value will shift itself or the text is overlapped.

  24. Ebs on June 24th, 2009

    Hello, I have my field set to 0 so the text will auto resize if the user enters alot of characters BUT I would also like the autosize font to start at around font size “10″ as default – until the autosizing comes into effect.

    My form looks really weird as some fields have a really big font when only a few characters are entered and alot smaller font when alot of characters are entered. The text on the form is completely disproportionate to each other.

  25. Stefan Cameron on June 26th, 2009

    Kapil,

    While Designer doesn’t let you do it easily, you can actually put a Floating Field Reference inside rich text inside a text field which permits text entry at runtime (in Acrobat/Reader). When you type in the field, the value from the floating field is treated as a single character which flows with the text and can also be deleted (after which the reference is lost, at runtime, because it’s no longer part of the text field’s data).

    We do this as part of the Correspondence Generation Building Block within the Correspondence Management Solution Accelerator.

    Try the following steps:

    1. Insert a new text field. Set its “Object palette > Field tab > Field Format property” to “Rich Text” and give the field a default value (anything).
    2. Insert a new text object. While in edit mode inside the new text object, choose “Insert menu > Floating Field”. Designer creates a new hidden text field and inserts a reference to it inside the text object.
    3. Switch to XML Source view (“View menu > XML Source”) and select the new text object in the Hierarchy palette in order to find it in the source.
    4. Look inside for the //exData/body node. This will contain the XHTML (rich text) mark-up for the text object, including a span node that looks like this: <span xfa:embedType=”uri” xfa:embedMode=”raw” xfa:embed=”#floatingField000041″/>. This is the Floating Field Reference to the new hidden text field that was created when you inserted the floating field in a previous step. Select the span node and copy it.
    5. While still in XML Source, select the text field you inserted (not the Floating Field text field that Designer inserted) from the Hierarchy to jump to its mark-up and look for the //value/exData/body. That’s the XHTML mark-up for the text field’s rich text value. Scroll to the location, in the XHTML, where you want the floating field value to show-up and paste the Floating Field Reference mark-up you copied earlier.
    6. Switch back to Design View and you should see something like “{TextFieldName}” inside the text field’s content area at the location within the text where you pasted the reference.
    7. Give a value to the hidden text field (the actual Floating Field).
    8. Preview the form. You should see the value of the Floating Field inside your text field.

    Now if you want a value from a database to show-up inside your text, just bind the hidden Floating Field (text field) to a node inside an ODBC data connection.

  26. Stefan Cameron on July 8th, 2009

    Ebs,

    Sounds like you would be better-off making the fields expand to fit their value.

  27. Mike on July 23rd, 2009

    Stefan,

    I converted an Acrobat form (that uses font size of auto on several fields) to a static XDP. Changed these fields to use a 0 font size and everything works fine in designer. Unfortunately the final version of the form is rendered server-side and it appears that LiveCycle ES rendering is unaware of this work-around. Any ideas? Also, this is a very busy standard financial form with lots of horizontal and vertical lines that all has to fit on one printed page, so horz and vert expansion is impossible.

  28. Stefan Cameron on July 29th, 2009

    Mike,

    I’m afraid the zero font size may be something only supported by Acrobat/Reader which means when rendering the form to a static PDF on the server, you won’t get that behaviour. Also, depending on how and when the behaviour (of shrinking the text to fit within the field’s content area) takes place, it’s possible that Acrobat/Reader is required in order to achieve it and Acrobat/Reader doesn’t come into play on the server.

    Since you cannot let fields expand to fit their values, I would suggest you lower the font size and set the field’s “Object palette > Field tab > Limit Length to Visible Area property” to make sure users can’t enter more text than can visibly fit within the field.

  29. Cone on November 12th, 2009

    Hi Stefan,

    I have a similiar problem like EBS (24.):
    *******
    Hello, I have my field set to 0 so the text will auto resize if the user enters alot of characters BUT I would also like the autosize font to start at around font size “10? as default – until the autosizing comes into effect.

    My form looks really weird as some fields have a really big font when only a few characters are entered and alot smaller font when alot of characters are entered. The text on the form is completely disproportionate to each other.
    *******

    I have a also field with text “autosize” and want to combine it with a max/min fontsize. The result should be that the textsize shrinks till a defined size, based on the fontsize, was reached.

    Expanding to fit is not a solution, because there is now space to resize the form field himself.

    So, is it possible to combine autosize with a max/min fontsize?

  30. Stefan Cameron on November 19th, 2009

    Cone,

    Unfortunately, I don’t believe it’s possible to do what you ask. When you set the font size to zero, Acrobat/Reader manages the font size for you.

    If you have a compliant form that can’t allow the field to grow, you might want to consider this solution which shows how to overflow the text onto a second field on another page in the form (e.g. an appendix page of some sort).

  31. Susila on December 30th, 2009

    Hi Stefan,

    How to get the dynamic field values in jsp page using servlet response while clicking the button on the form?

  32. Stefan Cameron on January 5th, 2010

    Susila,

    It sounds like you want to do something similar to what I describe in my tutorial on testing HTTP submit buttons

  33. Brad on January 8th, 2010

    Hey Stefan,

    I’m attempting to change the displayed/printed value in a drop down list to the value only, and not the entire text..

    In my list, I have:

    01:Daylight
    02:Dawn
    03:Dusk
    04:Night

    I would like the form to present the full-text and numbers to the user, but once selected, only display and print the number (value).

    Any ideas on how to make this work?

    Thanks!
    Brad

  34. Stefan Cameron on January 12th, 2010

    Brad,

    I would suggest you use the list API methods to dynamically change the text value associated to the selected item when the selection changes (in the Change event).