734
Views
7
Comments
Solved
Changing an image with button onclick

Hi,

I'm totally beginning and have maybe a weird question, please have patience! Thanks.

I created a UI with an image and a button.

Now all I want (for now) is to change the image when pressing the button.

(the images are uploaded and a ButtonOnClick is created, so now what?)

Thanks

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


Hi Elck Stippen,


To achieve the desired output  stated above, you just have to add some logic and JavaScript. 


Please go through the attached .oml file


Kind Regards,

Benjith Sam

ToDo1.oml
UserImage.jpg
Elck Stippen

Benjith Sam wrote:

Hi Benjith,

That's exactly what I needed.

Great!

Better than watching video's for half an hour and learning what I knew, what I allready understood and mostly what I don't want to know. ;-)


You understand what someone with prior programming experience needs.

Thanks again!






2018-07-03 08-33-54
Tiago Gafeira
Champion

Hi Elck,

How are the images stored? As module resources or in the DB?


Cheers,

Tiago.

UserImage.jpg
Elck Stippen

Hello Tiago,

Thanks for replying.

I hope this screendump gives you the answer...

2018-07-03 08-33-54
Tiago Gafeira
Champion

As the images are stored as local resources, you have to include all of them inside IF conditions that check a screen variable. Upon clicking on the button, the corresponding screen action must change the value of the variable and refresh the outer IF widget or a container that includes it.

UserImage.jpg
Elck Stippen

Sorry, I understand what you say, but still have no clue as how to achieve that.

What is, or where do I find definitions of: a screen variable, screen action, refresh...?

Maybe the system is far to high-level for me, I am a simple low-level programmer and would use js to do this like so:

<img id='here'>

<button onclick=document.getElementById('here').src='een' >


UserImage.jpg
Abilio Matos

Elck,

Since you are starting with Outsystems, my advice to you is to do the online courses to understand how platform works.

https://www.outsystems.com/learn/


Abílio Matos

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


Hi Elck Stippen,


To achieve the desired output  stated above, you just have to add some logic and JavaScript. 


Please go through the attached .oml file


Kind Regards,

Benjith Sam

ToDo1.oml
UserImage.jpg
Elck Stippen

Benjith Sam wrote:

Hi Benjith,

That's exactly what I needed.

Great!

Better than watching video's for half an hour and learning what I knew, what I allready understood and mostly what I don't want to know. ;-)


You understand what someone with prior programming experience needs.

Thanks again!






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