Application Example: Central Asset Management - WinCC OA Workspace

Standalone workspace that delivers the Central Asset Management (CAM) application example (standalone page) for WinCC OA WebUI.

What it does

CAM provides a map-based overview of industrial plant sites with:

• Interactive map - Leaflet map with clustered SCADA element markers and alarm-state coloring
• KPI bar - aggregated plant metrics and alarm counts grouped by plant type
• Navigation panel - collapsible tree menu reflecting the plant hierarchy (world → region → country → city → plant)
• Details panel - scrollable list of plant cards filtered to the current map viewport, with OEE, metrics, contacts, and video links

All live data (alarms, KPIs) 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 modifies the menu entry in 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-central-asset-management --omit=peer --omit=dev --foreground-scripts

The install also drops central-asset-management.NEXT_STEPS.txt next to the DPL in {OA-PROJECT}/dplist/ with instructions on how to continue.

The postinstall:

1. Merges the menu entry into ../dashboard-wc/menuconfig.json.
2. Mirrors translations (oa-data/WebUI/msg/*) into ./msg/.
3. Mirrors the plant-hierarchy config (oa-data/dashboard-wc/cam-menu.yaml) into ../dashboard-wc/.
4. Mirrors the DPL into {OA-PROJECT}/dplist/central-asset-management.dpl. Manual ASCII Manager import is required - see below.

Option B: Into a webui-runtime workspace

npm install @wincc-oa/ae-central-asset-management

The postinstall:

1. Merges the menu entry into apps/dashboard-wc/config/menuconfig.jsonc.
2. Mirrors oa-data/ and CAM-setup-files/ into the host root.
3. Creates libs/default-components/src/lib/standalone-pages/central-asset-management.ts.

Build app first - to automatically deploy necessary files (translations, menus) into your WinCCOA project, you should run npm run build once after the install.

First visit to the page while the dev server is running may take a few extra seconds - Vite's dev server pre-bundles ("optimizes") any dependency it hasn't seen before the first time a page that imports it is opened. This one-time step adds a short delay before the page loads. Once it has run for a given dependency set it is cached, so subsequent visits load normally - even after restarting the dev server.

Required configuration

Two manual steps are required after installing, before the page will work correctly:

1. Import the DPL - see Importing datapoints via ASCII Manager below.

2. Allow external resources - the map (Leaflet + Esri tiles) loads content from external hosts (OpenStreetMap / Esri). WinCC OA WebUI's CSP blocks this by default, so enable it in the project's config file, under the section matching your WebUI backend:

   # webserver-js backend (default for WinCC OA WebUI)
   [webserverjs]
   allowExternalResources = 1

   # CTRL backend
   [wssServer]
   allowExternalResources = 1

   Without this setting the map tiles and markers will not load.

Importing datapoints via ASCII Manager

This step is easy to miss - installing the package never imports the DPL for you; it only places the file somewhere for you to import manually, and where it lands differs by install option.

• You find the necessary .dpl files either in your OA-project's dplist/ directory or in your webui-runtime workspace's CAM-setup-files/ directory. Import it using the WinCC OA ASCII Manager.

Without this import the CAM page will load but the plant list will be empty.

Configuration

Edit oa-data/dashboard-wc/cam-menu.yaml to match your plant topology. After postinstall this file is copied to the host's oa-data/dashboard-wc/ directory (only if it does not already exist there).

Structure:

menu:
  - id: world
    cnsPath: System1.CamMenu:world
    description: "WUI_CAM.Menu.World" # lit-translate key from WUI_CAM.json
    icon: globe
    children:
      - id: europe
        cnsPath: System1.CamMenu:world.europe
        description: "WUI_CAM.Menu.Europe"
        icon: location
        children:
          - id: berlin
            cnsPath: System1.CamMenu:world.europe.germany.berlin
            description: "WUI_CAM.Menu.Berlin"
            icon: customElectrolyzer
            plantDP: Plant_EU_Berlin # WinCC OA datapoint name
            plantDetailsDP: Plant_EU_Berlin_Details
            plantDetailsDPT: ElectrolyzerDetails
            alarmDPE: Plant_EU_Berlin.state.Alarm

The description field is a lit-translate key resolved from WUI_CAM.json. Add translations for any new nodes to both en_US.utf8/WUI_CAM.json and de_AT.utf8/WUI_CAM.json under the Menu section.

Available plant type keys and their icons/colors are defined in lib/cam/cam-types.ts and cam-color-service.ts.

Page registration

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

| Property | Value | | ---------- | ------------------------------------------------------ | | Route | /cam | | Component | <wui-central-asset-management> | | Menu icon | location | | Menu label | Central Asset Management / Zentrales Anlagenmanagement |