Bold, Underline and format text in javascript

Report · Sep 16, 2024

Good morning all , I have the below script and would like to know how , if at all possible, if i can underline and bold some of the information in the JS below as well as formatting the phone numbers to read "(123) 456-7890" or similar . As of right now the phone number are reading" 1234567890"

Currently the scrupt is triggered via a button commant

JS:

(I have bolded and underlined what i am trying to accomplish in the script)

Thank you for any help or guadance you are able to provide.

//

var w1 = this.getField("DD_Writer").valueAsString;
var w2 = this.getField("Calc_WriterPosition").valueAsString;
var w3 = this.getField("Calc_WriterPhoneNumber").valueAsString;
var w4 = this.getField("Calc_WriterEmail").valueAsString;
var s1 = this.getField("DD_Secondary").valueAsString;
var s2 = this.getField("Calc_SecondaryPosition").valueAsString;
var s3 = this.getField("Calc_SecondaryPhoneNumber").valueAsString;
var s4 = this.getField("Calc_SecondaryEmail").valueAsString;
var m1 = this.getField("Date_LetterDate").valueAsString;
var m2 = this.getField("DD_SMQuarter").valueAsString;
var m3 = this.getField("DD_SMYear").valueAsString;
var m4 = this.getField("Date_DocDueDate").valueAsString;
var r = this.getField("Calc_Text");

r.value = "\n" + m1 + "\n\n\nDear, Participant" +

"\n\nI hope this letter finds you well." +

"\n\nEach quarter NA is required to collect receipts from each participant for services you have received outside of NA. This includes billing statements from service providers such as doctors, dentists, and hospitals. From insurance companies it is called an “explanation of benefits”. If you have an in home care giver or COPES worker, we need a current award letter." +

"\n\nPlease reach out to any service providers you have utilized in the months of " + m2 + " " + m3 + " and request receiptsfor the services you used." +

"\n\nI have included a letter for you to show your provider in an effort to collect the documentation we need." +

"\n\nDue to privacy laws, NA cannot request this information directly from the provider. However, we want to support your effort as much as possible" +

"\n\nAll documentation is due to " + s1 + " ,or myself by " + m4 + "." +

"\n\nIf you need any assastance or have questions about what services qualify please reach out to us. " + s1 + " can be eached at " + s4 + " or by phone at " + s3 + "." + "I can be reached at " + w4 + " or by phone at " + w3 + "." +

"\n\nBy meeting our service match obligation, we can ensure funding for our housing voucher. We can do this together!" +

"\n\nIn Gratitude," +

"\n\n\n\n" + w1 + "\n" + w2 + "\nNA" + "\nCell: " + w3;

//

Please let m eknow if you would like a copy of my file and i can try and send it.

Report · Sep 16, 2024

Is the text in a form field? If so, you have to set the field to allow Rich Text Formatting in the options tab and then create an object for all the different blocks of text.

Report · Sep 16, 2024

Yes it is , the text populates in "Calc_Text". I understand emabling RT Formating but im not quite following what you mean by "create an object for the text "

Report · Sep 16, 2024

This will get you to m2 + " " + m3. Every time the text changes style you have to create another object in the spans array and set the parameters of the style. Look up richvalue in the Acrobat JavaScript Reference. Bold is a font weight of > 700. Enter this custom calculation script in your field:

event.target.richText=true;
var m1 = this.getField("Date_LetterDate").valueAsString;
var m2 = this.getField("DD_SMQuarter").valueAsString;
var m3 = this.getField("DD_SMYear").valueAsString;

var spans = new Array();
spans[0] = new Object();
spans[0].text = "\n" + m1 + "\n\n\nDear,  Participant" +
"\n\nI hope this letter finds you well." +
"\n\nEach quarter NA is required to collect receipts from each participant for services you have received ";

spans[1] = new Object();
spans[1].text ="outside ";
spans[1].fontWeight=900;

spans[2] = new Object();
spans[2].text = "of NA. This includes billing statements from service providers such as doctors, dentists, and hospitals. From insurance companies it is called an “explanation of benefits―. If you have an in home care giver or COPES worker, we need a current award letter." +
"\n\nPlease reach out to any service providers you have utilized in the months of ";

spans[3] = new Object();
spans[3].text = m2 + " " + m3;
spans[3].fontWeight = 900;
spans[3].underline = true;

event.richValue=spans;

Report · Sep 17, 2024

Thank you for this! This will be useful for me with another project. However, instead of creating spans throughout, is there a way to simply just underline or italicize the text? Like for example:

// Custom Format script for text field
if (!event.value) {
event.value = "I would like to make this text italics";
} else {
event.target.display = display.visible;
}

I'm borrowing a previous answer posted elsewhere regarding creating disappearing instructional text fields and would like to go the additional step of italicizing it. Not the text that the user enters into the field, just the disappearing text. If possible, avoiding the Rich Text format requirement.

Thanks!

Report · Sep 17, 2024

Rich text formatting is the only way to do this. Without the rich text option the entire contents of the field must be formatted the same way. With rich text formatting selected, and text entered, you can select portions of the text and format them from the rich text formatting toolbar which will appear when you have text in the field selected and you press Ctrl + e. This issue here is that you will lose the formatting when the user modifies the text in the field.

To use your example, you can manually set the field to Rich text formatting then enter the following custom format script:

if (!event.value) 
{
var spans = new Array();
spans[0] = new Object();
spans[0].text = "I would like to make this text ";

spans[1] = new Object();
spans[1].text = "italics";
spans[1].fontStyle="italic";
event.richValue=spans;
} 
else 
{event.target.display = display.visible;}

Report · Sep 17, 2024

Thanks again! But I must apologize, I was meaning to make ALL the text italics. For some reason I only did it on italics though and that's my fault. Can I make "I would like to make this text italics" without going the span route?

Report · Sep 17, 2024

Actually, disregard my last reply. I was able to just modify this into a single span and use the fontstyle as listed. That works totally fine for me.

Thanks again for your help!!

Report · Sep 17, 2024

Thank you so much I have used the information you gave me and created the script below (WHICH WORKS) and placed it the custom format script of "Calc_Text" . Before using this script i was about to "generate" this letter with the use of a button "Bttn_GenerateLetter". Is there a way to trigger this script once the button is pressed ?

I have attacheed the file im working on for reference .

On a seperate note, i wanted to thank you and the rest of the communit for your help and support .

Report · Sep 17, 2024

Report · Sep 17, 2024

What do you mean by generate letter? Fill the form field instead of using the calculation script, or create an entirely new PDF of page?

Report · Sep 17, 2024

I am trtying to configure this form so that if the fields are empty then the letter will be completelt blank .

Plus i was hoping that the use of a button in someway would help to refresh the populated information if something needed to be changed .

Report · Sep 17, 2024

Change r.value to this.getField("Calc_Text").value in the button script. Are you trying to make the field empty if any of the input fields have not been filled. If so you would have to test the value of each input field and only fill the field if all of the input fields have values.

Report · Sep 20, 2024

Greetings again! I have noticed an issue, and I think I know WHAT is causing the problem but I don't yet know WHY.

The scripts I used based on what has been discussed here work great. But for some reason, when I enter text into the fillable fields that have the RTF enabled and the Script showing "Instructional Text", the instructional text reappears after I have input my own information into the field. If I click into the field again, my data is still there but when I click out, the instructional text reappears. I created a "CLEAR FORM" button and for reasons I'm not fully aware of yet, after I wipe the form using CLEAR FORM, I can input data into the fields with the instructional text and it does not reappear afterwards.

I feel like it has something to do with user data not being input as RTF when the form is opened and the user starts typing. But after using CLEAR FORM, the user field is set to RTF and now works correctly. Do I just need to set the user input as RTF automatically? I'm guessing that's something I would do in the script?

I added a screen recording of the issue below.

Hopefully I explained this without sounding insane. Any ideas though?

Thanks!

Report · Sep 20, 2024

What is your instructional text script and where is it?

Report · Sep 20, 2024

Here is the script

------------------------------

if (!event.value)
{
var spans = new Array();
spans[0] = new Object();
spans[0].text = "Product description goes here. Do not include the sales pitch"
spans[0].fontStyle="italic";
event.richValue=spans;
event.target.display = display.noPrint;
}
else
{event.target.display = display.visible;}

------------------------------------------------

I have the script in the "Custom Format" area.

Report · Sep 21, 2024

I don't quite understand the issue you're describing and the video doesn't help me because I don't know what's being done. The condition !event.value or event.value does not commit until a blur event (you leave the field, either by tabbing out of it or clicking somewhere else on the form). The instructional text will temporarily disappear when you click into the field so you can type whatever you want. Until the blur event that text is not committed. You don't really need rich text formatting for this field since the instructional text is all the same. You can simply have one font for the instructional text and another for user entered text like this (without RTF selected):

if (!event.value)
{

event.value = "Product description goes here. Do not include the sales pitch";
event.target.textFont="Helvetica-Oblique";
event.target.display = display.noPrint;
}
else
{
event.target.textFont="Helvetica";
event.target.display = display.visible;
}

Report · Sep 21, 2024

My apologies. What's being done is I'm simply typing into the field but when I click out of the field, the input text disappears and the Instructional Text reappears. However, the input text is still there because I can click back into the field and see it. But again, when I click out of gut field, Instructional Text reappears.

As I mentioned previously, I created a CLEAR FORM button at the top. If I use that to clear the form, this issue does not happen again. The Instructional Text disappears after input text into the field and it does not return.

I will give your suggestion a try but I'm still curious as to WHY this issue occurs but seems to fix itself after clearing the form.