Skip to main content

Ignition Designer Basics: Navigation, Components, and Bindings

By NFM Consulting 1 min read

Key Takeaway

Getting started with the Ignition Designer — workspace layout, component palette, property bindings, tag browsing, and project resource management.

Quick Answer

The Ignition Designer is the integrated development environment where system integrators build HMI screens, configure tags, write scripts, design reports, and set up alarm pipelines. It launches from the gateway webpage and connects to the gateway over a secure channel.

Launching the Designer

Navigate to http://gateway-ip:8088 and click the Designer link. The Designer Launcher downloads and caches the application locally. On subsequent launches, it updates only changed modules. Log in with a gateway user account that has designer permissions.

Workspace Layout

The Designer workspace consists of:

  • Project Browser (left panel) — Tree view of all project resources including views, scripts, named queries, alarm pipelines, and reports.
  • Component Palette (right panel) — Draggable components for building screens (buttons, labels, charts, tables, tanks, pipes, etc.).
  • Tag Browser (bottom-left) — Hierarchical view of all OPC and memory tags with real-time values and quality indicators.
  • Property Editor (bottom-right) — Configuration panel for the selected component, showing all bindable properties, event handlers, and styles.

Property Bindings

Bindings connect component properties to live data sources. Common binding types include:

  • Tag Binding — Links a property directly to an OPC or memory tag value.
  • Expression Binding — Uses a formula or conditional logic to compute a property value from one or more tags.
  • Query Binding — Runs a SQL query and binds the result set to tables, dropdowns, or chart datasets.
  • Script Binding — Executes a Python script to compute a property value with full access to the system.* API.

Working with Views (Perspective) and Windows (Vision)

Perspective uses views organized by URL path, supporting responsive containers, flex layouts, and CSS-based styling. Vision uses windows with fixed pixel layouts and supports templates for reusable component groups. Both modules share the same tag browser, named queries, and scripting infrastructure.

Frequently Asked Questions

Ready to Get Started?

Our engineers are ready to help with your automation project.