Application Example: Standalone Pages - WinCC OA Workspace

Standalone workspace that delivers a collection of demo standalone pages for WinCC OA WebUI.

What it does

Five self-contained HMI demo pages, each registered as an independent route:

| Page | Route | Description | | -------------- | ----------------- | ---------------------------------------------------------------------------------------- | | SCADA Demo | /scada-demo | Water treatment process - two-tank flow diagram with live pump/valve controls | | HVAC Control | /hvac-control | Air handling unit - SVG diagram with temperature monitoring and fan/coil controls | | Energy Monitor | /energy-monitor | Power distribution - single-line diagram with circuit breaker controls and trend chart | | Plant Map | /plant-map | Facility monitoring - pan/zoom map with 100 live datapoint markers | | Bottle Line | /bottle-line | Production line showcase - animated conveyor, KPI strip, alarm panel, and history viewer |

All live data is streamed from WinCC OA via OaRxJsApi.

Installation

The package supports two install layouts.

Option A: Directly into a WinCC OA project

Prerequisite - {OA-PROJECT}/data/dashboard-wc/menuconfig.json must exist before you install. The postinstall writes the menu entries to this file. If data/dashboard-wc/ is missing, create it and copy the default menuconfig.json from your WinCC OA installation into it.

cd {OA-PROJECT}/data/WebUI
npm install @wincc-oa/ae-standalone-pages --omit=peer --omit=dev --foreground-scripts

The postinstall merges the five menu entries into ../dashboard-wc/menuconfig.json. No other files are copied.

Option B: Into a webui-runtime workspace

npm install @wincc-oa/ae-standalone-pages

The postinstall:

1. Merges the five menu entries into apps/dashboard-wc/config/menuconfig.jsonc.
2. Creates one shim per page in libs/default-components/src/lib/standalone-pages/ (scada-demo.ts, hvac-control.ts, energy-monitor.ts, plant-map.ts, bottle-line.ts).

First visit to a page may take a few extra seconds - Vite's dev server optimizes new dependencies on first use. This happens once per dependency set and does not repeat on later visits or dev server restarts.

Page registration

The package includes a wui-page.json manifest. When deployed, WinCC OA WebUI registers:

| Property | SCADA Demo | HVAC Control | Energy Monitor | Plant Map | Bottle Line | | ---------- | ------------------ | -------------------- | ---------------------- | ----------------- | ------------------- | | Route | /scada-demo | /hvac-control | /energy-monitor | /plant-map | /bottle-line | | Component | <wui-scada-demo> | <wui-hvac-control> | <wui-energy-monitor> | <wui-plant-map> | <wui-bottle-line> | | Permission | connected | connected | connected | connected | connected |