Hi,I'm currently developing a mobile app where i have 3 buttons in Bottom placeholder of screen.Now i need to change the color of button on click.I tried to use a screen action and inside it i defined a JavaScript to get element by its name and then use to change background color.But its not working.It says "cannot read property style of undefined"PS: document.getElementsByName() returns array of elements so i have used document.getElementsByName()[0] to get element and each button has unique name.So , how to solve it.Or is there any better alternative to change buttons color on click ?Screenshot attached of flow, screenaction and javascript code attached.Thanks
Hi Anand,
Why not use an If expression on the style classes property to set the different class names, and define in the class name the color?m
This is an easier solution that does not require custom javascript code.
Regards,
Daniel
Daniël Kuhlmann wrote:
Thanks for the response,Your solution sounds simple and efficient but how do i manage on click event while using if ?If condition should also trigger onclick to change colorCan you elaborate a bit how to implement your solution.
Thanks and regards,Nitish
Anand Das wrote:
Make a local variable to hold the class name you want to apply on click. In the OnClick action set the value of the local variable to the proper class name. In the style class set the expression to the local variable.
That should do the job.
Hi Nitish,
In support to Daniel's comment, below screen shot describe the certain ways you can set the background color of button on click.
IsClicked = False (Screen Local Variable Default Value) - Value gets updated to True on Button Click
1) Assign CSS Style on conditional basis.
2) Assign CSS Class on conditional basis.
Note: To follow the best practises, use CSS classes.
3) Using JS (JQuery)
Button Widget Name: MagicBtn
4) Using JS
Hope this helps :)
Kind Regards,
Benjith Sam
How can I get the document.getElementById to work on an Outsystems mobile App? It seems this call works for Web and not on mobile Apps.
I even tried Benjith Sam's above basic javascript logic to test it on my mobile App to see if it works, and it doesn't.
E.g., I created a button and named it "btnTest" and in its Screen Action, defined Javascript logic that took the a variable to contain the button's name, as its parameter and defined it as follows:
document.getElementById($parameters.VarButtonName).style.backgroundColor = 'red';document.getElementById($parameters.VarButtonName).style.color = 'silver';
The mobile App returned an error message saying: "Cannot read property 'style' of null"
What could be wrong?
Hello Anand,There are two ways to achive your destination1) Using Jquery/javascript:
$(document).ready(function(){
$(".buttonClass").removeClass("colorChangeClass");
$(".buttonClass").click(function(){
$(this).addClass("colorChangeClass");
});
});2) Using Local variable
If you have 3 buttons, Use 3 variable whos data type is boolean. By default value is false for all variables.1) When you click on button set variable true for that button. and remaining variable values to false.2) When you click on onother button set true for that button and remaining set to false.
for button 1 use variable IsBtn1Activefor button 2 use variable IsBtn2Active
for button 3 use variable IsBtn3Active
for button 4 use variable IsBtn4Active
In extended property of all buttonsuse
class
= IF(IsBtn1Active,"active","")
and for active class set the css.