Dashboard Customization

interface AppConfig {
  headerLogo: string; // Logo in application header
  login: {
    backgroundLogo: string; // Background image
    formLogo: string; // Logo on login form
  };
  appTitle: MultiLangString | string; // App title in header
  documentTitle: MultiLangString | string; // Browser tab title
}

Titles can be specified as:

1. Translation key (recommended for i18n):

   "appTitle": "WUI_General.App.Title"

2. Multilang object (direct text per locale):

   "appTitle": {
     "en_US.utf8": "My Dashboard",
     "de_DE.utf8": "Mein Dashboard"
   }

{
  "headerLogo": "/data/dashboard-wc/assets/my-logo.png",
  "login": {
    "backgroundLogo": "/data/dashboard-wc/assets/loginscreen.svg",
    "formLogo": "/data/dashboard-wc/assets/logo.png"
  },
  "appTitle": {
    "en_US.utf8": "My Application",
    "de_DE.utf8": "Meine Anwendung"
  },
  "documentTitle": {
    "en_US.utf8": "My Application",
    "de_DE.utf8": "Meine Anwendung"
  }
}

type MenuPermission =
  | 'connected' // User is logged in
  | 'disconnected' // User is logged out
  | 'canEdit' // User has edit permission
  | 'canPublish' // User has publish permission
  | 'canWrite'; // User has write permission

interface MenuEntry {
  title?: MultiLangString | string; // Display text
  icon?: string; // Siemens IX icon name
  path: string; // Route path (supports :param syntax)
  params?: Record<string, string | number>; // Default route parameters
  permission?: MenuPermission[]; // Visibility (OR logic)
  children?: MenuEntry[]; // Nested entries
  url?: string; // External URL
  target?: '_blank' | '_self';
  search?: string; // Query string
  generator?: string; // Dynamic menu component
  module?: string; // External JS module to lazy-load
  component?: string; // Web component tag name to render
}

• Permissions use OR logic: item is visible if user has ANY listed permission

• If no permission array is specified, the item is always visible

• Permission-based redirects:

  • connected fails → redirects to /login

  • disconnected fails → redirects to /dashboard

Generators are custom elements that dynamically render menu items:

{
  "generator": "wui-dashboard-favorites-menu",
  "path": "",
  "permission": ["connected"]
}

The generator component must be imported in demo-ix-menu.ts and render ix-menu-item or ix-menu-category elements.

Menu entries can define routes that lazy-load external JavaScript modules. This allows adding new pages without modifying the application code.

Required fields:

• path - Route path (can include :param placeholders)

• module - URL to the JavaScript module to load

• component - Web component tag name to render

Optional fields:

• params - Default values for route parameters (used in menu link)

• permission - Route guard permissions

{
  "title": "Test Page",
  "icon": "rocket",
  "path": "/test/:input",
  "params": { "input": "world" },
  "module": "/data/WebUI/pages/demo-test.js",
  "component": "demo-welcome"
}

This example:

1. Adds a "Test Page" menu item linking to /test/world

2. When navigated to, lazy-loads /data/WebUI/pages/demo-test.js

3. Renders the <demo-welcome> component with input="world" attribute

The external module must register its web component (e.g., using @customElement('demo-welcome')).

{
  "entries": [
    {
      "title": "WUI_General.Paths./login",
      "icon": "log-in",
      "path": "/login",
      "permission": ["disconnected"]
    },
    {
      "generator": "wui-dashboard-favorites-menu",
      "path": "",
      "permission": ["connected"]
    },
    {
      "title": "WUI_General.Paths./dashboard/overview",
      "icon": "card-layout",
      "path": "/dashboard/overview",
      "permission": ["connected"]
    },
    {
      "title": "WUI_General.Action.Help",
      "icon": "question",
      "url": "https://example.com/docs",
      "target": "_blank",
      "path": ""
    }
  ]
}

Use :root[data-ix-theme='classic'] to match IX theme selectors. The file is loaded with a small delay to ensure it applies after IX styles, even in Vite dev mode.

Important: You must specify the theme name (e.g., 'classic') to match IX's selectors.

/* Theme overrides (both light and dark modes) */
:root[data-ix-theme='classic'] {
  /* Brand colors */
  --theme-color-primary: #00a550;
  --theme-color-secondary: #0066b3;

  /* Siemens IX color tokens */
  --theme-color-success: #00c853;
  --theme-color-warning: #ff9800;
  --theme-color-alarm: #f44336;
}

/* Light theme specific overrides */
:root[data-ix-theme='classic'][data-ix-color-schema='light'] {
  --theme-color-primary: #00a550;
}

/* Dark theme specific overrides */
:root[data-ix-theme='classic'][data-ix-color-schema='dark'] {
  --theme-color-primary: #00c853;
}

See the Siemens IX documentation for the full list of CSS custom properties.

config: ['/data/dashboard-wc/manifest.webmanifest', '/data/dashboard-wc/appconfig.json', '/data/dashboard-wc/menuconfig.json'];