Configuring Back Button Navigation in Siemens WinCC HMI Projects

1. Overview: Screen Navigation Models in WinCC

Siemens WinCC – in all its variants (WinCC flexible 2008, WinCC Comfort/Advanced, WinCC Professional, and the current TIA Portal WinCC Unified) – does not ship with a single one-size-fits-all "Back" template the way Schneider Electric's Vijeo Citect historically did. Instead, WinCC exposes the building blocks (picture tree, picture stack, screen windows, and configurable system functions) that the engineer wires together to produce identical behavior. The three primary navigation primitives are:

• Permanent window – a strip (header, footer, or side bar) that remains visible while the contents of a higher-level screen window change. This is where the Back button is normally anchored.
• Screen window (Bildfenster / Screen Window) – a container into which WinCC loads process pictures at runtime via the ChangePicture / Bildanwahl function.
• Picture stack (Bildstack) – an internal LIFO buffer maintained by WinCC Runtime. Each call to ChangePicture pushes the previous picture name; the system function PreviousPicture / VorherigesBild pops the stack and returns the user to the prior view. This is the conceptual equivalent of a browser "Back" button.

The two recommended implementation paths are:

1. Static, configurator-driven – point the button at a specific parent picture in the Picture Tree Manager. No scripting, deterministic behavior, easy to validate during FAT.
2. Dynamic, history-driven – use the picture stack so the button always returns to the actual last visited screen, regardless of navigation path.

Most production lines combine both: a permanent "Home" button bound to a fixed parent picture, plus a "Back" button bound to PreviousPicture.

2. Prerequisites and Version Matrix

Confirm the runtime environment before writing code, because the available functions differ across product lines. The following table summarizes the capabilities relevant to navigation:

Engineers migrating from Citect to WinCC should treat the picture stack as the new "template," because the stack is what gives WinCC the same depth-aware history that Citect's BACK command assumes.

3. Planning the Screen Hierarchy

Before configuring any button, map the intended navigation graph. A typical process plant HMI uses three tiers:

1. Area overview (e.g. Overview_Reactor) – the parent picture for any detail view.
2. Process units (e.g. Reactor_01, Reactor_02) – child pictures of the area.
3. Detail / faceplate (e.g. Reactor_01_Detail, Reactor_01_Trend) – grandchildren, used for maintenance and diagnostics.

Recommended depth limits:

Engineers should sketch the hierarchy on paper or whiteboard first, because every picture added below the third level is one more entry that can overflow the stack if a careless user mashes "Forward." When a user clicks "Back" on a screen deeper than the configured stack depth, WinCC silently discards the oldest entries and the user is taken to the most recent surviving ancestor.

4. Configuring the OS Project Editor (PC-based RT only)

The OS Project Editor is only present in WinCC Professional (TIA Portal) and in classic WinCC V7.x. It defines the runtime layout, including monitor resolution, number of monitor containers, and the picture stack depth. To open it in TIA Portal WinCC Professional V17/V18:

1. Expand the HMI device (PC station) in the project tree.
2. Open Runtime settings → OS Project Editor.
3. Switch to the Layout tab. Confirm the design resolution matches the target hardware (1920×1080 is the current default; older projects may still use 1280×1024 or 1680×1050).
4. Switch to the General tab. Set Number of containers to the number of independently navigable screen windows you intend to use (typically 1 for single-window applications, 2-4 for plant overview stations with a permanent header plus a content window).
5. Under Picture stack, enter the maximum depth. The default in WinCC Professional is 32; raise it to 128 for complex line overview displays.
6. Compile the OS; rebuild the runtime only when the project editor values change.

5. Configuring the Back Button via the Right-Click Configurator

The classic method available in every WinCC panel project (WinCC flexible, WinCC Comfort/Advanced, and WinCC Professional in the picture window context) lets you bind a button to a specific picture without writing a single line of script:

1. Open the parent picture that will host the navigation button (typically the project root or area overview).
2. From the Tools palette, drag a Button graphic object onto the permanent window / header area.
3. Right-click the button and choose Properties (or Configuration dialog in older builds).
4. In the configuration dialog, select the Events tab → Click.
5. The dialog shows a dropdown or list of system functions. Choose ChangePicture (German: Bildanwahl) or, in WinCC Unified, ActivateScreen.
6. Below the function selection, a parameter box appears. Click the ellipsis (…) to open the picture name picker. The picker lists every process picture compiled into the project. Select the target picture (e.g. Overview_Reactor).
7. Do not select any picture whose name begins with "@". System screens (configuration, language, login, archive, diagnostics) are reserved for the runtime framework; jumping to them via a navigation button can leave the operator trapped in a non-process context.
8. Set the Picture window parameter to the target screen window number (default 0 for the main window, 1+ for additional containers in WinCC Professional).
9. Click OK, save, and compile the HMI.

5.1 Why the Configurator Exists

The configurator is a thin wizard around the underlying tag and function-call wiring. When the user clicks the button at runtime, WinCC executes a single line equivalent to the following VBScript (visible in the event's generated code):

or, in classic WinCC C syntax:

The configurator approach is preferred over hand-typed scripts because the wizard validates that the target picture exists in the compiled project at compile time. A typo in a hand-written script only surfaces during runtime and frequently produces a benign-looking silent failure.

6. Dynamic Navigation with the Picture Stack

For applications where the user may enter a deep hierarchy from any of several starting points (alarm acknowledgment, recipe navigation, maintenance branching), a hard-coded parent reference is too rigid. Use the picture stack instead:

1. Insert a Button object into the permanent window.
2. Label it "Back" (or an internationally neutral icon such as a left-pointing arrow).
3. On the Click event, select the system function PreviousPicture (German: VorherigesBild).
4. Accept the default parameters; no picture name is required because the stack is maintained automatically by the runtime.

The runtime pushes the current picture onto the stack every time a ChangePicture call executes. PreviousPicture pops the top entry, re-loads that picture, and removes the current picture from the stack. This produces correct browser-style back behavior even if the user jumped from a recipe screen directly to a deep diagnostic page.

7. Hybrid Configuration: Home + Back

Production HMI stations almost always use both primitives simultaneously. Wire two buttons into the permanent header:

The NextPicture function exists but is rarely deployed, because the picture stack model in WinCC is single-direction for most use cases and pushing forward entries complicates FAT validation.

8. Picture Tree Manager Setup (WinCC Professional / V7.x)

The Picture Tree Manager is a PC-based RT feature that lets the engineer pre-declare navigation relationships. The tree is not strictly required for the Back button to work, but it is required if you want:

• Automatic alarm routing: alarms raised on a child picture can be configured to navigate the operator to the offending faceplate when acknowledged.
• Tree-aware user rights: a user group can be granted access to a sub-tree only.
• Generated breadcrumbs in WinCC Professional's web-based control room add-on.

To configure it:

1. Open the HMI device → Picture Tree Manager (visible only in WinCC Professional and classic WinCC V7).
2. Add a root node. The root's name should match the picture you intend to use as the start-up screen (Root_Overview in our example).
3. Add child nodes for each area, and grand-children for each detail. The tree depth is informational; it does not enforce runtime navigation.
4. Save and compile.

8.1 Linking the Tree to the Back Button

The Picture Tree Manager is read by the alarm subsystem and by the optional WinCC/WebUX server. The Back button does not query the tree directly. However, the tree's root picture is a useful default target for the Home button because it guarantees that the Home button always points at a screen that the operator has permission to view.

9. Scripting Alternatives

When the configurator is too rigid (e.g. you need role-based "Back" targets, or you need to clear the stack after a recipe change), drop to scripting. The two most common choices are VBScript (WinCC Professional, WinCC RT Advanced, WinCC Unified) and ANSI-C (classic WinCC V7).

9.1 VBScript Example: Role-Aware Home

' Returns the operator to the highest picture
' their current user group is allowed to see.
Sub OnClick(ByVal Item)
    Dim sTarget
    Select Case SmartTags("CurrentUserGroup")
        Case "Administrator"   sTarget = "Root_Overview"
        Case "Operator"        sTarget = "Area_Overview"
        Case "Maintenance"     sTarget = "Maintenance_Landing"
        Case Else              sTarget = "Root_Overview"
    End Select
    HMIRuntime.BaseScreenName = sTarget
    ' Clear the picture stack so a stale "Back" does not
    ' pull the operator back into a screen they no longer have rights to.
    HMIRuntime.ClearPictureStack 0
End Sub

9.2 ANSI-C Example (WinCC V7.x)

// Triggered by the "Home" button click event
char* szTarget = "Root_Overview";
SetPictureName(szTarget);
// Reset the picture stack so subsequent "Back" presses
// stay within the operator's current authorization context.
ResetPictureStack();

9.3 JavaScript (WinCC Unified V18+)

// Triggered by the "Back" button click event in Unified
import { ActivatePreviousScreen } from "HMIRuntime";
export function Button_Back_OnClick(item) {
    ActivatePreviousScreen("MainWindow");
}

10. Working with System Screens ("@"-prefixed Pictures)

Every WinCC runtime ships with a library of system screens whose names begin with "@". The most common are:

The configurator intentionally hides these from the picture-name picker in older versions and grays them out in newer versions. Selecting one with a hand-typed script will compile, but at runtime WinCC will refuse to navigate to it and will log error 0x80040001 ("Invalid picture name") in the diagnostics window. Use the dedicated system function (ShowLoginDialog, ShowLanguageDialog, etc.) instead of a raw ChangePicture call whenever you need to invoke a system screen.

11. Migrating Vijeo Citect Templates to WinCC

Engineers who previously used Citect will recognize the following template concepts. The mapping table is the fastest way to find the equivalent WinCC primitive:

One Citect-to-WinCC migration trap: Citect's BACK command is unconditional and remembers the path through the entire menu tree. WinCC's PreviousPicture stack is per-screen-window. If you operate with multiple screen windows and expect a single global Back, configure every screen window with the same back target (typically the project root) using the configurator, and use the picture stack only within the primary content window.

12. Verification and FAT Checklist

Before shipping a WinCC runtime to production, exercise the following sequence on the real target hardware. None of the steps require scripts; everything can be tested with the configurator-driven button.

1. Power on. The start-up screen (configured in Runtime settings → Start screen) loads.
2. Click the Home button from any screen. The root overview appears. Confirm the elapsed time is < 500 ms on a Comfort panel, < 200 ms on a PC RT.
3. Drill from Root_Overview → Reactor_01 → Reactor_01_Detail. Verify each level loads.
4. Click Back three times. The picture stack unwinds in reverse order. Confirm the final screen is the start-up screen and not a system screen.
5. Click Home after step 4. Confirm the picture stack is empty (or, if you scripted clear-on-home, confirm the next Back press returns to the current screen rather than the start-up screen).
6. Open a new browser tab (or a second instance) if your project supports it. Navigate to a different sub-tree, then return. Verify that the Back button does not cross over from one sub-tree to another unless you intentionally wired a global navigation path.
7. Sign in as a different user group. Verify the Back button does not expose a picture the new role is not authorized to see. The audit log should show no ChangePicture calls into unauthorized pictures.
8. Force an alarm on a child screen. Acknowledge the alarm. The alarm system should navigate to the offending picture (if configured) or, at minimum, light up the alarm row. The Back button should remain functional afterward.
9. Power-cycle the runtime. Confirm the start-up screen loads within the OS-designated boot time and that the picture stack is empty (this is the default; only a deliberate persistent-stack configuration would survive a restart).

Record the test results in the project's Factory Acceptance Test (FAT) document. WinCC Professional's audit trail captures every ChangePicture event with a timestamp and the operator's user name; Comfort/Advanced panels do not log screen changes by default and require an optional audit configuration to do so.

13. Troubleshooting Matrix

14. Performance and Best-Practice Notes

• Compile-time validation: Always prefer the configurator for static navigation. It validates the target picture at compile time, surfaces broken references in the TIA Portal "Compile" output, and survives engineering tool upgrades better than hand-typed scripts.
• Picture stack hygiene: Clear the picture stack on logon, on logoff, and on any authorization change. A stale entry is the single most common source of "the operator saw something they should not have" security findings during audits.
• Picture naming: Adopt a single naming convention. The common form is [Area]_[Unit]_[View] (e.g. Boiler_03_Detail). Avoid spaces and non-ASCII characters. WinCC accepts them but the audit-log export to CSV sometimes mangles UTF-8.
• Picture-window count: For PC-based RT, more screen windows cost CPU time and, when populated with faceplates, RAM. Four is a practical maximum for an HMI station that is also running a soft controller (e.g. WinAC) on the same hardware.
• Alarm loop-in: Configure loop-in-alarm on the alarm subsystem so the Back button on the child picture (raised by the alarm) does not become the only path to recovery. The operator must always be one click away from the alarm view.
• Touch-target sizing: The Back button is a critical safety path. On Comfort panels sized 4"-7", the minimum touch target is 60 × 60 pixels; on 9"-12" panels, 80 × 80 pixels; on PC stations running at 1920 × 1080, 48 × 48 physical pixels (matching ISO 9355-3 / DIN EN 894-1 guidance for finger-actuated controls). Smaller targets lead to mis-clicks, which in turn lead to the operator abandoning the button entirely.
• Iconography: Use a left-pointing arrow (←) for Back, a house icon (⌂) for Home, and a right-pointing arrow (→) for Forward. Siemens' HMI template library provides SVGs of all three at the right touch sizes. The Back and Home icons should never be combined into a single button; they have different semantics and combining them confuses novice operators.

15. References for Further Verification

Confirm the specifics for the WinCC version deployed in your plant against the manufacturer documentation before commissioning. The following Siemens manuals cover the topics in this article:

• SIMATIC WinCC Professional V18 - System Manual – definitive source for the OS Project Editor, picture stack depth, and the full event-function catalog.
• SIMATIC WinCC V18 - Programming and Reference Manual – VBScript reference, including HMIRuntime.BaseScreenName and HMIRuntime.ClearPictureStack.
• SIMATIC HMI WinCC Unified V18 - System Manual – Unified-specific JavaScript API and the replacement of the configurator by the Events pane.
• SIMATIC WinCC Engineering V18 - Comfort/Advanced Manual – panel-specific configuration of the ChangePicture and PreviousPicture events.