Change style of disabled Perspective component(s)

Ignition
,
1

I have a confirmation popup screen of dropdown components and text fields. Is it possible to disable the components on the screen and change the color of the text?

I have an edit screen that the user can make changes to including various dropdowns and text fields. The user updates a record and I pass in an original dictionary and new dictionary of values to the confirmation popup screen. If any value in the original dictionary differs from the new dictionary then I want the confirmation screen to show red text instead of normal text. However, I also don't want the user clicking on the dropdown component.

One solution I could do is pass in the actual text of the dropdown instead of the dropdown ID but I wanted to know if there was a quicker way.

One thing I saw in older forum posts is use the following:

but I am not sure how or where to change this on the confirmation popup screen.

2

Synthetica is for Java Swing, and therefore specific to Vision. It won't help you in Perspective at all.

1 Like
3

I don't follow. What's the role of the dropdown ?

4

So on the original submission screen the user selects values from a dropdown list. The dropdown list is populated by a name query that essentially looks up a UserID and a Username. Instead of passing the Username to the popup confirmation box I am just passing the UserID.

5

I'm confused, you say here that you don't want the user clicking on the dropdown.

How do people select things from it ?

How is the whole thing relevant to the popup ?

6

The popup isn't really relevant at all to my problem. It is just one of the components on the confirmation screen.

The root problem is I want to disable the popup with the enabled property but also style the text color to be red. It seems I can do either option but not both.

7

I still have no idea what the whole thing should look like, but it sounds like what you're really asking is "How do I style something that's disabled". Am I close enough ?

for the container:

.ia_dropdown--disabled {
	background-color: blue;
	outline: solid 1px red;
}

and for the text inside:

.ia_dropdown--disabled .iaDropdownCommon_container div {
	color: yellow;
}

Paste that in the stylesheet, and play with it to get the style you want.

If you need it to be dynamic, create a style class, use that style class' name in the stylesheet, then give that class to your dropdown dynamically.
Actually, make the style class anyway, or every disabled dropdown everywhere will get this style.

.psc-disabled_dropdown.ia_dropdown--disabled {
	background-color: blue;
	outline: solid 1px red;
}

.psc-disabled_dropdown.ia_dropdown--disabled .iaDropdownCommon_container div {
	color: yellow;
}

Note that there's NO space between the first selectors, we want to target elements with BOTH classes.

Give this class to your dropdowns:
image

2 Likes
8

I got distracted and then didn't have a chance to get back to this for a while.

I am trying this on a version before the advanced stylesheet was available but got it to work with the following steps.

  1. Create a style anywhere you want. I put it in a folder.

image

  1. Paste following code in the background color.
}.psc-disabled_dropdown.ia_dropdown--disabled .iaDropdownCommon_container div { color: #FF0000; }{

image
image1246×632 36.7 KB

  1. Disable the dropdown component you want the style applied on and then for the style class put disabled_dropdown.

image

  1. Results will appear as expected.
    image

Thanks @pascal.fragnoud