Mendix 7 is no longer supported unless you have Extended Support (for details, please contact Mendix Support). Mendix 7 documentation will remain available for customers with Extended Support until July, 2024.
Sidebar toggle button
The sidebar toggle is a button that when pressed will make a region of a scroll container appear or disappear. This makes it possible to create sidebars, for instance a menu on a mobile phone that is hidden by default and can be shown by clicking the button. See the picture for an example layout that used the sidebar toggle.
Button properties
Caption
The caption defines the text that will be shown. The template can contain parameters that are written as a number between braces, e.g. {1}. The first parameter has number 1, the second 2 etcetera. Note that to use template parameters the widget must be placed in a context of an entity, e.g. inside a data view or list view. The parameters will be replaced by the values of the attributes.
Image
This property indicates which image will be shown in front of the caption of the button.
Icon
The icon property determines the icon that will be shown in front of the caption of the button. There are three options: no icon, a glyph icon or a (bitmap) image. Glyph icons come from the Bootstrap Halflings collection. The advantages of a glyph icon over a bitmap image are that glyphs are scalable, look sharp on high-resolution screens and their color can be changed by changing the font color. The advantage of an image icon is that it can have multiple colors.
Render mode
This property indicates how the button is rendered.
Value | Description |
---|---|
Button | The trigger is rendered as a button. |
Link | The trigger is rendered as a hyperlink. |
Default value: Button
Button Style
This property applies a predefined styling to the button.
Common properties
Name
The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class mx-name-{NAME}
, which can be useful for Selenium testing.
Class
The class property allows you to specify one or more cascading style sheet (CSS) classes for the widget. The classes should be separated by a space. The classes will be applied to the widget in the browser and the widget will get the corresponding styling. The classes should be classes in the theme that is used in the project. It overrules the default styling of the widget.
Styling is applied in the following order:
- the default styling defined by the theme the project uses
- the
Class
property of the widget - the
Style
property of the widget.
You can see which widgets in a page have styling applied via the class or style property by clicking the Show styles button.
Style
The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.
For example:
background-color:lightblue; color:red;
will result in red text on a blue background.
You can see which widgets in a page have styling applied via the style or class property by clicking the Show styles button.
Tab index
The tab index influences the order in which the end user navigates through the page using the tab key. By default tab indices are zero and the tab order is determined automatically by the client system. A value of minus one (-1) means that the widget will be skipped when tabbing through the page.
Default value: 0
General properties
Region
Choose the region that should be collapsed/expanded by clicking this button.
Region | Effect |
---|---|
Left | The left region of the layout container will be toggled. |
Right | The right region of the layout container will be toggled. |
Default value: Left
Mode
Determines how the region will be toggled.
Mode | Effect |
---|---|
Push content aside | The sidebar moves the rest of the content off-screen (only available mode in Mendix 5.17 and older). |
Slide over content | The sidebar moves over the content. |
Shrink content | The content shrinks to make space for the sidebar. |
Initially open
Only applicable if the mode is “Shrink content”.
Visibility properties
Visible
By default, whether or not an element is displayed in the browser is determined by how the page is designed and the user’s roles within the application. However, the page can be configured to hide the element unless a certain condition is met.
Context
The widget can be made visible only if the object of the data view that contains the widget satisfies the specificied criteria.
A practical example would be a web shop in which the user must submit both billing and delivery information. In this case, you might not wish to bother the user with a second set of address input fields unless they indicate that the billing address and delivery address are not the same. You can accomplish this by making the delivery address fields conditionally visible based on the Boolean attribute SameBillingAndDeliveryAddress
.
Based on Attribute Value
When selected, this shows the widget while a particular attribute has a certain value. Only boolean and enumeration attributes can be used for this purpose.
Based on Expression
Added in Mendix 7.1.
When selected, this shows the widget while a provided expression evaluates to true. The object of the containing data view is available inside an expression as a $currentObject
variable.
Note that the expression is evaluated in the browser, and hence, we advise against using “secret” values (like access keys) in it. In particular, we disallow usages of constants. Also, client-side expressions currently do not support all the functions that are available in the microflows. Please refer to an autocomplete list to know what functions are supported in your version.
Module Roles
The widget can be made visible to a subset of the user roles available in your application. These are the three options available:
Option | Description |
---|---|
Applicable roles | All access determined by page and microflow access is maintained. For instance, if the user does not have access to the microflow triggered by a certain microflow button, that button will remain hidden from that user. |
All roles | This setting overrides the setting above, rendering the element visible to all users, regardless of the security settings. Note that this does not provide the user access to the restricted data, it merely unveils the element. In the example above, the microflow button would become visible, but clicking it would still result in a return to the login page or an error. |
Selected roles | The widget can be made visible to a subset of the user roles available in your application. When activated, this setting will render the widget invisible to all the users that are not linked to one of the selected user roles. This does not provide the user access to the restricted data in the same way as the previous option. |