Change color of part of text field.

New Here ,
Apr 03, 2019

Copy link to clipboard

Copied

I am working with text boxes, I have already run calculation scripts to return a value based on other field selections. Those values are all being returned correctly, however based on the nature of the form some of the values returned include the word "and" while others may include the word "or" the text color for the entire field is currently blue but I would like to bring attention to those words "and"/"or" by either assigning them a different color or bolding them.

Example:

MTH 35 - Intermediate Algebra AND MTH 123 - College Algebra and Trigonometry

I want them to stand out from the rest of the text. I don't know if this is possible, I imagine it could be a validation script or something but I am not sure how best to set it up.

Any help would be great, I've tried reading documentation but I haven't found anything that similar to what I want to do.

Thanks in advance!

TOPICS
Acrobat SDK and JavaScript

Views

162

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Change color of part of text field.

New Here ,
Apr 03, 2019

Copy link to clipboard

Copied

I am working with text boxes, I have already run calculation scripts to return a value based on other field selections. Those values are all being returned correctly, however based on the nature of the form some of the values returned include the word "and" while others may include the word "or" the text color for the entire field is currently blue but I would like to bring attention to those words "and"/"or" by either assigning them a different color or bolding them.

Example:

MTH 35 - Intermediate Algebra AND MTH 123 - College Algebra and Trigonometry

I want them to stand out from the rest of the text. I don't know if this is possible, I imagine it could be a validation script or something but I am not sure how best to set it up.

Any help would be great, I've tried reading documentation but I haven't found anything that similar to what I want to do.

Thanks in advance!

TOPICS
Acrobat SDK and JavaScript

Views

163

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 03, 2019 0
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

This can be done with Rich Text. 

Look up the "field.richValue" property and the "Spans" object in the Acrobat JavaScript Reference.

It's best to do this in the same calculation script that creates the text. But it could be done by a validation script.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
New Here ,
Apr 03, 2019

Copy link to clipboard

Copied

This is an area I am largely unfamiliar with.

This is what I have:

//

var l = this.getField("MTH Courses");

var spans = l.richValue;for ( var i = 0; i < spans.length; i++ ){if( spans.text = " AND " ){spans.textColor = color.red;spans.underline = true;}}

l.richValue = spans;

//

The field that the text appears in is titled "MTH Courses" which is where I want the script to look. I then want the script to look for the word " AND " and change that word to red and underlined.

How far off am I? I'm embarrassed to know.

Thanks for the direction Thom.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

You're not close, but moving in the right direction.

If a the "field.value" property is set, then the field has one span.  You need to parse the text to find the "And" and "Or" bits, then put it all back together as spans.

Something like this:

var l = this.getField("MTH Courses");

var cMasterSpan = l.richValue[0].toSource();  // Get the JSON for the basic span

var aWords = l.value.split(" "); // This breaks the raw string into words

// Build a list of locations for the highlight words

var aIdxList = [];

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

{

   if(/(and)|(or)/i.test(aWords)) aIdxList.push(i);

}

Now you have a list of words, a list of indexes into that list for each highlight word, and a master template for the spans.

Just walk the list of indexes to build a set of spans.

This code assumes a single line where the words are separated by spaces. I haven't tested the code, so you'll need to make sure there are no syntax errors.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
New Here ,
Apr 03, 2019

Copy link to clipboard

Copied

// Build a list of locations for the highlight words

var aIdxList = [];

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

{

   if(/(and)|(or)/i.test(aWords) aIdxList.push(i);

}

This is where I became completely lost. I am very novice when it comes to this stuff. I have almost no experience with spans or objects. What do you mean when you say to build a list of locations? and the if statement at the end I don't understand.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
Adobe Community Professional ,
Apr 03, 2019

Copy link to clipboard

Copied

This is a somewhat complex task.  It's not easy.

So the strategy I've outlined breaks the sentence into a list of words. The task is to identify the specific words that need to be highlighted. To do the identification I've used a regular expression. Here's an article on the topic.

https://acrobatusers.com/tutorials/text-matching-regular-expressions

I developed this strategy for efficiency. It results in the fewest number of spans. But here is a more straight forward method that makes every word a span

var l = this.getField("MTH Courses");

var cMasterSpan = l.richValue[0].toSource();  // Get the JSON for the basic span

var aWords = l.value.split(" "); // This breaks the raw string into words

var aSpans[], oSpn;

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

{

   oSpn = eval(cMasterSpan);

   oSpn.text = aWords + " ";

   if(aWords == "AND" || aWords == "OR")

       oSpn.textColor  = color.red;

   aSpans.push(oSpn);

}

l.richText = aSpans;

Again, I have not tested this code. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2019 0
New Here ,
Apr 04, 2019

Copy link to clipboard

Copied

Thanks for the extra help Thom. I understand most of the code, the spans still confuse me. There is a syntax error in the code somewhere around here I think:

//

var aSpans[], oSpn;

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

{

Do you know if there is somewhere I can maybe pay to have this task completed? I also want to have a save script built that I would talk about, but I don't know if services like that exist without paying through the nose. I don't have a lot to spend on it. Just trying to automate some of my work tasks.

Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

Use this:

var aSpans=[], oSpn;

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 1
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

Bernd Got it!!  I tested the code and there is one more error

The last line should be

l.richValue = aSpans;

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
New Here ,
Apr 05, 2019

Copy link to clipboard

Copied

The code seems to have no more errors should this be a calculation script or validation? I've placed it in the text field as a calculation along with my current script but it isnt working.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2019 0
Adobe Community Professional ,
Apr 05, 2019

Copy link to clipboard

Copied

I wrote the initial code as a generic script script.  In it's current form it won't work as either a calculation or validation because the first 3 lines acquire the values directly from the field.

A validation script is a good place to put it, so that its a separate modification to the entered or calculated text. To do this the value needs to be acquired through the event object. Here's the code.

var cMasterSpan = event.richValue[0].toSource();  // Get the JSON for the basic span

var aWords = event.value.split(" "); // This breaks the raw string into words

var aSpans=[], oSpn;

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

{

  oSpn = eval(cMasterSpan);

  oSpn.text = aWords + " ";

  if(aWords == "AND" || aWords == "OR")

      oSpn.textColor  = color.red;

  aSpans.push(oSpn);

}

event.richValue = aSpans;

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2019 0