So the big learning point here is this…. HTML >>>>>> JSX.
This may be a simple concept to folks who are more fluent with HTML and building javascript applications, but for me, this was a challenge when learning. I had the Panel in one hand, and the script in another, but understanding how to connect the two was difficult.
In the example above, I walk through three examples from simple to more complex, but the basic concept is reflected in all. We can only pass information to Extendscript code as a “STRING”.
The way we do this is by providing a trigger in the HTML, for example, and input type=”button” which on a click runs a javascript function. Within the JS, we basically have a three step process from here:
1) Declare a new CSInterface
var cs = new CSInterface;
Notice for this you must first provide a script link to include the CSInterface.js file, which can be found here or in the sample panel in the “lib” folder.
script src="./lib/CSInterface.js"
2) Pass your variables
var exportType = document.getElementById('checkBox').checked;
var targetBin = document.getElementById('folderName').value;
cs.evalScript('var exportType ="' + exportType +'";var exportBin ="'+targetBin+'";');
Send it through .evalScript(“”) as a combined string or a single string variable
3) Call your function
cs.evalScript('$.runScript.exportThis()');
or
cs.evalScript('exportThis()');
How you call your function depends on how you have your JSX file formatted. Matter of preference here.
This was quite a confusing concept for me to wrap my head around at the beginning, but once I figured out how to use a double quote (“) and a single quote (‘) to make longer strings, this opened up the possibilities for me to give my users options while running their scripts. Give it a shot!
