Custom JS running basic code

Hi all. Trying and struggling to find any documentation or resources for the following.

I click on a button and it runs custom Javascript code, which then outputs the result into a paragraph object.

Currently this test works:

var sOut = "calculation";
return { result: sOut };

However this stops working whenever I try to grab an input value. I have defined 4 inputs (paragraph objects) and am trying to just output any of the values.


var sOut = inputs.input1;
return { result: sOut };

Ultimately what I want to do is grab 4 inputs, do some maths calculations with them and output a String (which has details of this calulation)

Many thanks,

Hi, here’s the documentation for custom JS: Custom JavaScript - Composer

Why your code isn’t working is likely because you are binding inputs 1 and 2 to the Visible value of another component, which is not a text but a true/false value.

Hi Mari, thanks for your reply.

You’re right. That visible true/false is what is being sent to the variable. However, the boolean is the only option available for my text object (paragraph object). How do I bind the value of this object instead?

EDIT: It appears the content parameter is not available. I don’t really understand the warning message


Hi, it seems that you are working from within isolation mode of a composite component, are you also running the custom JS from within that component? Looks like quite a complicated way to make a calculation – could you maybe describe the scenario more in detail so I can give better advice?

Yeah, I don’t really know what that means.

See the following picture:


What I want to make is a form with 2x time pickers and 2x sliders giving an integer range.
When I set these 4 values I want to hit “calculate” and then the paragraph object (“results…”) will be filled in with an output of some mathematical calculations done with the above input numbers.

I can’t see another way of doing this apart from with custom JS code taking the 4 inputs, parse them, do some stages of maths with them, and output the result.

Many thanks

To simplify things, I would create page variables for each of the slider/time values and bind them to the values of those components:

The page variables are two-way bound, so they will update as you update the slider or click the button. You can then bind them to the inputs of your JS, so you don’t have to “fish” for the values of the components :slight_smile:

Thanks for your detailed response.

I ended up doing what you did, and used the 4 buttons to set page variables. On the calculate button, I used the 4 page variables as inputs to the Custom JS function. This seemed to work ok. Just need to work out a good way (in code) to parse the time inputs and do calculations on these

Many thanks again

1 Like