Overview

This module offers functionality to implement dynamic layout styling in your App. In other words: the styling of  your App can be configured at runtime. The App provides a management console where Images, Color schemes, Layouts and Themes can be managed and previewed. It is also possible to extend the dynamic parts of your layouts using the offered building blocks and snippets and to add extra styling definitions in the sass stylesheets.

Documentation

This module offers functionality to implement dynamic layout styling in your App. In other words: the styling of  your App can be configured at runtime. The App provides a management console where Images, Color schemes, Layouts and Themes can be managed and previewed. It is also possible to extend the dynamic parts of your layouts using the offered building blocks and snippets and to add extra styling definitions in the sass stylesheets.

Description

• change the look&feel of your App on runtime based on pre defined colorschemes and layouts
• configure the layouts and themes on runtime and specify how the top and sidebar of your App should look like
• via a configuration page or an inline editor the settings can be changed
• create your own dynamic style by using the building blocks and snippets provided

Typical usage scenario

• Demos which quickly have to be styled for customers
• Separate styling for organisational units
• User specific theme customisation
• Different internal and external brands in one App
• One Theme per Tenant for SAAS Solutions

Features

• configurable top bar
• height (large, medium, small)
• background banner image
• logo image and positioning
• toggle elements like main menu, user info and page title
• configurable side bar
• toggle elements like main menu and user info
• ability to overrule the tab style of all tab containers;
• pages and services to maintain the color schemes, layout, images and themes definitions including previews
• layouts, building blocks and snippets to develop your own dynamic parts
• multiple example themes can be imported
• an extendable architecture in the scss to easily add your own extra styling

Please share bugs, comments and ideas via the feedback functionality in the sandbox version of this App at https://dynamictheme-dev9-sandbox.mxapps.io/index.html?profile=Responsive

 Version 3.2 (Mendix 9)

Dependencies

• Mendix Studio Pro 9.6.17 or higher
• Administration
• Atlas Core: 3.5.0
• Atlas Web Content: 3.1.1
• CommunityCommons: 9.0.1 or higher

Installation

• download the module from the AppStore;
• enable the security by mapping the userroles on project level to the module roles;
• make it possible for an Administrator to configure Themes: add the page ‘DynamicThemeDashboard’ to the navigation;
• Make sure your Pages use a DynamicThemeLayout.

Conversion from version 3.1

• Use the  _Version/3.2/UpgradeToVersion3_2 microflow.

Initial Data

• Add the microflow /_InitialData/InitData to your startup microflow in order to load all predefined Themes, Layouts and ColorSchemes or use the import functionality in the management dashboard.

Version 3.1 (Mendix 9)

Dependencies

• Mendix Studio Pro 9.6.12 or higher
• Administration
• Atlas Core: 3.5.0
• Atlas Web Content: 3.1.1
• CommunityCommons: 9.0.1 or higher

Installation

• download the module from the AppStore;
• enable the security by mapping the user roles on project level to the module roles;
• make it possible for an Administrator to configure Themes. Add the page ‘DynamicThemeDashboard’ to the navigation;
• Make sure your Pages use a DynamicTheme Layout.

Conversion from version 3.0

Use the  _Version/3.1/UpgradeToVersion3_1 microflow.

Initial Data

Add the microflow /_InitialData/InitData to your startup microflow in order to load all predefined Themes, Layouts and ColorSchemes or use the import functionality in the management dashboard.

Version 3.0 (Mendix 9)

Dependencies

• Mendix Studio Pro 9.6.12 or higher
• Administration
• Atlas Core: 3.5.0
• Atlas Web Content: 3.1.1
• CommunityCommons: 9.0.1 or higher
• 
  

Installation

• download the module from the AppStore;
• enable the security by mapping the user roles on project level to the module roles;
• make it possible for an Administrator to configure Themes. Add the page ‘DynamicThemeDashboard’ to the navigation;
• Add the ServiceAfterStartup microflow to the startup procedure of the App in order to add the initial data the App needs;
• Make sure your Pages use a DynamicTheme Layout.

Conversion from earlier version

The module is complete restructured and refactored. There is a conversion microflow in the _Version/3.0 folder available. However, not all scenarios are supported.

Initial Data

Add the microflow /_InitialData/InitData to your startup microflow in order to load all predefined Themes, Layouts and ColorSchemes or use the import functionality in the management dashboard.

Version 2.0 (Mendix 8)

Dependencies

• Mendix Studio Pro 8.18.17 or higher
• Administration
• Atlas UI Resources: 2.7.3 or higher
• CommunityCommons: 8.2.0 or higher

Installation

• download the module from the AppStore;
• move the file ‘..\resources\DynamicTheme\_dynamic_theme.scss’ to ‘..\theme\styles\web\sass\app’ and add this statement to your custom.scss file: @import "dynamic-theme.scss";
• enable the security by mapping the user roles on project level to the module roles;
• make it possible for an Administrator to configure Themes. Add the page ‘DynamicThemeDashboard’ to the navigation;
• Add the AfterStartup microflow to the startup procedure of the App in order to add the initial data the App needs;
• Use the import functionality in the DynamicThemeDashboard for ColorSchemes and Layouts to import one or more examples and create your own Themes based on them;
• Make sure your Pages use a DynamicTheme Layout.