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.

Text

Last modified: August 2, 2022

The text widget shows text which can optionally contain parameters. Every parameter is replaced with the value of the attribute it refers to. The text widget is the recommended way to show text to the user.

If you start typing in any empty container the Modeler will automatically generate a text widget to display your text.

General properties

Text template

Text template defines the text that will be shown. The template can contain parameters that are written as a number between braces, for example, {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, for example, inside a data view or list view.

Parameters

For each parameter in the template you define an attribute of the context entity or a referred entity of which the value will be inserted at the position of the parameter.

Render mode

The render mode determines how the text will be shown in the web browser.

Value Description
Text The text will be rendered inline with the previous/next texts on a page (<span> tag in HTML)
Paragraph The text will be rendered as a separate paragraph (<p> tag in HTML)
Heading 1 The text will be rendered as a large heading (<h1> tag in HTML)
Heading 6 The text will be rendered as a small heading (<h6> tag in HTML)

Default value: Text

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. When activated, this setting will render the widget invisible to all users that are not linked to one of the selected user roles.

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:

  1. the default styling defined by the theme the project uses
  2. the Class property of the widget
  3. 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.

Location and effect of 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.