Console log

HTML Panels Tips: #5 passing Objects from JSX to HTML

Davide Barranca —  — 7 Comments

This tip covers how to pass Objects from Photoshop (the JSX file) to the HTML Panel.

Panels technology doesn’t allow (for the moment) to communicate from the JSX to the HTML except via function return (see Tip #3).

In order to successfully pass Objects, you need to include json2.js in the JSX and stringify the Object as a JSON Object. Then, in the HTML Panel you must parse the JSON Object in the callback.

Example

This panel has just one button: it triggers a function in the JSX that returns an Object, which is then parsed and logged in the console. In order to follow the demo code, you’d better know how to debug a panel (Tip #1), evaluate external JSX  code (Tip #2) and have a good grasp on how primitive data is passed from JSX to HTML (Tip #3).

HTML

The usual bare code stripped from boilerplate by David Deraedt.

Main.js

In the Javascript it is first declared the loadJSX() function (hardwired to look in the jsx/ folder), called in the init() in order to evaluate in the Photoshop context the json2.js library. Mind you, ExtendScript doesn’t support JSON natively so the original library must be included. I’ve used the commented version by Douglas Crockford, beware that minification in ExtendScript can be tricky.

I’ve provided to the CSInterface.evalScript() a callback as an anonymous function, which parses the result as a JSON Object (see next section).

JSX

Here the sendObjToHTML() is declared: it first builds an Object literal with arbitrary data (you’ll fill it with useful, actual stuff: Photoshop active Document’s width, height, ecc.); then the Object is returned as a JSON (stringified) Object. This very Object is the result argument in the anonymous callback in the main.js above.

When the panel is open in Photoshop – provided you’ve set things according to Tip #1 – open Chrome (or Safari, or Firefox) and go to localhost:8088 or whatever port you’ve opened in the .debug file.

Print Friendly, PDF & Email
Share

7 responses to HTML Panels Tips: #5 passing Objects from JSX to HTML

  1. thanks, Davide,

    shouldn’t the second line be removed?
    var o = JSON.parse(result);
    var o = result;

    Jeff.

  2. Sergey Kritskiy July 18, 2014 at 2:37 PM

    Hi Davide,
    I wonder if you can help me out: I wanted to use properties from the jsx object in the main.js but I can’t seem to find a way to access them outside evalscript function scope:
    http://pastebin.com/dKJ5mMrR
    Do I need to get them somehow differently?

    • Sergey, this is due to the async nature of the evalScript(). What happens is that in fact the script is evaluated, then the pointer goes to the next line – the outer for loop, which output nothing. I’m afraid we have to work in a pure callback fashion.

      • Sergey Kritskiy July 18, 2014 at 5:31 PM

        Thanks, got it! In the end I’ve just put properties to html element in callback and than read from it afterwards :S

  3. Denise Robinson October 26, 2018 at 9:38 PM

    Hi David, I am new to CEP and have purchased your Photoshop HTML Panels Development book which I am finding quite benefiecial–thank you very much for that! I have tried the above example which works perfectly, however, I am curious as to why the loadJSX is executed in the Main.js as opposed to in the JSX file? From my understanding, it is the JSX (Extendscript) that doesn’t natively support JSON? Additionally, when I do a simple #include json2.js in the JSX code and execute it from the scripts menu within photoshop, the JSON code works correctly. would like a better understanding before moving on to more advanced topics. Thanks!

    • Hello Denise,
      thanks for your kind words 🙂
      To answer your question: for reasons unknown to me, a CEP Panel’s JSX (at least in Photoshop) doesn’t know which folder it belongs.
      Try something like:

      $.writeln(new File($.fileName).path)

      and you’ll get weird results. Do the same in ESTK, and you’ll get the parent folder of the JSX. For this reason, loadJSX is executed in the JS because there you can send (as a parameter) the path of the JSX file to evaluate – a path that otherwise it would be out of any Panel’s JSX reach (unless you hardwire it, but this is a bad idea).

      The same kind of… “peculiarity” prevents #include json2.js from working because, internally, the #include directive presupposes a path that is relative to the current JSX file. Not knowing the current JSX path, it’s impossible to get to the json2.js.

      This is covered (with additional details) in the book as well – hope this helps!

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=""> 

*
*