Hi
I am working on a mobile app.
I have used gallery for showing various options to user. I want to change the color of container to green if a user clicks on a particular container.
I have made a variable "IsSelected" and on click of that button I have changed its value to true and then on each of the container applied style=
background-color:"+If(IsSelected, "#0a9c82","#fff")
But when I click all the container values turned to green.
There is one way but for that I have make 8 variable(for 8 different containers) and apply each separately.
Is there any other efficient way to do ?
Hi Shubham,
If you use the same expression to set the CSS on each container, then if IsSelected is true, they will all have the green background color. How do you know which button to mark as selected? Do you have a button per container?
If you would share more details or an OML it would be easier for someone to understand what you try to achieve.
Regards,
Daniel
Daniël Kuhlmann wrote:
Hi Daniel
YES it is the exact problem I am facing. I have enclosed each container in a link and then is calling a action on its click. There I am changing the value of IsSelected to true.
So do I need to make separate variables for separate containers or is there any other way?
define a CSS as below:
.gal-cont{ background:#fff }
.gal-cont{
}
.gal-cont:focus{ background:#0a9c2d }
.gal-cont:focus{
Now apply this class to your container
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
If I understood your requirement correctly, the below mentioned sample app (link) implementation, is what you are looking for?
Check this: Sample App Screen
If the requirement matches, you can check the attached .oml solution file.
Hope this helps you!
Benjith Sam
Shubham Agarwal wrote:
Hi Shubham Agarwal,
I am still not understanding , Why u need 8 variables . Gallery it self have ListItem that have an certain List source.If we want to show list value that needs expression enclosing container where we put List value in expression. So just apply your Onclick event on that container thats all . In your onclick action use your IsSelcted value true or false so that it show color.
Thanks .
Hi everyone
I am not using listitem in the gallery.
In each of the link I have containers.
hi Shubham Agarwal,
You can do it with javascript as Benjith Sam used. Even you can do it without javascript. You just need to pass Container Id(ContainerName.Id) input parameter of your onclick action and assign this Id to you local variable (make one Local variable in your screen (Lets suppose WidId , data type - text)) . In Style classes attribute of every container Just put your If statement
If(WidId=ContainerName.Id,"Test","")
Here Test is your style class .
.Test { background-color: #e40c0c; }
thank u
PFA - Updated .oml solution file as per the requirement.
Benjith Sam wrote:
Adding to the previously mentioned solution, you can achieve the same implementation using JS as mentioned below:
JS Code Snippet
if (document.getElementsByClassName('galleryItemCntr').length > 0) { document.getElementsByClassName('galleryItemCntr')[0].classList.remove('galleryItemCntr'); //remove } document.getElementById($parameters.ElementId).classList.add('galleryItemCntr'); //add
OnClick of the Gallery Item define a JS node:
Hope this helps you.