Adding Ghost Text to LiveCycle Designer forms

Avatar

Avatar

paulb14594402

Avatar

paulb14594402

paulb14594402

31-08-2016

Hi to all

i am new to coding and have been set a task of setting up a pdf form, but it requires ghost text to guide the users but also to allow them to type normal text when they fill in the form, so greyed out text for the ghost and black text for the completed field, but i have very little experience with coding and could do with some advice below is an examle of the text field i have in and would love to know what it is that i have to add to get this to work.

<field name="KnownMedicalConditions" y="76.2mm" x="66.675mm" w="127mm" h="6.35mm">

               <ui>

                  <textEdit>

                     <border presence="hidden">

                        <?templateDesigner StyleID aped0?></border>

                     <margin/>

                  </textEdit>

               </ui>

               <font typeface="Calibri" size="9pt">

                  <fill>

                     <color value="153,153,153"/>

                  </fill>

               </font>

               <margin topInset="0mm" bottomInset="0mm" leftInset="1mm" rightInset="1mm"/>

               <para vAlign="middle"/>

               <caption>

                  <font typeface="Calibri" size="9pt"/>

                  <para vAlign="middle"/>

               </caption>

               <validate>

                  <message>

                     <text name="formatTest"/>

                  </message>

               </validate>

               <assist>

                  <speak disable="1"/>

               </assist>

            </field>

            <?templateDesigner expand 1?></subform>

         <?templateDesigner expand 1?></subform>

      <subform w="576pt" h="756pt">

         <breakBefore targetType="pageArea" startNew="1"/>

         <draw name="G30" x="146.05mm" w="31.75mm" h="12.7mm" y="3.228mm">

            <value>

Accepted Solutions (0)

Answers (4)

Answers (4)

Avatar

Avatar

Magus069

MVP

Total Posts

1.0K

Likes

132

Correct Answer

150

Avatar

Magus069

MVP

Total Posts

1.0K

Likes

132

Correct Answer

150
Magus069
MVP

01-09-2016

Hi there,

I suggest you do not edit XML to put a ghost text for your textfield
instead modify its properties using the object's field properties..

In Design View, select the textfield and go in Object > Field Palette > Patterns...

Within Pattern Display, check Allow Empty's box, and enter the ghost text in the textbox below..

This will act as ghost text, if you want to change font's color to grey when empty,

you should initially set the font's color to grey,

when you enter the field change it back to black and

if you exit the field and the field's value is null, reset the color to grey.

I hope this will help!

Avatar

Avatar

holocronster

Avatar

holocronster

holocronster

15-05-2018

thanks! it's awesome!

Avatar

Avatar

tarekahf

Avatar

tarekahf

tarekahf

18-01-2018

Use the code sample below to implement Ghost Field (placeholder):

I hope this will be helpful.

//form1. # subform[0].TextField1::initialize - (JavaScript, client)

myTools.initGhost(this);

//form1. # subform[0].TextField1::enter - (JavaScript, client)

myTools.enterGhost(this);

//form1. # subform[0].TextField1::exit - (JavaScript, client)

myTools.exitGhost(this);

//form1. # variables[0].myTools - (JavaScript, client)

//Ghost field processing (placeholder)

function initGhost(theFld, ghostText) {

ghostText = ghostText || theFld.assist.toolTip.value;

theFld.format.picture = "null{'" + ghostText + "'}";

exitGhost(theFld);

}

function enterGhost(theFld) {

var oFill = xfa.form.createNode("fill");

theFld.font.nodes.remove(theFld.font.fill);

theFld.font.nodes.append(oFill);

theFld.font.posture = "";

}

function exitGhost(theFld) {

var oColor;

var oFill;

if (theFld.isNull) {

  oFill = xfa.form.createNode("fill");

  oColor = xfa.form.createNode("color");

  oColor.value = "192,192,192";

  oFill.nodes.append(oColor);

  theFld.font.nodes.remove(theFld.font.fill);

  theFld.font.nodes.append(oFill);

  theFld.font.posture = "italic";

}

}

Tarek

Avatar

Avatar

stephenf8734174

Avatar

stephenf8734174

stephenf8734174

04-10-2016

Hi, just found this answer. Great tip, exactly what I was looking for. Thanks.