Bold text dynamically in a text form field

[Xenocity]

I've created a form with a text field, lets call it Inbd_Data.

The text field pulls data from another source and populates it (i.e. the data is dynamic).

Example:

Name: Bob|Address: 234 Apple St.|Ste 230|

(yes, the data is pipe delimited and the field headers will always be the same [that's what I'm trying to bold])

I've been trying to write a script that will search the field for certain words and bold them. (i.e. "Name:" and "Address:" would be bold if found in the data).

I've seen people suggesting the use of spans but that doesn't seem to work for dynamic data. Any ideas?

[Thom Parker · Accepted solution]

Rich Text Spans are what you need. But they have to be defined dynamically. 

I don't know how you are applying the data to the field. But lets say it's being applied by a script not on the field itself.

var theTextData = ... where ever it comes from ...

var aPieces = theTextData.split("|");  // Split on pipes

// Set all to spans

var aSpans = [];

for(var i=0;i<aPieces.length;i++)

{

   if(i)  aSpans.push({text:"|"});

  aSpans.push({text:aPieces});

}

// Set second bit to bold

aSpans[1].fontWeight = 800;

// Set rich text to field

this.getField("Inbd_Data").richValue = aSpans;

Be sure to set the field option to Allow Rich Text Formatting

[Xenocity]

I still can't quite get it to work.

I have a few follow-up questions and I guess more information that will maybe help you answer my question.

This is a unique scenario where my PDF form is uploaded into a software program that recognizes textbox field names, so I name my fields specifically (i.e. this field is called "Inbd_Data"). This program interacts with another software program using an API (I assume) to pull the data into the textbox field I created called "Inbd_Data". Unfortunately, I can't see how the data gets pulled into the field but as soon as I open the document in the program, the data is pulled and my java script manipulates what is contained in the field.

Currently, I have a simple custom calculation script running on the field:

event.value = getField("Inbd_Data").valueAsString.replace("|","\n");

This is simply replacing the pipe delimiters with a paragraph break. Anyways, I removed this script and tried adding your suggestion to get the bolding to work:

var theTextData = this.getField("Inbd_Data");

var aPieces = theTextData.split("|");  // Split on pipes

// Set all to spans

var aSpans = [];

for(var i=0;i<aPieces.length;i++)

{

   if(i)  aSpans.push({text:"|"});

  aSpans.push({text:aPieces});

}

// Set second bit to bold

aSpans[1].fontWeight = 800;

// Set rich text to field

this.getField("Inbd_Data").richValue = aSpans;

________________________________________________

Nothing occurs when I add this. Interestingly, if I change:

var theTextData = this.getField("Inbd_Data"); to

var theTextData = this.getField("Inbd_Data").valueAsString; then everything is removed from the field.

Thanks for your help/patience.

[Thom Parker]

The first line of code returns the field object, not the value, so your correction at the bottom of the message is correct.

Did you set the text box properties to allow Rich Text?

The code I provided sets the "richValue" property of the field to an array of spans.  This is the only way to make a section of the text bold.

But I noticed you say that:  "as soon as I open the document in the program".  Do you mean that after the processing that fills in the form fields, you open the PDF in Acrobat? Or in another PDF viewer?

The whole spans thing is Acrobat Specific.  Other PDF viewers are unlikely to support this script.

BTW: are there any errors displayed when you run the code?

[Xenocity]

Yes, the allow Rich Text is checked.

Hmmm, I have only been working with the document in acrobat but you raise a good point that even if I do figure out how to get the correct section bold, it may not work in the program used to view/edit the document if spans are not available.

No errors occur when I run the code.

Maybe there is a different way to address the issue. If each section I want is broken by a pipe delimiter, I could potentially set each separate value to a variable and add them to separate text boxes? I can remove the Header data from being included in the pipe delimited data (i.e. Name:, Address:, etc.) and Bold it on the form separately so I just have the stings of data (Bob|234 Apple St.|Ste 230)

Essentially, I'm thinking:

var theTextData = this.getField("Inbd_Data").valueAsString;

var aPieces = theTextData.split("|");  // Split on pipes

**This sets an Array of each pipe delimited section, right? (the number of values in my Array are constant)

so then I should be able to do something like

event.value = aPieces[1]

and repeat for each separate text box. Let me give that a try, an update to follow.

[Thom Parker]

You are correct about the more general solution, use separate edit boxes. 

I didn't mention before that I think using a calculation script is a bad idea. In fact, for initial development you should do this from the console window without any scripts on the PDF at all. The calc script runs so often that it may be screwing things up.

Then the script that you eventually use should be executed from a document script. and be setup in such a way that it only runs the first time after the form is loaded from your external application.

So let me repeat, Don't do this with a calculation script

[Xenocity]

I'm still a bit "green" with acrobat and javascript so this is really helpful. I opened up the console and ran the code there and I can see how that can be helpful.

I also noticed the console picked up the script running a number of times (i.e. now I can see what you mean with the calculation script).

For Document level Javascripts, do you have a good link to understand this better? I'm not sure exactly how to set this up, as I typically have run scripts off action items (mouse up, etc.). Do I create a function and then call it on document load...

I have much to learn..

[Thom Parker]

Just put the code in a document script, no need for a function.  But you do need a gating variable.  What I've done in other cases where the form is auto filled (and needs some scripting fixup) is to include a hidden field that is auto-filled with a known constant value. Check boxes are good for this. Then the document only runs if this value is set. And of course, the document script then clears the hidden field.

[Xenocity]

I've always used the Action items or calculate\validate section to add javascript; I'm struggling to move these scripts from the calculate section to the document level. I'm sure I'm missing something simple.

I tried viewing a few of your tutorials to see if I could take any clues but no luck.

The JavaScript Editor for the document begins with:

//-------------------------------------------------------------

//-----------------Do not edit the XML tags--------------------

//-------------------------------------------------------------

Do I need to add XML tags to get started (i.e <Acroforms> etc?)

Maybe there is some documentation I haven't come across...

Thanks for all the help!

[Thom Parker]

You've selected the "All JavaScripts". Don't use this item. Select "Document JavaScripts"

Here's an article, although it's horribly out of date:

https://acrobatusers.com/tutorials/js_document_scripts

Here's the Acrobat DC JavaScripts toolbar