Customizing Quality Overlays with CSS and Opt-Out Control

A red border and popup appear over one or more HMI components when their bound data has a quality problem. Treat that display as an alarm from the binding chain before changing its appearance: check the component binding, tag quality, driver connection, and controller value. If the condition is understood and acceptable, use Overlay Opt-out to suppress it. If the overlay must remain but needs a different presentation across roughly 250 components, apply CSS through the project stylesheet.css resource or the Gateway-wide theme.

What is the screen telling you?

The quality overlay belongs to the component's data-quality indication. Its red border, icon, and popup call attention to a value that the screen cannot currently treat as good data. Styling the overlay changes that indication; it does not repair the value or communication path behind it.

Open the affected component and compare its binding with a working component that uses the same type of data. Then inspect the bound tag's quality. The check passes when the displayed value and its quality agree with the known controller state.

Is the tag right but the binding wrong?

A correct controller value can still produce an overlay when the screen resolves the wrong tag, an expression fails, or a transform returns an unusable result. Work backward from the component instead of beginning with CSS.

1. Select the affected component and identify the property displaying the overlay.
2. Inspect the property's binding and record its tag path or other source.
3. Read that tag directly and compare its value and quality with the component result.
4. If the tag is bad, inspect the driver connection and then the controller-side data source.
5. If the tag is good, compare the binding, expression, and transforms with a working component.

Do not opt out while this chain is unresolved. Suppression can remove the operator's visible indication while the stale, missing, or otherwise invalid value remains on the screen. The check passes when the component follows the intended tag and changes with the controller value without producing an unexpected overlay.

Should you suppress or restyle the overlay?

The Designer does not directly expose customization of this UI element. Two supported configuration approaches are available: suppress the overlay through Overlay Opt-out, or style its CSS classes in a stylesheet. The correct choice depends on whether operators still need a visible quality indication.

For a small number of intentionally exempt components, opt-out is the clearer configuration because the exception stays with the component. For more than 250 tags and components that must retain the quality indication but use a less intrusive presentation, CSS avoids repeated component edits. Project CSS limits the change to one application; Gateway-wide theme CSS is preferable only when every project using that theme should inherit the same rule. The check passes when the chosen scope matches the intended population of screens.

How do you customize the overlay in project CSS?

Add the selectors to the project stylesheet.css resource. The following evidenced rule hides the error and micro icons initially, makes them visible after a two-second delay, and makes the error border and footer colors transparent:

.ia_qualityOverlay__icon--error {
  visibility: hidden;
  animation: iaOutlineShow 0s linear forwards;
  animation-delay: 2s;
}

.micro-icon-container {
  visibility: hidden;
  animation: iaOutlineShow 0s linear forwards;
  animation-delay: 2s;
}

@keyframes iaOutlineShow {
  to {
    visibility: visible;
  }
}

.ia_qualityOverlay--error {
  border-color: #00000000 !important;
}

.ia_qualityOverlay__footer--error {
  background-color: #00000000;
  color: #00000000;
}

1. Add the rules to the project stylesheet.
2. Open a screen containing a component that can be placed into the relevant error-quality state.
3. Trigger or reproduce that state without changing the component binding.
4. Observe the component immediately and again after 2s.
5. Confirm that the transparent footer text does not hide diagnostic information operators still require.

The alpha value in #00000000 makes those colors transparent. The !important declaration increases the border rule's precedence. The zero-duration animation changes visibility when its two-second delay expires; it does not fade the icon. The check passes when the project alone shows the revised presentation and the underlying quality state remains detectable by the intended cue.

How do you apply one style across many components?

Place the same rules in the Gateway-wide theming files when the presentation must be shared. This centralizes the styling for hundreds of components, but the selector scope is broader than a project resource. A later theme edit can therefore affect every screen using the matching classes.

1. Identify which projects consume the Gateway-wide theme.
2. Review each selector separately: error icon, micro icon, error border, and error footer.
3. Add only the rules required by the operator display standard.
4. Test a normal-quality component and an error-quality component in every affected project.
5. Check popups and compact components where transparent footer content or delayed icons could remove the only usable cue.

Avoid duplicating the same selector in both the Gateway-wide theme and project stylesheet.css unless the project is intentionally overriding the shared rule. Competing declarations make future troubleshooting dependent on CSS precedence rather than one identifiable configuration. The check passes when all targeted projects inherit the rule and an untargeted project remains unchanged.

How do you verify the complete controller-to-screen path?

Verification must prove both data integrity and presentation. A visually clean screen is not proof that its data is good.

1. Read the controller source and note its current state.
2. Confirm that the driver connection is operating and that the corresponding tag reports the intended value and good quality.
3. Confirm that the component binding references that tag and displays the same state.
4. Reproduce a genuine bad-quality condition and verify that the selected overlay cue still appears according to the configured CSS or opt-out policy.
5. Restore the data path and verify that the overlay clears and the live component value again matches the controller.

The final check is a controlled transition from good quality to bad quality and back to good quality while observing the controller value, tag quality, component value, and overlay at each stage.

FAQ