After the fix, the Perspective screen renders the intended alert or chart while its data path remains testable from the displayed value back through the binding, gateway connection, and controller. The key decision is whether to build the interface as a reusable Perspective view, load an external web application through Web Dev and an iframe, or package a native custom component in an Ignition module.
What is the screen telling you?
Start with the operator-visible behavior. A blank chart, stale alert, or control that accepts clicks but does not change the process value points to different layers. Do not begin by rebuilding the component.
| Screen symptom | First location to inspect | Likely effect |
|---|---|---|
| The entire element is missing | View embedding, browser console, or custom module state | The component never mounted, its resources failed to load, or the module is not running. |
| The element renders with the wrong appearance | Perspective styles and the advanced stylesheet | The data path may be sound; CSS selection, inheritance, or specificity is wrong. |
| The element renders but shows stale data | Property binding and message path | The tag can be correct while the binding, message handler, or external synchronization path is wrong. |
| Writes fail while values still display | Event handler, write target, permissions, and controller connection | The read path works, but the command path is incomplete or rejected. |
Use browser developer tools to inspect the rendered DOM, applied CSS, network requests, and JavaScript errors. A visible value does not prove that the event path works, and a correct tag value does not prove that the component consumes it. The check passes when you can classify the problem as rendering, styling, reading, or writing before changing the design.
Which implementation should you commission?
Choose the smallest architecture that satisfies reuse, data exchange, and maintenance requirements. Both an embedded Perspective view and a native component can deliver a reusable alert. They solve different problems.
| Configuration | Location | Use it when | Operational effect |
|---|---|---|---|
| Reusable Perspective view | Perspective project | Standard Perspective components, bindings, styles, and message handlers can produce the behavior. | Data remains in the normal Perspective property and binding model. |
| External web application |
Web Dev resource displayed through an iframe
|
The content is largely self-contained and needs little or no live session exchange. | Rendering is isolated, but bidirectional synchronization becomes an integration task. |
| Native custom component | Packaged Ignition module | The control needs first-class Perspective properties, events, repeated use, or specialized React rendering. | The component can appear in the Perspective component panel after the module loads correctly. |
For a Bootstrap-style alert already implemented as an embedded view, keep the view unless a first-class component contract produces a measurable benefit. For a specialized chart requiring a dedicated browser library, native packaging provides tighter Perspective integration; an external page is faster only when isolation is acceptable. The check passes when the selected option has an explicit requirement for data input, user output, reuse, and deployment.
How do you prove the tag and binding before adding code?
Build a temporary display from standard Perspective components and bind it to the same source property intended for the custom control. Trace the value in order: controller value, gateway driver or device connection, tag value, view binding, then rendered property. This isolates the data plane from React, CSS, and external-page behavior.
- Read the process value at the controller or through the gateway’s device diagnostics.
- Confirm that the corresponding tag changes with the controller value and reports acceptable quality.
- Bind a standard Perspective display component directly to that tag.
- Expose the same value as an input parameter on the reusable view, external integration boundary, or native component.
- Change the source deliberately and verify that every layer reports the same state.
For an alert, test inactive and active conditions rather than appearance alone. For a graph, test a changing numeric value and verify that new samples reach the component. If a standard display follows the tag but the custom display does not, the tag is right; the binding is wrong. The check passes when the temporary display and the intended component input change together.
How do you commission an embedded Perspective view?
A reusable view is the preferred configuration when Perspective can already provide the required structure. Define a small property contract: inputs for message, severity, visibility, or chart data, and outputs only where the parent must react. Keep session- or page-specific references outside the reusable view so the same object behaves consistently wherever it is embedded.
- Create the visual structure with standard Perspective components.
- Apply component styles first; enable the advanced stylesheet when project-level CSS rules or reusable classes are required.
- Bind view inputs to child properties and transformations.
- Route user actions through Perspective events or message handlers.
- Embed the view in a test page and supply known input values.
Study the generated CSS with browser developer tools before overriding it. Broad selectors can change unrelated components, while an overly specific selector can make later maintenance difficult. Treat animation and visual effects as CSS concerns unless the state must be calculated from process data. The check passes when two instances accept different inputs without sharing state or requiring instance-specific scripts.
How do you commission an external or native component?
Use Web Dev with an iframe for self-contained content. Define the communication boundary before implementation: which values enter the page, which operator actions return, and how navigation, authentication, and failure are represented. A page that only displays static or independently sourced content is a good fit. Frequent live synchronization with the Perspective session makes this option progressively more complicated.
Use a native component when it must participate directly in Perspective’s property and event model. This path requires advanced React and front-end knowledge, TypeScript or JavaScript, basic Webpack knowledge, and enough Java knowledge to build and package an Ignition module. Ignition modules are packaged as .zip files containing Java code and associated resources.
Match the component example and build approach to the target Ignition generation. An example identified for 8.0.X does not automatically build against 8.1.X; breaking API changes were reported between those lines. A module displayed by the gateway in state New has not reached a usable running state, so the component cannot be commissioned from the panel. Inspect the gateway module status and build output before debugging React rendering.
The check passes only when the gateway shows the module as running, the Designer exposes the component in the Perspective component panel, and a test instance mounts without browser-console errors.
How do you verify the complete operator path?
Run one controlled end-to-end test after the individual layers pass.
- Force or generate a known controller-side state through the approved commissioning method.
- Confirm the driver remains connected and the tag reports the expected value and quality.
- Confirm the Perspective binding delivers that value to the component property.
- Verify the alert text, severity, visibility, or chart point matches the input.
- Trigger each operator event and confirm its handler targets the intended property or tag.
- Reload the session and repeat the test to catch initialization, module-loading, and external-page timing faults.
Watch the browser console and gateway diagnostics during the test. A clean initial render is not enough: test value changes, repeated mounting, navigation away and back, and loss and restoration of the underlying connection. The check passes when the displayed state, tag value, and controller state agree after both a live change and a session reload.
FAQ
What happens if an Ignition Perspective module stays in New state?
The custom component will not be ready for use in the Designer. Check the module build output, gateway module diagnostics, and compatibility with the target Ignition line before investigating component properties or CSS.
What happens if an iframe needs live Perspective tag updates?
You must design and maintain a bidirectional synchronization path between the Perspective session and the external page. If updates and operator events are frequent, use a reusable Perspective view or native component so the data remains in the normal property and event model.
What happens if the tag changes but the custom component does not?
Bind a standard Perspective display to the same tag, then compare it with the custom component input. If the standard display updates, inspect the view parameter, property binding, transformation, message handler, or external synchronization boundary; finish by changing the controller value and verifying the controller, tag, binding, and screen all agree.