Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

Textfield with instruction text (default) that is different from the final entered text font

Avatar

Level 1

I hope I can get across what I wish to do here. I have build a form in LiveCycle with textfields that give instruction to the user on what is required to be entered into that field. These instructions are in the textfield enter area and are over written  as soon as that textfield is opened. What I wish to have happen here is to have these instructions in a different font from what the final entered text will be. I have seen some forms with this feature where the text will not only be on a different font but color as well. I have not found a feature in "Action Builder" or other areas that will allow me to do what I require.

Art

1 Accepted Solution

Avatar

Correct answer by
Former Community Member

To add "sample text" in a text field, right-click on the text field and select Patterns > Display.

Check the "Allow Empty" box and enter your sample text.  Granted, it will be in the same font/default color as the text being entered; however, you can add a couple of Action Builder routines to change font colors, such as making the sample text a light gray and entered text as black.

To do that, three Action Builder routines are necessary: 1) Initialize the text field and set its font color to gray; 2) when text field is entered (i.e., cursor is placed in it), change the text field color to black; and 3) if the text field is empty, set the font color back to gray.

Using "Allow Empty" is different than adding a default value--default sets the actual value of the text field, whereas, displaying text when the field is empty does not alter the field's value whatsoever.

Action Builder will automatically write the JavaScript necessary to do those actions.  To see the script (and learn how to write script on your own), click on the text field and open the script editor window.  [If the script editor is part of the tool bar, just double-click on it and it will pop-out so you can expand the window.]  Click the drop-down arrow beside "Show:" and select "Events with Scripts".  Font colors "0,0,0" will be black and font colors "192,192,192" will be gray.  If you know a little JavaScript, you can also change the font itself by editing those Action Builder sequences.

BTW, this works for other types of entries too: numeric fields and custom fields (emails, phone numbers, SSNs).  Just set the sample display for the empty field to a sample of whatever you're expecting the user to enter.

View solution in original post

3 Replies

Avatar

Level 7

Hi,

A trick i have used for this is to place a text object under the textfield with the instruction text. Add code to the TextField so that when the field is entered, the text object below is made invisible. You might want to also put code in the TextField's exit property so that if the textfield is empty, the instructional text object is made visible.

By doing it this way, the text object can be formatted how you like.

Avatar

Correct answer by
Former Community Member

To add "sample text" in a text field, right-click on the text field and select Patterns > Display.

Check the "Allow Empty" box and enter your sample text.  Granted, it will be in the same font/default color as the text being entered; however, you can add a couple of Action Builder routines to change font colors, such as making the sample text a light gray and entered text as black.

To do that, three Action Builder routines are necessary: 1) Initialize the text field and set its font color to gray; 2) when text field is entered (i.e., cursor is placed in it), change the text field color to black; and 3) if the text field is empty, set the font color back to gray.

Using "Allow Empty" is different than adding a default value--default sets the actual value of the text field, whereas, displaying text when the field is empty does not alter the field's value whatsoever.

Action Builder will automatically write the JavaScript necessary to do those actions.  To see the script (and learn how to write script on your own), click on the text field and open the script editor window.  [If the script editor is part of the tool bar, just double-click on it and it will pop-out so you can expand the window.]  Click the drop-down arrow beside "Show:" and select "Events with Scripts".  Font colors "0,0,0" will be black and font colors "192,192,192" will be gray.  If you know a little JavaScript, you can also change the font itself by editing those Action Builder sequences.

BTW, this works for other types of entries too: numeric fields and custom fields (emails, phone numbers, SSNs).  Just set the sample display for the empty field to a sample of whatever you're expecting the user to enter.

The following has evaluated to null or missing: ==> liqladmin("SELECT id, value FROM metrics WHERE id = 'net_accepted_solutions' and user.id = '${acceptedAnswer.author.id}'").data.items [in template "analytics-container" at line 83, column 41] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign answerAuthorNetSolutions = li... [in template "analytics-container" at line 83, column 5] ----