Skip to main content
Participant
December 3, 2023
Question

Pass JavaScript variables to JSX.

  • December 3, 2023
  • 1 reply
  • 229 views

I'm exploring Adobe CEP for use in After Effects.
I've already written HTML and am currently using main.js to handle button responses. When the button is clicked, it executes a JSX function.

 

HTML(part):

<div id="Panel">
    <label for="lensSelect">Select:</label>
    <select id="Select">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>

    <button id="Button">Button</button>
</div>

 

main.js(part):

Button.addEventListener('click', function () {  
    // Get selected Lens
    const Select = document.getElementById('Select');
    const selected = Select.value;

    // Define functions for each button to execute JSX functions
    function runA() {
        var csA = new CSInterface();
        csA.evalScript('runA()');
    };

    function runB(){
        var csB = new CSInterface();
        csB.evalScript('runB()');
    }

    function runC() {
        var csC = new CSInterface();
        csC.evalScript('runC()');
    }
            
    // Set corresponding JSX code based on the selected Lens
    if (selected === 'A') {
        runA();
    } else if (selected === 'B') {
        runB();
    } else if (selected === 'C') {
        runC();
    }
});

In the subsequent content within the same main.js file, I have returned some variables:

return {
    returnD,
    returnE,
    returnF,
}

 

How can I retrieve the returned variables (e.g., returnD) within Button.addEventListener and send them to be used in the JSX file?

 

I've tried converting variables into a JSON string, successfully retrieving JavaScript variables within JSX in simple tests and displaying the content using an alert window. However, when dealing with complex structures, I am unsure how to proceed, and it often renders the button ineffective.

 

thanks!! 

This topic has been closed for replies.

1 reply

ajabon grinsmith
Community Expert
Community Expert
December 28, 2023

I can't quite grasp the code you presented because it's fragmented, but I'm wondering if this will work?

 

Button.addEventListener('click', function () {  
    // Get selected Lens
    const Select = document.getElementById('Select');
    const selected = Select.value;
    
    var csi = new CSInterface();

    // some processs?
    var returnD = 'foo';

    csi.evalScript('run' + selected + '(' + returnD + ');');
});