Siemens WinCC Unified Custom Web Control Template

[antsals]

Select Topic Area

Question

Copilot Feature Area

Copilot Coding Agent

Body

I have a pretty basic knowledge of coding, but been really successful with copilot.
I have been creating widgets for an industrial automation system called Siemens WinCC Unified. It has the ability to import Custom Web Controls, but need to be in a specific structure and have specific elements in the files. Is there a way to get copilot to learn this structure and use the templates, as I get loads of errors at the moment when importing into Siemens TIA portal.

The Siemens info is:
https://support.industry.siemens.com/cs/document/109779176/integrating-user-defined-controls-into-wincc-unified-(custom-web-controls)?dti=0&lc=en-GB

Appreciate any help.

[Nyxox-debug]

Use well-commented templates and consistent file structures to help Copilot learn and generate valid Siemens WinCC Unified custom web controls.

[antsals]

Is there any examples of a well commented structured file...to see what good looks like?

Cheers

[AlexanderLasson]

Example

{
  // Unique identifier for the control — must remain stable once released
  "identity": {
    "name": "GaugeMeter",            
    "version": "1.0.0",             
    "displayname": "Gauge Meter",   
    "icon": "./assets/logo.png",    
    "type": "guid://551BF148-2F0D-4293-99C2-C9C3A1A6A073",
    "start": "./control/index.html"
  },
  // Optional runtime constraints and environment info
  "environment": {
    "prerequisites": {
      "renderingspace": {
        "minwidth": 150,
        "minheight": 100,
        "unit": "px"
      }
    },
    "extensions": {
      "HMI": {
        "mandatory": true,
        "version": "~1.0.0"
      }
    }
  },
  // Non-functional descriptive metadata
  "metadata": {
    "author": "Your Name",
    "keywords": ["gauge", "visualization"],
    "description": "A gauge to display a numeric tag value.",
    "homepage": "https://your-repo.example.com",
    "company": "Your Company"
  },
  // Interface contract with WinCC Unified
  "contracts": {
    "properties": {
      "GaugeValue": {
        "type": "number",
        "default": 0,
        "description": "Current gauge value to display."
      },
      "MinValue": {
        "type": "number",
        "default": 0,
        "description": "Minimum gauge value."
      },
      "MaxValue": {
        "type": "number",
        "default": 100,
        "description": "Maximum gauge value."
      }
    },
    "events": {
      "ValueChanged": {
        "arguments": {
          "newValue": { "type": "number" }
        },
        "description": "Fired when the gauge value changes."
      }
    },
    "methods": {
      "ResetGauge": {
        "description": "Reset the gauge to default state.",
        "parameters": {},
        "return": "null"
      }
    }
  }
}

[antsals]

Can I just feed this in as an example.....or do I need to further comment into it?