Creating add-ons toolbar button with custom icon

Explorer ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

I have a folder level JavaScript that is running when Acrobat starts up. I'm able to add a button to the add-ons toolbar without a custom icon but once I try to specify an icon I get an error that doesn't tell me much.

GeneralError: Operation failed.

App.addToolButton:1824:Folder-Level:App:config.js

Here is my code:

var myIcon;

var importIcons = app.trustedFunction(function() {

     app.beginPriv();

     // Create a document

     var myDoc = app.newDoc();

     // import icon (20x20 pixels) from the file specified

     myDoc.importIcon("myIcon", "/some/path/plus.jpg", 0);

   

     // convert the icon to a stream.

     myIcon = util.iconStreamFromIcon(myDoc.getIcon("myIcon"));

     // close the doc now that we have grabbed the icon stream

     myDoc.closeDoc(true);

     app.endPriv();

});

importIcons();

// add buttons to add-ons toolbar

app.addToolButton({

     cLabel: "Test1",

     cName: "testButton1",

     oIcon: myIcon,

     cExec: "app.alert('hello');",

     cTooltext: "Test1",

     cEnable: true,

     cMarked: true,

     nPos: 0

});

My image is 20x20 px and a .jpg. I'm also wondering if there's a way to accomplish this without having to create a dummy empty document just in order to call importIcon() and getIcon(). Any help is appreciated.

TOPICS
Acrobat SDK and JavaScript, Macintosh, Windows

Views

2.4K

Likes

translate

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

Explorer , Jan 02, 2018 Jan 02, 2018
Your hex string worked fine for me. I'm able to generate valid hex strings that display the icon correctly on Windows but not on Mac. I'm just going to assume this is a Mac bug and generate my hex strings on Windows and paste into Mac. Thanks for the help.

Likes

translate

Translate

Translate
Most Valuable Participant ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

Are you adding your code to the built-in config.js file? If so, that's a bad idea. You should create your own js file.

Beside that I'm not seeing any major issues. I tried your code on my machine and it worked fine...

Likes

translate

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
Most Valuable Participant ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

PS. Short of converting your image to a Hex string, which is super-complicated and annoying, your solution is the easiest one I've came across so far.

Likes

translate

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
Explorer ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

I'm on Mac and it's my own config.js file in /Applications/Adobe Acrobat DC/Adobe Acrobat.app/Contents/Resources/JavaScripts. There was not a config.js in there before I created mine. So with my code you were able to see a custom icon that you tested with? Also, do you know if there's a way to not have to create a dummy new document in order to import the icon?

Likes

translate

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
Most Valuable Participant ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

Do you have more than 1800 lines of code in that file?

And yes, it did work for me using a custom icon I saved in a local folder. And no, I don't think you can do it without creating a dummy document.

Likes

translate

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
Explorer ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

Yes, I have more than 1800 lines. Is that a problem?

Likes

translate

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
Most Valuable Participant ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

No, that's fine, I was just a bit surprised... So what's the full error message you're getting, and to which line in the code does it refer, exactly? Also, does it work if you remove the oIcon parameter?

Likes

translate

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
Explorer ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

The full error message I'm getting is just what I posted in my original question:

GeneralError: Operation failed.

App.addToolButton:1824:Folder-Level:App:config.js

app.addToolButton({

    cLabel: "Test1",

    cName: "testButton1",

    oIcon: myIcon,

    cExec: "app.alert('hello');",

    cTooltext: "Test1",

    cEnable: true,

    cMarked: true,

    nPos: 0

});

Line 9 above (nPos) is really line 1824 in my JavaScript file. Yes, the button shows up fine when I comment out the icon line (line 4 above).

Likes

translate

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
Most Valuable Participant ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

In that case there's more than likely a problem with the file-path you're using. Are you sure you're using the correct syntax?

The best way to find out is to put a PDF in the same folder, then open it in Acrobat and run this code from the JS Console:

this.path

It will print out the correct file-path you need to use in the importIcon method.

Likes

translate

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
Explorer ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

I was using /Users/.. but when I opened a PDF in the same directory this.path started with /Macintosh HD/Users/..

So I tried that and I still get the same result.

Likes

translate

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
Explorer ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

It's also interesting that when I run app.getPath("user", "javascript") in the console I get:

GeneralError: Operation failed.

App.getPath:1:Console undefined:Exec

2

undefined

but I get a value for "app":

app.getPath("app", "javascript")

/Macintosh HD/Applications/Adobe Acrobat DC/Adobe Acrobat.app/Contents/Resources/JavaScripts/

Likes

translate

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
Most Valuable Participant ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

The getPath result is expected. There's only an app version of this folder, not a user version.

I'm sorry, but I'm out of ideas. Could be a Mac-specific bug, as it's working fine in my Windows version, as I've said.

Maybe try the hex-string approach I mentioned before. That way you won't need to use an external image file, or a dummy document, either.

Likes

translate

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
Explorer ,
Dec 26, 2017 Dec 26, 2017

Copy link to clipboard

Copied

It doesn't seem like it's a file path issue because when I intentionally try a file path that doesn't exist I get an error back from the iconStreamFromIcon() function:

Util.iconStreamFromIcon:1801:Folder-Level:App:config.js

and when I put in a valid path I don't get an error back from iconStreamFromIcon().

Likes

translate

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
Adobe Community Professional ,
Dec 27, 2017 Dec 27, 2017

Copy link to clipboard

Copied

You'll find a tutorial and a tool for creating toolbar Icons here:

Alerts, Popups, and Other Devices for Interacting with the User

You'll also find lots of folder level automation tools that use toolbar buttons with icons.  If you look at them you'll notice not a single one depends on an external file. Loading files at startup is iffy, and create dependencies that add difficulty to maintaining and transferring scripts.

Here are some free examples of tools with toolbar buttons:

Free Acrobat Automation Tools

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

Likes

translate

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
Explorer ,
Dec 27, 2017 Dec 27, 2017

Copy link to clipboard

Copied

Thanks for the reply Thom, but unfortunately I don't have a subscription so can't see the examples.

Likes

translate

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
Engaged ,
Dec 27, 2017 Dec 27, 2017

Copy link to clipboard

Copied

You are not able to download the Free tools?  The first link was to an article on UI elements but the second one with sample tools using custom toolbar buttons is Free ( does not require a membership)

Free Acrobat Automation Tools

Any error messages when you tried to download the Free tools?

Hope this helps,

Dimitri

pdfscripting.com

Likes

translate

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
Explorer ,
Dec 27, 2017 Dec 27, 2017

Copy link to clipboard

Copied

I must have only looked at the first link. I see the free tools now. Thanks guys! I'll check them out.

Likes

translate

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
Explorer ,
Dec 27, 2017 Dec 27, 2017

Copy link to clipboard

Copied

I was able to download them and checked out one of the examples of building a button with an icon using a hex string. So I tried that route and it looks some sort of icon or part of it but it doesn't really look like my image. Perhaps there's an issue with my hex string or with my image but the image is 20x20 px. I've tried a .jpg and a .png but get the same result. Are there any other image specs I need to satisfy for an icon image? What is the preferred way to get the hex string? I'm getting the hex string from the image via Java.

Likes

translate

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
Adobe Community Professional ,
Dec 27, 2017 Dec 27, 2017

Copy link to clipboard

Copied

It's critical that the image dimensions match the specified size in the icon object. And that the image data is ARGB. 4 bytes/8 hex digits per pixel. Otherwise, all the pixels get shifted.

This is the same data returned from the util.iconStreamFromIcon() function.

Since there are a few different bits that have to come together correctly, I created a set of examples/tools that do it for you, and show how it's done. But it's true the good stuff is paid content.

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

Likes

translate

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
Explorer ,
Dec 28, 2017 Dec 28, 2017

Copy link to clipboard

Copied

I'd like to inspect one of the images from the free examples you pointed me to since it displays correctly and my icon does not. Do you know if the original images are available anywhere or are the hex strings in the JS files the only option?

Likes

translate

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
Adobe Community Professional ,
Dec 28, 2017 Dec 28, 2017

Copy link to clipboard

Copied

Those were custom icons created by me. The images in other formats are not available.  But I don't see why that would be helpful. All you need to do is convert the pixel data into the specified format   

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

Likes

translate

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
Adobe Community Professional ,
Dec 27, 2017 Dec 27, 2017

Copy link to clipboard

Copied

Here is the spec for the icon stream object,which is what you pass into the app.addToolButton() function. This is the same object returned from the util.iconStreamFromIcon() function.

Acrobat DC SDK Documentation

Thom Parker - Software Developer at PDFScripting
Use the Acrobat JavaScript Reference early and often

Likes

translate

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
Adobe Community Professional ,
Dec 29, 2017 Dec 29, 2017

Copy link to clipboard

Copied

Here is a free PDF file that convert GIF, PNG, JPG… images to a usable format to embed into JavaScripts : Fichiers partagés - Acrobat.com

Likes

translate

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
Explorer ,
Dec 29, 2017 Dec 29, 2017

Copy link to clipboard

Copied

I tried it out on a couple different .png files and a .jpg file and the icon still doesn't display correctly. I'm assuming there's something wrong with the image format I'm starting with but I'm not much of an image expert. Any way you can send me an image you've used with your tool that displays correctly so I can compare the specs to my images?

Likes

translate

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
Adobe Community Professional ,
Dec 29, 2017 Dec 29, 2017

Copy link to clipboard

Copied

Likes

translate

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