How do I include DOM references to other apps in the same .jsx without returning failure?

[Inventsable]

Hey guys, say I have a single panel I want to use for both Illustrator and Photoshop. In JavaScript I can use csInterface to find the host application then route through a conditional to do app-specific actions, I figured I could just evalScript to different app-specific functions in doing so -- but I've noticed that having separate DOM references within my .jsx will cause the entire .jsx to fail. If I have a script that works perfectly in Photoshop but add something like app.isFill() anywhere in that .jsx, it returns Extendscript Fail -- even if I don't initiate it on auto-execute and try to put it in a conditional like `if (app.name === 'Adobe Illustrator'){alert (app.isFill());};`.

Is there a way to sneak cross-application DOM references in the same script? If not, then what would I need to do here?

[Loic.Aigon · Accepted solution]

You could use

var psLib = "/myPhotoshopLib.jsx";

var aiLib = "/myIllustratorLib.jsx";

var appName = app.name;

if ( appName== 'Adobe Illustrator' ) {

     $.evalFile (aiLib);

}

else if ( appName== 'Adobe Photoshop' ) {

     $.evalFile (psLib);

}

else {

alert( "can't load lib");

}

Or use BridgeTalk with app specific code set as string.

[Inventsable]

Thanks for the replies and sorry for the delayed response. I'm not sure what was going on in my original file because I still couldn't get it to work, tried a few different ways -- but it did work once I started with a new file so there must've been some conflict that was too hard to make out in a giant, sloppy sandbox script. I think the part that was confusing me was which script would be referenced in the manifest.xml file as the .jsx file and not realizing that, through evalFile, I don't even need that .jsx and it could be empty. The CEP Cookbook seems kind've ambiguous at this part, so now I'm using this function from another link:

// https://www.davidebarranca.com/2014/01/html-panels-tips-2-including-multiple-jsx/
function loadJSX(fileName) {
    var csInterface = new CSInterface();
    var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/host/";
    csInterface.evalScript('$.evalFile("' + extensionRoot + fileName + '")');
}

Which makes sense (and really convenient), then calling that function on startup inside my .js file:

loadJSX("PS.jsx");
loadJSX("AI.jsx");
loadJSX("AE.jsx");
// etc.

Now everything seems to work well, and it makes a lot more sense.

[Silly-V]

I have used BridgeTalk to aim a script at various applications, and so long as the code is inside functions, the entire script still works when passed into any one specific app because only the part of the code it uses is invoked. However, code specific to apps is still able to share common or app-agnostic functions.

[Loic.Aigon]

If it’s CEP I find samples pretty well designed in terms of code architecture. Main.jsx script modtly consists in loading any app related code and it’s up to your code to call the specific library.

[Inventsable]

Figured I'd update this with a very simple solution:

var cs = new CSInterface();
var appName = cs.hostEnvironment.appName;
// using function from comment above:
loadJSX(`${appName}.jsx`);

I've been keeping unique functions in app-specific .jsx files but the universal/app agnostic ones in scripts prior, so you can do the above without if/else statements if your files are named "ILST.jsx", "AEFT.jsx", "PHXS.jsx", etc.

[Loic.Aigon]

Interesting approach.