CSS Background color of flex container is not changed in column root container

Well you're not passing parameters correctly to the data.instances property of your repeater.
Or you're not using the view parameters properly in your template view.

Chowmya_2023-04-12_1853.zip (6.6 KB)
Can you help me with this @pascal.fragnoud @nminchin

There's no flex repeater in this project...

Ho sorry, here it is..
Chowmya_2023-04-12_2024.zip (19.5 KB)

So, in the template view, you need to bind the first label to the testerName parameter.

Now, the circle's color: What do you want there ?

Using some guesses based on the rest of this thread, would this be what you're looking for ?

In which case I would advise you rework things a bit, because having 2 elements out of 3 being redundant isn't great design, especially when the whole background is already an indicator of that element.
Also, too much color in a HMI is distracting. Keep things clean and simple.

2 Likes

Thanks and this is what I've been searching for... Can you share me the zip file of this latest one..

There you go.
I still suggest you clean things up a bit.

repeater.zip (20.0 KB)

Note: I changed the whole circle thing to just a label, using its own border to make the circle.
Change the style.borderWidth property to adjust the thickness, and the style.borderColor to adjust the... color.
Also, the size is determined by the position.basis property, style.height is bound to it. Change the basis to change the size.

1 Like

Thanks for sharing...This will be more helpful for me to understand the things in a easiest way.. :slight_smile:

Additional tip: You can set up an interval between instances in your repeater by adding a gap property to its styles.

image

Then play with the useDefaultWidth and useDefaultHeight to make it look like what you want.

1 Like

Fabulous, thanks a lot...Pass and fail status is working as the way I want...Now, how can I "add" the third color with the text inprogress?
@pascal.fragnoud @nminchin looking forward for your response..

use case, with a string status (or number)
https://docs.inductiveautomation.com/display/DOC81/case

case(
{view.params.status}, 
"pass","green",
"inprogress","yellow",
"red")

using case is a good choice but it seems to be something fishy here..

Please describe the problem. You're making us download a file and import it into Ignition and then try and find out what's "fishy". Make your posts as clear and specific as you can.

In root(flex) I've made params.status as true (Pass) which looks like,
image

I've did expression binding for each status, even though statuses with their colors are irrespective.

I'm not sure how to solve.
Thanks, in advance!

Honestly ? Read the doc of what you're using.
For example, out of 3 uses of the case expression function, you're using it incorrectly twice. Which can be fixed easily by reading the doc.

You need to put some effort into it before we can actually help you, otherwise we'll just end up doing your work for you every time you encounter an issue, which is going to be a LOT.

I'll give you another hint: Make up your mind about variables/parameters types.
Your status parameter goes from boolean to string, which is asking for trouble.

4 Likes

Hear hear...

1 Like

1 Like