Siemens MindSphere Web Content

Category: UI Resources
Subcategory: All

Overview

This module aligns your Mendix UI with the Siemens MindSphere Design System.

Documentation

Demo urlhttps://design.mindsphere.io/

Siemens MindSphere Web Content

Description

Theme providing typical MindSphere color codes, icons and a default application layout, based on the Mendix Atlas UI and the MindSphere Design System

Please note: this module is intended to be used with " Mendix on MindSphere". It is not compatible with " MindSphere IIoT for Makers ".

Typical usage scenario

Use the theme and get an application layout, colors and icons based on the MindSphere Design system

Features

Default web page layout

The Siemens MindSphere Web Content is providing a new default web page layout, called MindSphere_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.

MindSphere Icons

MindSphere Icons as Images

You can select MindSphere icons from the Siemens MindSphere Theme Pack to be displayed as images 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. Select Image as the icon type.
  4. Find the image that you want and click Select. The MindSphere icons are in the module Siemens_MindSphere_Web_Content.

MindSphere Icons as an Icon Font

The Siemens MindSphere Theme Pack provides a font which contains icons. This means that you can use a MindSphere 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 MindSphere Web Content Pack and are listed in the App Explorer dock under App > Marketplace modules > Siemens_MindSphere_Web_Content 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 iconMdsp {icon-name}.

Dependencies

  • Atlas_Core
  • Atlas_Web_Content

Installation

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

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

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

Configuration

No additional configuration needed for module

Bug

There are no known bugs

Releases

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
Version: 2.1.1
Framework Version: 8.0.0
Release Notes: Bugfix: resizing mouse pointer for popup windows Bugfix: styling issue with fake OS bar Bugfix: SASS compiler error
Version: 2.1.0
Framework Version: 8.0.0
Release Notes: Use new Feedback & Collaboration Widget V 7.0.6 Bugfix in index.html Depends on Siemens MindSphere OS Bar Connector V1.2.0 for the MindSphere OS Bar.