Customize dialogs in custom JavaScript Tools SOLVED

[HQue]

Hey there
I am currently writing custom tools for the PDF-XChange Editor.

I was wondering if and how it would be possible to customize dialogs a bit more.
Until now my reference was the awesome work that Matthew has done on this one:
viewtopic.php?t=40329

What I would like to do:
- changing input names dynamically

Code: Select all

elements: [
            {
                type: "view",
                width: 450,
                elements: [
                    {
                        type: "view",
                        align_children: "align_row",
                        elements: [
                            {
                                item_id: "lbl4",
                                name: "Form",
                                type: "static_text",
                                width: 100,
                            },
                            {
                                item_id: "sketchType",
                                type: "popup",
                                width: 200,
                                items: this.sketchTypes,
                            },
                        ]
                    },
                ]
            }

Just setting it to a variable and changing it is apparently not working

- put an icon instead of a text for the name

- lock input fields dependant on other inputs in the dialog

- putting an image / graphic inside the dialog to explain its functionality

Is that possible?
Thanks in advance.


Best,

Niklas

[Daniel - PDF-XChange]

Hello, HQue

I cannot offer much in the way of writing new scripts, but I note that your sample here is missing a closing bracket:

image.png

Beyond that, creating your own Dialogue is essentially diving into Object Oriented Programming through the JS Console, it is certainly possible however, PDF has some security restrictions on what is allowed to be accessible on your local system, for example, to ensure malicious code is not executed to grab all of your sensitive files.

You may want to review what is possible in PDF with the actions detailed here: https://opensource.adobe.com/dc-acrobat ... croJS.html
Loading an image into the dlg should be possible, but I am unsure about the specific requirements of where those image files need to be , if there are any such restrictions. I am similarly unsure how or if they can be pulled into other inputs areas like selection fields. I expect it is possible, but "how" exactly goes beyond my JS knowledge.

Kind regards,

[Mathew]

Images in custom dialogs are possible - it's one of the non-documented easter eggs that has very little info on the web. I've not used them in any of the scripts I've posted here, but there's a nice easy to understand example by @benep here viewtopic.php?p=190719#p190719

The format for the image is the same as for the icon stream used in menu icons. See this post for possibilities viewtopic.php?p=178116#p178116

[Stefan - PDF-XChange]

Hello Mathew,

Thanks for sharing that!

Kind regards,
Stefan

[Mathew]

What I would like to do:
- changing input names dynamically

Just setting it to a variable and changing it is apparently not working

- put an icon instead of a text for the name

- lock input fields dependant on other inputs in the dialog

- putting an image / graphic inside the dialog to explain its functionality

Hi Niklas,
My response above was incomplete. In response to your other questions above:

• Changing input names dynamically: The contents of the list box are filled by using dialog.load(), not by assigning properties to it. The example 3 in the js api is for a list box, but as it mentions below the example, it's the same approach for a popup:
  https://opensource.adobe.com/dc-acrobat-sdk-docs/library/jsapiref/JS_API_AcroJS.html#execdialog
• put an icon instead of a text for the name: I don't know of a way to put icons inside popup and list_box. The only way I know to add image/graphic is as a separate item as I mentioned in a previous post.
• lock input fields dependant on other inputs in the dialog: The item_id of a dialog item (like the popup, or edit_text, etc) can be used as a handler in the dialog object, and it will be called every time that element is changed. Thus if you had

  Code: Select all

  sketchType(dialog) {
  app.alert("You changed the dropdown!")
  },

  It would alert every time the dropdown ('popup') is changed. The parameter 'dialog' is used to access the current values of all other fields in the dialog, and the method dialog.enable() can be used to enable/disable any of the fields see https://opensource.adobe.com/dc-acrobat-sdk-docs/library/jsapiref/JS_API_AcroJS.html#dialog

Side note: The item_id is supposed to be a unique 4-character string based on the api. Using longer strings (such as 'sketchType' in your code) seems to work, but I wouldn't count on it.

[Stefan - PDF-XChange]

[HQue]

This is huge!
Thanks a lot Stefan and Mathew!!

Just in case it might be helpful for anyone else, I will share the stuff that I came up with below

- put an icon instead of a text for the name:
I just did the image approach Mathew mentioned and I display the one I want depending on another input. Apparently acrobat has some weird caching so I always had to make a clone

- lock input fields dependant on other inputs in the dialog:
exactly like Mathew mentioned also implemented in the code below

Code: Select all

    sketchType(dialog) {    
        const results = dialog.store();
        const selectedSketchTypeIndex = this.getIndex(results["sketchType"]);

        if(selectedSketchTypeIndexGlobal != selectedSketchTypeIndex)
        {

            let imageToLoad = "";
        
            if (selectedSketchTypeIndex === 0) {
                imageToLoad = iconGeradesEisen;
                dialog.enable({ l1: true, l2: false, l3: false });
            } else if (selectedSketchTypeIndex === 1) {
                imageToLoad = iconBuegel;
                dialog.enable({ l1: true, l2: true, l3: true });
            } else if (selectedSketchTypeIndex === 2) {
                imageToLoad = iconLSchenkel;
                dialog.enable({ l1: true, l2: true, l3: false });
            } else if (selectedSketchTypeIndex === 3) {
                imageToLoad = iconStecker;
                dialog.enable({ l1: true, l2: true, l3: true });
            }
        
            // Force-refresh image manually
            dialog.load({ imgS: "" }); // blank first
            dialog.load({ imgS: cloneImageObject(imageToLoad) }); // then real image

            dialog.enable({
                imgS: true
            });
        }

        selectedSketchTypeIndexGlobal = selectedSketchTypeIndex
    },
    
    function cloneImageObject(img) {
    	return {
        	count: 0,
        	width: img.width,
        	height: img.height,
        	read: img.read, // same read function
        	data: img.data   // same compressed data
    };
}
	
}

[Stefan - PDF-XChange]

Hello HQue,

Glad I could assist and many thanks for sharing your work so that others can also see it! I am certain it would be useful to other of our forum readers as well!

Kind regards,
Stefan