HTML Panels Tips: #3 Get data from JSX and send it to HTML

Davide Barranca —  — 10 Comments

This is how Photoshop (i.e. the JSX) sends back data to the HTML Panel.

The HTML Panel communicates with Photoshop via evalScript – this is in the main.js:

In the JSX there must be some:

In order to enable double-way communication, provide a callback in the evalScript function:


JSX_2_HTMLA very trivial example for a panel with one button that retrieves and displays in the panel the Photoshop active document’s name (forgive my total lack of design for this panel – it’s just to show you the bare mechanism) is as follows.


I define a button with id="btnDocName", and an h3 tag which will contain the Doc’s name.


Besides themeManager (boilerplate code is by the great David Deraedt) you see I evaluate (i.e. call) a getDocName() function (which belongs to the JSX) ‘ve used an anonymous function to define a callback on the fly. The result argument is just the return value in the JSX, and it’s used to overwrite the h3 tag content in the Panel.


Contains the getDocName() function and returns the active document name as a String (the toString() shouldn’t be mandatory):

So as a result when you click the button on the HTML Panel, it evaluates the function in the JSX, which in turn passes its return value to the callback.

Print Friendly, PDF & Email

10 responses to HTML Panels Tips: #3 Get data from JSX and send it to HTML

  1. thank you so much for this. i can’t find any documentation on htm5 panels except for the ones in eclipse eb3 and i don’t understand them at all.

  2. I am testing this funcionality on CC 2014 and unfortunately evalScript don’t work. Do you know maybe possible solution for this to fix?

  3. hi! since I use callback methods like csInterface.evalScript(“app.documents.length”,documentsLengthOk), others communications like this “var length = csInterface.evalScript(‘app.documents.length’);” returns ‘undefinied’.
    You know what is happening?

    thank you

    • Ciao Sergio,
      I guess undefined is assigned to length because of the asynchronous nature of evalScript. If you need to rely on such calls, you’d be better off setting the var within the callback, e.g.
      function clickHandler (evt) {
      var csInterface = new CSInterface(),
      docLength = undefined;
      csInterface.evalScript('app.documents.length', function (res) {
      docLength = res;

  4. Having trouble getting multiple buttons to do things in my UI.

    function init()

    function ()
    ‘browse()’, function(result)
    document.getElementById(‘path’).value = result;

    function ()

  5. Good !
    How to assign to the created button the execution of the previously written functions ? Button is created, but not used after clicked.One button with id=”test_button” is worked. I’m rename it later.
    html file

    ext.jsx file with modyfined function:
    function getDocName() {
    // return app.documents.length ? app.activeDocument.name : “No docs open!”;
    return(‘Create button’);
    function sayHello() {
    alert(“hello “);
    $(“.btn_test”).click(function () {
    $(“#btn_callback”).click(function () {
    csInterface.evalScript(‘getDocName()’, function (result) {
    document.getElementById(“docName”).innerHTML = result;

  6. is it possible to send objects from evalscript to be handled in the callback function or do i have to send them as a string and then parse the individual elements? if anyone knows any better way to handle the communication please share. I am trying to send a path element to the HTML panel and get its attributes. for further processing

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">