Siemens Insights Hub Web Content

Content Type: Module
Categories: User Interface


This module aligns your Mendix UI with the Siemens User Experience Toolkit for Insights Hub and Industrial IoT.


Demo url


Theme providing typical Insights Hub color codes, icons and a default application layout, based on the Mendix Atlas UI.


Typical usage scenario

Use the theme and get an application layout, colors and icons based on the User Experience Toolkit for Insights Hub and Industrial IoT.


The Siemens Insights Hub Web Content provides you typical color codes, icons and a default application layout as used for Insights Hub apps.



⦁ Atlas_Core

⦁ Atlas_Web_Content


After importing the module, please replace the content of the file ./theme/web/custom-variables.scss with:


@import '../../themesource/siemensinsightshubwebcontent/web/custom-variables.scss';


Also make sure that within your project settings, the Siemens Insights Hub Web Content is after the Atlas modules:



Default web page layout

The Siemens Insights Hub Web Content is providing a new default web page layout, called InsightsHub_Default. Please use this one, rather than the Atlas_Default provided by the Atlas_Core module on each and every Web Page to get the full Theme alive.


Insights Hub Icons

You can select Insights Hub icons from the Siemens Insights Hub Theme Pack to be displayed in your application.

1. Open the properties of a widget which can display an icon (for example a button).

2. Click Select… next to Icon.

3. Open the Insights Hub tab..

4. Find the icon that you want and click Select. The Insights Hub icons are in the module SiemensInsightsHubWebContent.


Insights Hub Icons as an Icon Font

The Siemens Insights Hub Theme Pack provides a font which contains icons. This means that you can use a Insights Hub icon in any page element where you can assign a class.

To do this:

1. Find the icon you wish to use. These have the same names as the icons in the Siemens Insights Hub Web Content and are listed in the App Explorer dock under App > Marketplace modules > SiemensInsightsHubWebContent > Icons.


2. Open the properties of the element to which you wish to add an icon.


3. Set Icon to (none).


4. Add the class iconUxt {icon-name}.



There are no known bugs


Version: 4.0.1
Framework Version: 9.24.17
Release Notes: * Handling session expiration * Minor styling adoptions to address some incompatibilities with Mendix V10.x.y Please add the "Siemens Insights Hub Web Content" module role "User" to all your apps user roles to ensure that the localized session expired message / title can be loaded during app startup.
Version: 4.0.0
Framework Version: 9.24.3
Release Notes: MindSphere has evolved into Insights Hub, with this release we provide the following updates and breaking changes New features: * Icons will now be provided like Mendix 'glyphicons' * Quite a lot of new amazing icons The MindSphere Design System has been evolved to the User Experience Toolkit for Insights Hub and Industrial IoT, by this the following breaking changes has been introduced: * The CSS prefix to load icons has been changed from iconMdsp to iconUxt, please update all occurrences of iconMdsp in your code base accordingly * Some icons has been renamed to better fit to the User Experience Toolkit naming scheme. In general the delivery has been renamed from Siemens_MindSphere_Web_Content to SiemensInsightsHubWebContent. If your updating your existing code base, please replace the old MindSphere_Web_Content module with the new one. Afterwards please rename manually the module to InsightsHubWebContent. In case Studio Pro comes up with some CSS compiler errors, please checkout the file /theme/web/custom-variables.scss. If required update the old import from: @import '../../themesource/siemens_mindsphere_web_content/web/custom-variables.scss'; to @import '../../themesource/siemensinsightshubwebcontent/web/custom-variables.scss';
Version: 3.0.0
Framework Version: 9.4.0
Release Notes: Upgrade to Mendix Atlas Core which was introduced with Mendix 9. The module providing typical MindSphere color codes, icons and a default application layout, based on the Mendix Atlas 3. Please note: this module is intended to be used with " Mendix on MindSphere". It is not compatible with " MindSphere IIoT for Makers.
Version: 2.2.0
Framework Version: 8.18.0
Release Notes: Updated to MindSphere icon set from MindSphere design system version 1.7.0. Breaking changes: there are breaking changes in the naming of MindSphere. Please double check all used icons in your app. Add support of filled and bold icons. Hint: The MindSphere naming for filled and bold icons uses white space between the icon name and the property filled / bold. The white space is replaced by a "_" in Mendix as white space is not supported. Example: * MindSphere: addCircle bold --> Mendix: addCircle_bold You can find all icons and supported bold / filled properties via the Project Explorer dock, Project -> App Store modules -> MindSphere_UI_Resources -> Icons.
Version: 2.1.2
Framework Version: 8.0.0
Release Notes: Bugfix: removed Feedback widget from NativePhone_Default layout