Skip to main content
Version: 7.9

Designer User Interface

Inductive University

Using Designer User Interface

Watch the video

Designer Workspace

The Designer is organized in panels around a central workspace. Some of these panels include: Project Browser, Tag Browser, and Property Editor. The workspace changes depending on the type of resource that you are currently editing. For example, if you are editing a Window, your workspace will be the Window Designer. If you are editing a Transaction Group, your workspace will be the Transaction Group Editor, and so on.

There are many dockable and dragable panels that surround the workspace, as well as the familiar menu bars and toolbars. The dockable panels can be rearranged as you wish and will snap into place as you move them around the screen. Each type of workspace can have panels that are only valid when that workspace is active. Each workspace remembers its own perspective, which is the docking arrangement of the panels around it.

If you have closed a panel and want to get it back, re-enable it from the View > Panels submenu. The View > Reset Panels will reset the user interface back to its default window arrangement.

" "

Docking System

The Designer's docking system provides a very flexible user interface, allowing you to customize the layout as you wish. To re-arrange the dockable panels, simply drag on their title bars. As you are dragging the panel, it will try to snap into place and show you a highlighted border. Use the highlighted border that appears to gauge where the panel will be moved to. Hold the CTRL key as you drag these panels to keep them from snapping into place. You can also drag these panels outside of the designer or onto a second monitor.

Dockable panels can be in one of four modes:

  1. Docked - The panel is visible, and located somewhere around the perimeter of the workspace. If two panels are docked in the same location, a tab strip will appear to switch between the two panels.

  2. Floating - A panel can be dragged outside of the workspace perimeter to be floated. The panel can now be positioned anywhere on your desktop.

  3. Pinned - Pinning a panel makes it minimize to one of the four sides of the Designer, represented by a small tab. Hover over the tab to use the panel.

  4. Hidden - A hidden panel is not shown. You can open it again by selecting it in the View > Panels menu.

Toolbars can also be rearranged and floated to your liking. Simply drag on the "textured" left edge of the toolbar. If you have re-arranged your panels into a layout that you don't like, you can quickly revert back to the default by selecting the View > Reset Panels option from the menu bar.


Your docking preferences are stored under %USER_HOME%/.ignition/*.layout. If you really want to reset your preferences, remove these files and restart the Designer.

File Menu

" "

The File Menu contains most of your basic options related to saving, similar to many other software applications on your PC.

NewThe New menu option allows you to create a new Object. That Object could be a new window, a new template, or even a new project. It can vary depending on what modules you have installed, also providing the ability to make new transaction groups, reports, Sequential Function Charts, and more.
OpenAllows you to Open a previously created project.
Save and Publish and RollbackBy default, saving and publishing are all done together. However, this can be changed to allow for just saving, where the changes will be saved but not pushed out to clients, and just publishing, where the new saved changes will be pushed out to the client. Rollback will allow you to 'roll back' to one of the 10 most recently saved versions of the project. See also: Versioning
Update ProjectMerges any changes from the gateway to the project, if for example there were multiple people working on the same project.
Ignition Exchange
New in 7.9.13
Opens the Ignition Exchange website.
Import and ExportAllows you to import or export specific resources into or out of the project. Export global will export globally scoped resources, such as Alarm Pipelines.

Edit Menu

" "

The Edit Menu is also similar to other applications edit menus, in that it provides much of the basic copy/paste functionality.

Undo and RedoCan be used to revert to the previous state, essentially removing the last change, or redoing it again after having been removed. This has a large queue that can be traversed but does not include every change. ie: Tag edits cannot be undone.
Cut/Copy/Paste/DuplicateThese function much the same as they do everywhere else. Most things in the Designer can be copied and pasted elsewhere, from individual components on the window to entire folders of windows. The difference is that when using paste with an object on a window, it will instead create a paste action, and allow you to move the mouse and select where you want to paste, clicking the mouse to confirm. Cancel Paste will cancel the paste action, while paste immediate will bypass the paste action, and instead immediately paste the object from where it was cut or copied from
Fine/ReplaceBrings up the find and replace interface to allow you to find specific objects within the project. See also: Find and Replace
Select AllSelects all siblings in the same container as the currently selected component.
Select Same TypeSelects all components of the same type in the same container as the currently selected component.
Select Same Type in WindowSelects all components of the same type as the currently selected component, regardless of what container they are in.
Group RenameRenames a group of components to a prefix with a number afterwords. For example, if your prefix is Button, it will rename all selected components Button (1), incrementing the number each component.
DeleteDeletes the currently selected component. This can also be done using the delete key.

View Menu

" "

The View Menu allows you to manipulate how various objects look or act in the designer.

Emulate TouchscreenSimulates Touchscreen mode in the Designer to be able to test it without having to open a client.
Disable OverlaysDisables the red or gray overlays on components because of a bad Tag or binding, but only in this Designer session.
Reset PanelsResets panels (Project Browser, Tag Browser, etc) to the default panel configuration.
PanelsAllows you to enable or disable certain panels within the Designer.
ToolbarsAllows you to enable or disable certain toolbars within the Designer.
Welcome ScreenTakes you to the welcome screen in the designer, or reopen it if it had been closed.
Grid SizeAllows you to select a grid size of 5 or 10.
Show GridToggles the grid on and off.
Snap to GridChanges click-and-drag behavior to snap components to grid lines. This works even when Show Grid is off.
Show GuidesShows any guide lines.
Snap to GuidesChanges click-and-drag behavior to snap components to any created guidelines.
New GuideAdds a guide line to the current window.
SpotlightsPuts a highlighted border around components that have the selected spotlight. Bound objects will get a green highlight, objects with scripting will get a blue highlight, and invisible objects will get a pink highlight. If a component has multiple highlights, and both are enabled, it will alternate the colors throughout the highlight.
DependenciesShows the binding dependencies (as arrows) based on the selected component or components. Show Supporters will show all components that the currently selected component is bound to, Show Dependents will show all components that are bound to the currently selected component, and Show All will show all of the bindings, regardless of the selected components.

Project Menu

" "

The Project Menu is where many project specific settings can be changed.

Designer CommsThe Comm settings allow you to select the level of communication the designer can have with the gateway. By default, this is set to Comm Read-Only, which will make any information coming from the gateway read only, but this can be changed to Comm Off which will turn prevent gateway communication, or Comm Read/Write, which will allow both read and write communications between the gateway. The default that the Designer opens at can be changed in the Project Properties. See also: Communication Modes
PropertiesOpens up the Project Properties window, allowing project settings to be changed. See also: Project Properties
Event ScriptsOpens up the appropriate event script window, either client or gateway. These can also be accessed from the project browser. See also: Client and Gateway Event Scripts
Preview ModePuts the Designer into preview mode, allowing you to interact with it like a client. See also: Previewing the Project
Preview LanguageDetermines the language that the Designer will revert to when in preview mode. See also Localization and Languages

Component Menu

" "

The Component Menu offers many of the same selections for the selected component that right clicking on that component would contain.

GroupOnly available when multiple components are selected. Grouping will place the currently selected components into a group. Ungroup will remove the grouping. See also: Working with Components
UngroupOnly available when a group is selected. This option removes the group (and any custom properties that are on the group) and places all items from that group into the object the group was in.
Convert to ContainerOnly available when a group is selected. Converts the selected group to a container. See also: Container
LockLocks or unlocks the selected component's size and position.
LayoutSet layout constraints for the selected component.
Size and PositionChange the size and position of the currently selected component.
CustomizersAllows you to select any of the available customizers for the currently selected component.
ScriptingBrings up the scripting window for the currently selected component
SecurityOpens up the Security Settings Panel, allowing security to be placed on the selected components.
TranslationsBrings up the Translatable Terms Panel, showing any translations for the selected component.

Alignment Menu

" "

These options allow you to adjust the alignment of components relative to other components.

MoveThe move commands move a component on its z axis, as in in front of or behind other components. It can be moved to the far back or front, or done in single steps.
AlignThe align commands move all selected components to the edge of the furthest component. So if Align Left was selected, it would move all components to the leftmost component's edge.
Align CentersAligns all of the selected components either vertically or horizontally on their centers.
Align as RowAligns all of the the components on their centers as a row or stack, and will add padding between them that you can select. Normalizing them will change the size of all of the components to the first selected component.
CenterCenters the currently selected components relative to their parents either vertically or horizontally.

Shape Menu

" "

The Shape Menu allows for manipulation of shape or path objects.

RotateRotates the currently selected shape 90 degrees either right or left.
MirrorFlips the component either vertically or hoizontally.
UnionAlters the first shape to be the combination of all selected shapes.
DifferenceAlters the first selected shapes by removing the last selected shape from them.
IntersectionAlters the first shape to become a new shape consiting of the area they share.
ExclusionAlters the first shape to become a new shape consiting of the area they do not share.
DivisionCuts the first shape into multiple shapes along the borders of other shapes.
To PathConverts a shape to a simple path object.
StrokeConverts the selected shape into a new shape defined by its stroke.

Tools Menu

" "

The Tools menu in the Designer provides some tools to help you when creating projects. The Console, Image Management, and Symbol Factory tools are described here.

ConsoleThe Output Console is the script-writers best friend. It is a dockable panel, and you can open it via the Tools > Console menu or the Ctrl-Shift-C keyboard shortcut. The output console is most frequently used to test and debug Python scripts in Ignition.

For example, by using the print function in your script, you can observe the inner workings of your script as it executes. If you executed the following script: see Console - Example Script

The output console is also available in the Vision Client from Help > Diagnostics. See also: Scripting, Help Menu
Image ManagementThe Image Manager is available from the Tools > Image Management menu. This tool is a drag-and-drop browser that helps manage the images that are stored on the Gateway. It is important to realize that these images are shared across all projects: they are not stored inside a project itself. Use the toolbar at the top to do common tasks like uploading new images and creating folders. You can drag images and folders from your computer's desktop or hard drive into this window to easily upload new images to the Gateway.

You can also get to this tool by putting an Component Palette > Display > Image component on a window, and clicking the browse button on the image's Image Path property. See also: Images (png, jpg, gif)
Script ConsoleOpens up the Scripting Console window. This is where you can test scripts out. See also: Script Console
Database Query BrowserOpens up the Database Query Browser Panel, which will allow you to run SQL queries against your database connections. See also: Database Query Browser
Translation ManagerOpens up the Translation Manager Panel, which will allow you to configure translations. See also: Localization and Languages
Cloud Templates Browser
Changed in 7.9.13
Cloud Templates have been moved to the new Ignition Exchange and are still available.
Symbol FactoryIf you have the Symbol Factory module installed, you'll be able to open the Symbol Factory browser under the Tools menu in the Designer. You can browse through the symbols or use the convenient search function to find the symbol you need.

Once you find a symbol, you can drag-and-drop it into a window. Each symbol is dropped as a shape group. You will be able to un-group it or double-click into the group just as if you had drawn the symbol yourself using fundamental shapes. This means that you can alter the shape if you need to, or bind any colors inside the shape to a tag to make the shape dynamic.
Launch ProjectAllows you to launch the project directly from the designer. You can either launch a staging or published windowed client, or a published full screen client.

Console - Example Script

Console - Example Script
# A python script that demonstrates the print statement
print "Print me first"
print x, y, x/y

# Result looks like this:
#Print me first
#10 2 5

Help Menu

" "

HelpOpens up your web browser and takes you to this User Manual, for quick reference.
Tip of the DayReopens the Tip of the Day popup that by default appears when you first open the Designer.
DiagnosticsThe Help menu in the Designer and the Vision Client has a Diagnostics window that contains a number of tabs each providing a useful troubleshooting feature. You can right-click on any of the tabs to show or hide the other tabs. These tabs or the troubleshooting features are as follows:

Performance Tab
Displays a number of small realtime charts that show various aspects of the currently executing Designer or Client's performance. These charts can be very useful to help troubleshoot performance issues, especially slow queries. One of the most common causes of query slowdown is simply running too many queries too frequently, and the # of Select Queries (Queries/Second) chart can help identify when this is occurring.

The statistics shown on this page apply to the current session only, you can see the Gateway statistics from the Status section of the Gateway.

Console Tab
Displays the Ignition Output Console.

Log Viewer
Displays the logged events for the current Designer or Client session. Whenever errors occur, they are logged and displayed in this tab. This is a good place to go when troubleshooting an issue, as any errors shown here may illuminate the cause of the problem. To view entries across all categories chronologically, uncheck the Group Categories checkbox.

Logging Levels
Determines the verbosity of a host of internal loggers. Most users will not use this tab unless prompted by a technical support representative.

Thread Viewer
Shows information about the currently running threads. Most users will not use this tab unless prompted by a technical support representative.

Displays the Gateway connection status as being connected or not.
About Ignition DesignerProvides information about the Designer such as the versions of the modules, java version, and gateway IP Address that the designer is using.