StyleSheetSwitcher

Category: Widgets
Subcategory: Utility

Overview

Change the styling of your application based on application logic. Really useful for multi-tenant apps, user chosen styling. It is even possible to use the application url that the user is trying to access as an input parameter, so your custom login pages and anonymous sessions will have the correct styling. Great to use in combination with a SCSS profile, so you have one master stylesheet and different other compiled stylesheets with different variables. For some reason you need to reload mxui in some mx 5 cases, just tick that box if needed.

Documentation

Typical usage scenario

When multiple users share a Mendix application, but custom style is required, it is useful to load a custom stylesheet based on the user. This can be the case in a multi tenant situation.

The microflow logic can depend on the url the client uses to access the application (eg. the Mendix Custom URL). In that case the widget will create an object in which it stores the client url and this will be passed to the microflow.

If you'd like the widget to load your complete theme (and not just some extra stylesheet) you should remove the stylesheet from the theme\index.html and load it within the widget. A loader 

 (see further) may be useful to prevent the page from being rendered without a stylesheet.

 

Tested: 7, 8 and 9.

Description

The client url (for development it is possible to distinguise between 127.0.0.1 and localhost) can be added to an object. This object is instantiated by the client. The widget will then call (with or without url object) the microflow. This microflow returns the filename of the needed stylesheet (after the basepath).

 

 

The widget will start the retrieval of the stylesheets in the base path. The name of the stylesheet will be added to the basepath. Slashes will be added if nessecairy.

Before adding the new stylesheet, it will remove mxui.css from the DOM. After adding the custom stylesheet, it will be added again. The reason for this is that the custom stylesheet is added at the end of the part of the DOM (and thus after mxui.css, which should be at the end of ).

It is possible to set a default stylesheet. It will be used if the microflow results null.

However, when the default is different from the custom stylesheet, the widget can remove it (in that case the widget does not add, but replace a stylesheet).

Loader Div

To prevent the page from "being without stylesheet", it can be useful to add a "loading div" to the index.html:

The application is loaded

When the page container is hidden, the page is not shown before the custom style is added.:

#content{ visibility: hidden; }

The custom stylesheet should contain:

#content{ visibility: visible; } #loader{ display: none !important; }

Releases

Version: 1.1.0
Framework Version: 7.23.21
Release Notes: Removed deprecated mx.logger warning. Updated test project
Version: 1.0.0
Framework Version: null
Release Notes: #2 fixed. Logger.warning is now replaced by logger.info