Siemens UI Module

Content Type: Module
Categories: User Interface

Overview

Important - The upgrade from Mendix 10 LTS to 11 LTS, and Atlas 3 to 4 brings breaking changes. We recommend following the upgrade guide to ensure a clean migration experience: https://siemens-design-systems.mendix.com/p/docs/getting-started/how-to-use/migration-mx11 .

-------------------------------------------------------------------------------------------------------------------------------------------


The Siemens UI Module helps developers build applications in Mendix using Siemens’ design principles. It provides a consistent way of working, development guidelines, and a rich set of Mendix Studio Pro assets — including layouts, page templates, building blocks, and UI snippets.


The module brings the Siemens Design Language to Mendix, enabling teams to create modern, scalable, and coherent user interfaces that align with Siemens product standards.

You can explore the reference implementation and design documentation here:

https://siemens-design-systems.mendix.com/.


When to Use

Use this module if you want to build Mendix applications that follow Siemens’ design patterns or if your solution integrates with, complements, or aligns visually with Siemens software products.


The module is intended to streamline development by offering reusable UI assets, reducing the effort required to create consistent layouts and components from scratch.


Installation

Installation instructions and usage guidance can be found in the online documentation: https://siemens-design-systems.mendix.com/p/docs/getting-started/how-to-use.

Documentation

The Siemens UI Module provides:

  • A standardized way of working
  • Development best practices
  • Mendix Studio Pro layouts
  • Page templates
  • Building blocks and reusable snippets

 

The module is built on the Siemens Design System (Version 2510) and will be updated with new versions, forming the foundation for all UI components included.

 

The Siemens UI Module provides layouts that adhere to the Siemens Design Language:

 

Icons are also included within the UI module: https://siemens-design-systems.mendix.com/p/docs/foundations/ix-icon-library.

Developers can choose the layout approach that best fits the structure and design of their Mendix application.

 

The module is designed to offer flexibility while ensuring alignment with Siemens’ overall design direction.

 

For more details and examples, visit the reference application:

https://siemens-design-systems.mendix.com/

Releases

Version: 2.2.1
Framework Version: 11.12.2
Release Notes:

Bug fixes

  • The new Theme Switcher caused errors when imported into a project, even when the functionality is not being used.

    • The snippet SNP_ThemeSelector has been replaced with building block DISW_theme_switcher_dropdown.

    • Renamed nanoflow DS_GetThemeSession to DS_GetThemeSession_Example and moved it under folder Nanoflows > USE_ME in the Siemens UI Module.

    • Updated DS_GetThemeSession_Example and documentation on Theme Switcher in the reference guide. Added Theme Switcher page under building blocks also.

    • Removed the Security on DS_GetThemeSession_Example.

    • Excluded DS_GetThemeSession_Example from the Siemens UI Module to counter the errors, so projects that aren’t using the Theme Switcher aren’t affected by the errors when using the Siemens UI Module 2.2.1 version.

  • Created and added building block preview images for DISW_theme_switcher_dropdown and DISW_tree_table.

  • Updated the SNP_APPName_Template, as it was still showing the outdated font-size.

Version: 2.2.0
Framework Version: 11.12.2
Release Notes:

Important update

  • DI SW Icons have been implemented to better adhere to the SDL guidelines.

    • The Common Icon library is deprecated and will be removed in the Siemens UI Module release of April 2027. We advise to migrate to / use the DI SW Icons before the end date.

General updates and improvements

  • Command Bar

    • Added logic to handle overflow in CommandBar.js action.

    • Created Building block Command Bar with overflow.

    • Added documentation on usage in reference guide.

  • Data Grid 2

    • Updated DISW_Table_with_CategoryFilters building block with status class 'status_critical' to the first element of the column and with Tooltip.

  • Cards

    • Read-only state for Cards is added.

    • Updated icon size to icons-24 for Show more (...) button for Complex Card & Compact.

    • Add extra property label (6 total) in Complex Card & Compact.

    • Updated buttons in Complex Card & Compact with larger size based on DM UX Figma file.

    • Updated all Card building blocks.

    • Added accessibility helper for disabled and read only Complex Cards.

  • Buttons

    • Subtle tertiary button has been added (which can be used e.g. in the header).

  • Navigation Tiles (page template)

    • Added background color using design property.

    • Updated the dark mode color for background-main color.

    • Updated border radius from 3px to 2px.

    • Added box shadow to elevation -2.

    • Updated page template to display multiple categories.

    • Updated row/col gap from the grid to match spacing.

    • Updated font-size of Title from h2 to h3.

  • Theme Switcher

    • Theme Switcher has been updated to adhere to the latest Siemens Design Language guidelines.

      • The segmented button Theme Toggle has been replaced with Combo Box and Popup Menu variations. More information can be found in our reference guide.

  • New layout: DISW_Application_Frame_topNavBar

    • Devs can now make use of this layout when no left navigation is needed.

Bug fixes

  • Tab container

    • Added missing CSS variables for tab container design properties.

  • Rich Text Editor

    • Included CSS fixes for newest version of Rich Text Editor.

      • There are vulnerabilities reported for versions 4.11.0 and below. We advise to use version 5.0.0 instead.

  • Buttons

    • Focus, hover, pressed state of base button fix.

    • Default button background changed to filled.

    • For disabled state card, show buttons also as disabled.

    • Fixed the background color for theme switcher and table (DG2) filters.

    • Icon-only hover icon color has been changed to the correct color.

  • Cards

    • Checkbox alignment fix in Card when used with icon image and Card Title.

    • Card title variable fix.

    • Added missing dark mode variables for read-only state Cards.

    • Updated ‘sticky-footer' to 'sticky-bottom’ in one of the card variations.

  • Empty State

    • Empty state images 48*48px + line-height correction.

    • Updated the background and border color of grey empty states.

    • Fixed one css variable mapping for text-detail.

  • Property Value

    • Font-size of value changed according to Siemens Design Language guidelines. Also, in building block Property Value Vertical grouped.

Pluggable components

  • TreeTable component (v1.0.0) is included in this release.

Dependencies

  • Atlas Core [4.3.7] → [4.5.0].

Version: 2.1.0
Framework Version: 11.12.2
Release Notes:

Important update

  • The Siemens UI Module v2.1.0 follows Siemens guidelines v2604.
  • Tokens have been updated to align with v2604.
  • Updated page templates with session controls in header now per v2604.


General updates and improvements

  • Updated Information bar colors for Warning state.
  • Added support for Mendix Calendar + radio/checkbox selection widgets [requested by Kshetri, Niraj (SMO RS C DCX DDA)].
  • Building blocks and Page templates have been cleaned up with better classification.
  • Updated preview images for alignment.
  • Added skills for Maia to make documentation and development easier.
  • Added documentation to fix text truncation issue with custom content[flagged by Thombare, Sagar (DI SW PLM DM MES MM R&D PLAT)].
  • Added focus state for tags inside gallery widget.
  • Aligned the height of tags per guidelines.
  • Added compact content variation for Accordion.
  • Added focus state for groupbox header.
  • Added version number on documentation for better clarity.
  • Updated colors for Clear selection on Gallery widget.
  • Made Avatar text centre aligned for small screens.
  • Made Panel footer sticky to handle scrollbars better.


Bug fixes

  • DataGrid 2 Pagination ui issue with icons fixed for safari [flagged by Luiten, Pim (DI SW MNDX PRO&TECH R&D IND TECH)].
  • Fixed the UI issue for Combobox "disabled" state when used in dynamic context. [flagged by Bijlsma, Michiel (DI SW MNDX PRO&TECH R&D IND TECH)].
  • Fixed disabled hover state behavior of File Upload.
  • Fixed modal footer background issue [flagged by Bijlsma, Michiel (DI SW MNDX PRO&TECH R&D IND TECH)].
  • Fixed wizard border color issues. [flagged by Oliver Wenzel]
  • Fixed documentation theme switcher selection issue on dark mode from user preferences.
  • Fixed card shadow issue on dark mode introduced with atlas core 4 migration.
Version: 2.0.2
Framework Version: 11.12.2
Release Notes:

Important update

  • The Siemens UI Module v2.0.2 has moved to 11.12.2 LTS due to a nanoflow issue occurring in the platform in version 11.12.0.


Bug fixes

  • The Card design property conflict on building blocks DISW_complex_card_with_actions and DISW_complex_card_with_actions_compact has been solved by clearing the cached design properties (that came from Mendix 10). Flagged by van Hogen, Bob (DI SW MNDX PRO&TECH R&D IND TECH).
Version: 2.0.1
Framework Version: 11.12.0
Release Notes:

General updates and improvements

  • Property value: 2 new building blocks + documentation have been added.
  • Text Input: Warning state has been added.
  • Login page: SSO login template has the version number and description added. Updated the Xcelerator icon position in mobile device.


Bug fixes

  • Page templates and building blocks in the Siemens UI Module using the Card and Tiles have been cleared from cached design property styles which causes these errors in new projects in Mendix 11. Flagged by Swan, Gregor (DI SW GS&CS MXRM AMS PRS IND2).
  • Units of Measure: Included horizontal alignment support. Also updated the design tokens for this component / building block according to latest SDL guidelines. Flagged by Bernsdorf, Ingo (FT RPD SEI DRE-DE).
  • Checkbox: Mendix and Siemens UI Checkbox disabled state UI issue is fixed when using data-theme=light while emulating dark mode in Firefox. Flagged by Kumar, Kundan (FT D AA IN EIS APS LCW).
Version: 2.0.0
Framework Version: 11.12.0
Release Notes:

Important update

  • The Siemens UI Module v2.0.0 is in Mendix LTS 11.12.0.
  • The Siemens UI Module v1.10.x will remain in Mendix LTS 10.24.13 and contain the fixes and updates as mentioned in this release, excluding the fix when moving to Atlas 4. No new updates will be added after this version, only critical UI fixes. We advise to move to Siemens UI Module v2.0.0 in Mendix 11 to continue adhering to the updates of the Siemens Design Language.


General updates and improvements

  • Preview images of page templates and building blocks have been updated in the reference guide and Siemens UI Module.
  • Migration documentation have been added and updates related to the migration to Mendix 11 have been done.
  • Segmented Button: A new variant + documentation have been added.
  • Cell: Building block variants Cell complex and Cell task + documentation have been added.
  • Radio Button: Large size variation + documentation have been added.
  • Checkbox: Large size variation + documentation have been added.


Bug fixes

  • Replaced :focus with :focus-visible to avoid UI cluttering when clicking elements with a mouse.
  • Table / Grid: Fixes for DataGrid 2 Flagged by Kumar, Kundan (FT D AA IN EIS APS LCW).
    • Hovering on filter UI fix;
    • Dropdown filter when the “Filterable“ option is set to ON;
    • Added padding in filter-container and updated the building block correlating to it.
  • Splitter: Conditional rendering issue when using microflows has been fixed. Flagged by Opcenter Core team.
Version: 1.10.0
Framework Version: 10.24.13
Release Notes:

General updates and improvements

  • The Siemens UI Module version 1.x will remain in Mendix LTS 10.24. No new updates will be added after this version, only critical UI fixes. We advise to move to Siemens UI Module version 2.x in Mendix 11, as it contain the Card Design property fix when moving to Atlas 4, and to continue adhering to the updates of the Siemens Design Language.
  • Preview images of page templates and building blocks have been updated in the reference guide and Siemens UI Module.
  • Segmented Button: A new variant + documentation have been added.
  • Cell: Building block variants Cell complex and Cell task + documentation have been added.
  • Radio Button: Large size variation + documentation have been added.
  • Checkbox: Large size variation + documentation have been added.
  • Property value: 2 new building blocks + documentation have been added.
  • Text Input: Warning state has been added.
  • Login page: SSO login template has the version number and description added. Updated the Xcelerator icon position in mobile device.


Bug fixes

  • Replaced :focus with :focus-visible to avoid UI cluttering when clicking elements with a mouse.
  • Table / Grid: Fixes for DataGrid 2 Flagged by Kumar, Kundan (FT D AA IN EIS APS LCW).
    • Hovering on filter UI fix;
    • Dropdown filter when the “Filterable“ option is set to ON;
    • Added padding in filter-container and updated the building block correlating to it.
  • Splitter: Conditional rendering issue when using microflows has been fixed. Flagged by Opcenter Core team.
Version: 1.9.0
Framework Version: 10.24.13
Release Notes:

General updates and improvements

  • The Siemens UI Figma kit is available for internal usage. You can find the link and documentation on our reference guide: https://siemens-design-systems.mendix.com/p/docs/getting-started/design-kit.
  • The Siemens UI Module is UI compatible with GenAI Commons, Agent Commons and Conversational UI. The clash of SASS / CSS variables have been resolved on their side. We will continue to work together to improve compatibility in the future.
  • iX layout: Updated iX_Application_Frame layout to align with iX guidelines Version 4. An additional optional slot has been added in the header and documented in the reference guide.
  • Cards: Building blocks Complex Card with actions and Complex Card with actions compact have been added. Requested by DM UX team and added in alignment with the FT UX CED team.
  • Cell: Building block Cell cozy with action has been added. Requested by DM UX team and added in alignment with the FT UX CED team.
  • Button: Building block Button with badge has been added.
  • Inbox notification: Building block Inbox notification and its variants have been added. Requested by DM UX team and added in alignment with the FT UX CED team.
  • Vertical Command Bar: Selected state has been added when panel is opened.
  • Left Navigation Panel: Secondary Left nav has been updated to handle multiple panels.
  • Panel section: Panel Section building block has been added.

 

Bug fixes

  • Error icon is aligned with input fields in horizontal orientation (in forms).
  • Tags are usable with fit-content.

 

Pluggable components

The latest versions are included in Siemens UI Module v1.9.0:

  • Panel component (v1.3.1): Refactoring + accessibility fixes.

 

Version: 1.8.0
Framework Version: 10.24.13
Release Notes:

General updates and improvements

  • Preparations for the move to the Mendix public Marketplace is completed.
    • Nothing will change in your current workflow–the Siemens UI Module will just reach a larger target audience that also need to create Siemens themed applications in Mendix.
    • The Siemens UI Reference Guide has been revamped to cater to this change. This will become live after the move to the Mendix public Marketplace.
    • The process and changes are done in alignment with the FT UX CED team.
  • Avatar: Building block Avatar with label (horizontal) + menu has been added. Requested by DM UX team and added in alignment with the FT UX CED team.

 

Accessibility fixes

The following accessibility fixes have been made based on the latest evaluation report from the ACCP team:

  • Table/Grid (DataGrid 2):
    • The column selector had an a11y issue due to aria-selected not being available on the menu item. The screen reader can’t announce if the column gets selected or unselected from the dropdown. The Web Content team has approved our PR and the issue has been resolved with the latest update of Data Widgets module (v3.9.0).
    • The focus for the dropdown filter in DataGrid 2 has been fixed.
      • Note that the dropdown (Combobox) issue hasn’t been resolved yet. This is a dependency that will be picked up by Web Content team.
    • Contrast of dropdown filters align with the rest of the filters now.
  • Popup Menu / Tooltip:
    • All search inputs on the reference guide page have placeholder text, that’s not only 'Search'.
    • Search input building blocks have 'Placeholder' set as placeholder text.
    • There are still 2 open issues:
      • The button itself is missing ARIA-HasPopup.
      • The options are still not keyboard accessible.
    • The Web Content team have been notified on the issue. When the issue has been resolved, we will update in the Siemens UI Module accordingly.
  • Switch: Updated background, thumb and focus border color according to latest Siemens Design Language guidelines.
  • Navigation elements focus issue is resolved.
  • File Uploader: Focus state has been improved.

 

Bug fixes

  • Updated the Siemens logo color for the iX layout in Light mode. Flagged by IT APS LCW PBC team.
  • Table/Grid (DataGrid 2): Fixed the flickering behavour during (re)loading of DataGrid 2 in dark mode. Noticed during demo session provided by Anil Dodloji, Rakshith A C and Suryateja Rachapudi (FT D AA IN DASS).
  • Date / Time Picker: Asterisk icon is added when aria-required is set. Flagged by Robert Lenius (CF T).
  • Dropdown (Combobox): Added styling aligned to Siemens Guidelines standards for custom content usage. Requested by Cezary Wrobel (DI SW MNDX PRO&TECH).

 

Pluggable components

The latest versions are included in Siemens UI Module v1.8.0:

  • Added Splitter component (v1.0.0) to the Siemens UI Module. Requested by DM UX team and added in alignment with the FT UX CED team.
    • This component has the following dependency: "react-resizable-panels": "^4.7.3". This has been cleared in Export Control and SCP One Tool within the Siemens UI Module.
  • Added viewPort width configuration for the Panel component (v1.2.2). Requested by Philipp Icgen (SMO CS LS EH). 

 

 

 

Version: 1.7.0
Framework Version: 10.24.13
Release Notes:

General updates and improvements

  • Rich Text Editor: is now styled with Siemens Design Language theming for light and dark mode. Requested by Tobias Kister.
  • Color palette: we've added a page in the reference guide, which shows all the colors that are used in the Siemens UI Module. Also, of all the available colors according to the Siemens Design Language. Requested by Kundan Kumar.
  • Design properties: all design properties, that we've added in our UI module, are documented in our reference guide.
  • iX layout: the close behaviour of the navigation menu has been extended. The following options are now available (and documented):
    • By default, the navigation menu automatically closes when a user clicks outside of it.
    • Additionally, the navigation menu can close when a user clicks on a menu item that does not have a submenu. Requested by Niraj Kshetri & Philipp Icgen.
  • TreeNode: removed TreeNode Indicator building block, as the checkboxes in the custom implementation didn’t work as expected due to nesting.
  • Updated dependencies page.
  • Cleanup of CSS var files.
  • DataGrid 2 & Gallery: Spacing (small) between buttons and links, used in a DataGrid 2 and Gallery, has been added. This includes the buttons placed in the grid-wide headerfilter section and buttons + links placed in the custom content. Requested by Kundan Kumar.

 

Accessibility fixes

The following accessibility fixes have been made based on the latest evaluation report from the ACCP team:

  • Text Input: a11y fixes for keyboard navigation and screen readers. We also now support Fieldset being used in forms.
  • Slider: a11y issues resolved. We advise to update this widget to the latest version in your project.
  • DataGrid 2:
    • The button for Table Banding / Grid is enhanced by adding tooltip text mentioning that the table settings affect the appearance only.
    • Status is now detectable by screen reader and the icon has been removed (as it didn't have a purpose).
    • Replaced the tooltip with popup instead for "Show more options" menu.
    • Editable Table building block has been removed. This functionality should come out of the box, just like it was possible with the predecessor (DataGrid 1).
    • DataGrid 2 column filters still has issues, so the Web Content team has been notified.
  • Popup Menu / Tooltip: updated the reference guide page on how to use the Popup Menu and Tooltip properly. Also added a11y guidelines on usage. Popup Menu and Tooltip components itself still has issues, so the Web Content team has been notified.
  • Search Input: all search input (examples in the reference guide and building blocks) have the required state removed.
  • Tiles & Cards: added missing a11y attributes. Different variants are documented with a11y guidelines. Comparison view building block has been removed. Updated all building blocks.
  • Toast: duration is updated to 8000 ms instead of 3000 ms. Toast example images and docs are updated and a11y guidelines are added to the reference guide.
  • Wizard: examples and building blocks are now based on actual use cases, e.g. instead of “First step of the wizard”, the Narrator tool now mentions: “Step 1: Account Information“, etc.

 

Bug fixes

  • Radio button: When disabled, radio buttons that are checked and those that are unchecked are now better distinguishable. Flagged by David Gemen.
  • DI SW layout: Navigation submenu UI bug has been fixed (when screen is set to less than 300px height).
  • HTML element: the HTML element widget is now aligned with the Siemens Design Language theming.
  • Combobox: When a Combobox is used inside a pluggable Panel component, the submenu is now opening in the right position (instead of outside of the Panel).

 

Notes

  • We’re working on improving the migration process and documentation from the old UI Resources module to our Siemens UI module together with the IT APS LCW PBC team (the owners of the Siemens IT Starter App).
    • This includes the alignment of CSS classes, so less / no manual work is needed.
  • The compatibility issue between GenAI and ConversationalUI modules being used together with the Siemens UI module should be resolved with the next release of the Incubation and Innovation team’s modules.