MindSphere Web Content

Category: Themes
Subcategory: All

Overview

Theme providing typical MindSphere color codes, icons and a default application layout, based on the Mendix Atlas UI. Please note: this module is intended to be used with "MindSphere IIoT for Makers". It is not compatible with "Mendix on MindSphere".

Documentation

MindSphere Web Content

Description

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

Please note: this module is intended to be used with "MindSphere IIoT for Makers". It is not compatible with "Mendix on MindSphere". The MindSphere Web Content provides you typical color codes, icons and a default application layout as used for MindSphere apps.

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 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 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 MindSphere_Web_Content.

MindSphere Icons as an Icon Font

The 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 MindSphere Web Content Pack and are listed in the App Explorer dock under App > Marketplace modules > 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/mindsphere_web_content/web/custom-variables.scss';

to fix the compile errors.

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

Configuration

No additional configuration needed for module

Bug

There are no known bugs

Releases

Version: 1.0.0
Framework Version: 9.4.0
Release Notes: Initial version