• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Creating Javascript to conditionally format a fillable form field

New Here ,
Nov 10, 2021 Nov 10, 2021

Copy link to clipboard

Copied

Hi - I've created a PDF Form with Acrobat. I'm automatically filling the form fields with data from a SmartSheet.  I have some fields that I need to change the background fill color of depending on the content of the field, once filled. For instance, if the field value is "Green", I would want to change the background fill color of the field to Green, etc.

 

Would this be a Custom Format Script? It seems like it would be. 

Can someone provide some assistance on what this code would look like?  This is my first crack at using Javascript in Acrobat, so a bit lost.  Here is my first attempt:

var status = this.getField("Risk/Issue 1 - Status Color");
if (status.value = "Green")
status.fillColor = color.green

 

But that results in the following error:

InvalidSetError: Set not possible, invalid or unknown.
Field.value:2:Field Risk/Issue 1 - Status Color:Format

 

I seem to be stuck at the starting gate. Any assistance is appreciated.

 

Tony

TOPICS
Acrobat SDK and JavaScript

Views

386

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
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 11, 2021 Nov 11, 2021

Did you place the code above as a calculation script and added the doc-level command I provided? If so, after importing the data, save the file, close it and then re-open and the colors should change.

Likes

Translate

Translate
New Here ,
Nov 10, 2021 Nov 10, 2021

Copy link to clipboard

Copied

Ok, so I'm making some progress.  I've updated my Custom Format Script as below:

 

var status = this.getField("Current Status Color").value;

if (status == "Green") {
     event.target.fillColor = color.green;
}
else {
     if (status == "Yellow") {
          event.target.fillColor = color.yellow
     }
     else if (status == "Red") {
          event.target.fillColor = color.red
     }
     else if (status == "Blue") {
          event.target.fillColor = color.blue
     }
}

 

This "sort of" works. 

1)For the automated form fill from SmartSheet, it doesn't do anything.

2)However, if I open the PDF in Acrobat and test it by manually typing in the field, it will change color - BUT only once I click into the field. If I click out of the field, the background color goes back to transparant.

 

I'm not sure if the two behavious are related, but it seems probable.  Any suggestions on next steps?

 

Thanks,

Tony

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
community guidelines
Community Expert ,
Nov 10, 2021 Nov 10, 2021

Copy link to clipboard

Copied

Where does you use the 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
community guidelines
Community Expert ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

Move the code to be a calculation script and add the following command as a doc-level script (NOT inside a function):

this.calculateNow();

After importing the data save the file, close it and then re-open it and the colors should appear. You must also make sure to disable the Fields Highlights for the colors to show up.

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
community guidelines
New Here ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

try67 - thanks for your input.  Where do I add a "doc-level 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
community guidelines
Community Expert ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

Via Tools - JavaScript - Document JavaScripts.

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
community guidelines
New Here ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

try67 - thank you very much. Unfortunately, I am getting the same behavior. The background fillColor still only shows up when I click inside the field, and doesn't show up at all, of course, when generating the PDF from automated data source.

I've moved the script to a Custome Calculation Script.

I've added a Document JavaScript with 

this.calculateNow(); 

Any other suggestions?

 

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
community guidelines
Community Expert ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

Did you disable the Fields Highlighting option? You can do it using a script, or via Edit - Preferences - Forms, untick "Show hover color for fields".

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
community guidelines
New Here ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

try67 - well, THAT definitely made some progress!  The background color now changes, as expected based on the changing input text, per the scripting.  HOWEVER, even though that works as expected when entering data manually, it is not being picked up when generating a document with these fields automatically filled from an external data source.  Perhaps this has to do with WHEN the Javascript is running? Is there a way to adjust how/when the JS runs during a document generation process?

I'm using the Document Builder feature that is available in SmartSheet.com.  I know that once we are talking about an integration between two technologies, things like this may start to get murky, but I'm hoping to find the magic combination of settings to get this to work.  VERY close now thanks to your help.

 

Tony

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
community guidelines
Community Expert ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

Did you place the code above as a calculation script and added the doc-level command I provided? If so, after importing the data, save the file, close it and then re-open and the colors should change.

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
community guidelines
New Here ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

try67 -

Dude! You are a freakin' genius!  Thank you so much.  This is working as expected now.  I know this was probably pretty simple for an experienced hand, but I very much appreciate your patience in guiding me through the troubleshooting steps to get to the final correct solution. Hats off to you, sir/madam!

Tony

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
community guidelines
Community Expert ,
Nov 11, 2021 Nov 11, 2021

Copy link to clipboard

Copied

You're very welcome!

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
community guidelines
New Here ,
Nov 12, 2021 Nov 12, 2021

Copy link to clipboard

Copied

try67 - Well, you are not going to believe this.  After my first successful generation of a PDF file with the Javascript changing my field background color from the automated data, I have been unsuccessful in getting it to work the same again.

None of the scripts have changed. It is still working properly when entering the data manually. But now, when generating the document with data pulled from an external data source, the background color is not being set.  

I've been saving, closing, and re-opening, with no success.  Banging my head against the wall after that brief taste of victory.  Hoping you have some sage words of advice again.

 

Thanks,

Tony

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
community guidelines
Community Expert ,
Nov 12, 2021 Nov 12, 2021

Copy link to clipboard

Copied

Can you share the file?

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
community guidelines
New Here ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

Sure! I've removed any potentially proprietary or confidential info. So this just has the JS for the 3 fields I need the background color to change based on the data in the field generated from an external data source. Note, that the JS and fields work perfectly when manually changing the field text.  It's only when generating the document using data from SmartSheet that that functionality fails.  Although, oddly, it worked the first time I did the "save/close/reopen" trick that you mentioned.  But hasn't worked since then. Examples of the source PDF file w/JS, and the generated PDF file attached.

Thanks for any help.

 

Tony

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
community guidelines
Community Expert ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

The two files are completely different. In the second file most of the fields are gone, such as the "Current Status Color" field, so how could it work?

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
community guidelines
New Here ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

try67 -

 

The second file is the "generated" PDF.  This produces a static PDF file with no fillable fields, but it uses the first file (with the fields) as the template with the field mappings to do that document generation.  I hope that makes sense.  SmartSheet.com is the tool I'm using for this document generation. I have built a data repository in that tool, and by uploading the PDF with the form fields and mapping those fields to the data fields in SmartSheet, I can generate a static PDF document, which is exactly what I need to do.  But for some reason, the JS with the color changing is no longer working, even though I got it to work once.  Does that all make sense?

 

Tony

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
community guidelines
Community Expert ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

No really... So it flattens the fields after importing the data? If so, the script can't work as the code in the fields will never trigger, since they are flattened before the file is opened.

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
community guidelines
New Here ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

Hmmm... I was afraid of that. I got it to work that first time, so I was pretty excited.  I guess that was a fluke.  Sigh.  Well, thank you for looking at it for me. Very much appreciated.

Tony

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
community guidelines
Community Expert ,
Nov 15, 2021 Nov 15, 2021

Copy link to clipboard

Copied

LATEST

It would only work if you opened the file after manually changing the values. It can't work once the fields have been flattened.

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
community guidelines