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

Hi Shubham,

define a CSS as below:

.gal-cont{ 
  background:#fff
}

.gal-cont:focus{ 
  background:#0a9c2d
}

Now apply this class to your container

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

Daniël Kuhlmann wrote:

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

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?


Hi Shubham,

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!


Regards,

Benjith Sam

Shubham Agarwal wrote:

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 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,

PFA - Updated .oml solution file as per the requirement.

Check this: Sample App Screen


Hope this helps you!


Regards,

Benjith Sam

Shubham Agarwal wrote:

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 

Benjith Sam wrote:

Hi Shubham,

PFA - Updated .oml solution file as per the requirement.

Check this: Sample App Screen


Hope this helps you!


Regards,

Benjith Sam

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.


Regards,

Benjith Sam