59
Views
3
Comments
OnClick change variable on a Javascript
Application Type
Traditional Web, Mobile, Reactive, Service

I am making a application that allows editing like a small Microsoft paint within a mobile app, in order to do this I am using a JS library called fabric JS, I want to change the mode of canvas in the JS that I am writing so that we can turn on and off the drawings on screen.

I have been working on developing a feature for a mobile application, but I am stuck up with an issue, I have defined a button on my screen looks something like this,

Now the problem is I need to trigger a function that has to render something on the screen, I have tried using the onClick client action and wrote a JavaScript to call that function when clicked, turns out it calls the function, and its rendered but it just stays for a second and then is lost after the click.

Also, I have HTML canvas that is been called in a onReady function of a block, I need the same ID of the canvas in the main script (the script in below), so that I can use the same parameter within two different functions, I am not sure if its possible, any suggestions on this could really help me out.

I realized we need to have the script in scripts, folder so that we can call a function while the application runs but I want to change a variable value in this script,

when the above is pressed, I have dropped the OML file of my work so far for better understanding, I have no prior knowledge in JavaScript, so I am sorry if this sounds stupid,
Thanks in advance

ImageUtilities.oml
2020-09-01 10-42-42
Stefano Valente

I got missing references, so i did not try to see what you are trying to do..

I am not a master in javascript but the first thing i notice is your code in the onrender:

You are creating a new canvas object every render. that does not seem right.

UserImage.jpg
Faizan Mohammed

In my latest update, I have added up the render function within script knowing this issue but still cant figure out a way to pass the parameter into the script under the scripts folder.

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Faizan,

I did some slight JS code change in the Script file and in the OnReady JS. The image is getting drawn to the canvas in the attached implementation, and the skitching is also working. However, I cannot understand 'can't figure out a way to pass the parameter into the script under the scripts folder.'

If you want to pass value from the screen scope to the Javascript defined under the Script Folder, you can define a function (in the Script file) with arguments and invoke the same from the screen scope by passing the required parameters. 

Can you share any references (solution) you are targeting to implement in the OutSystems application?

See this sample: CanvasDraw


Kind regards,

Benjith Sam

ImageUtilities.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.