Insights Hub Web Content

Content Type: Module

Categories: User Interface

Overview

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

Documentation

Description

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

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

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.

Features

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

Configuration

General setup

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

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

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

Default web page layout

The 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

Insighs Hub Icons as ‘Glyphicons’

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. Choose the InsightsHub tab.

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

Insights Hub Icons as an Icon Font

The 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 Insights Hub Web Content Pack and are listed in the App Explorer dock under App > Marketplace modules > InsightsHubWebContent > Icons.

Image

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

Releases

Version: 2.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 MindSphere_Web_Content to InsightsHubWebContent. 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/mindsphere_web_content/web/custom-variables.scss'; to @import '../../themesource/insightshubwebcontent/web/custom-variables.scss';

Version: 1.0.0

Framework Version: 9.4.0

Release Notes: Initial version