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.

Image

Last modified: August 2, 2022

The image widget can be used to show a predefined image on a page, layout or snippet.

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.

Events properties

On Click

This property specifies what action is executed when the element is clicked. These are the options:

Action Effect
Do nothing Nothing happens. This is useful for setting up a page without defining the underlying functionality yet.
Show a page The specified page is shown.
Call a microflow The specified microflow is executed.
Call a nanoflow The specified nanoflow is executed.
Open link Triggers an action based on the link type, some of which are specific to mobile devices.
Create object Creates a new object
Save changes Commits all changes made on the page.
Cancel changes Rolls back all changes made on the page.
Close page Closes the pop-up window (for pop-up pages) or navigates to the previously visited page (for content pages).
Delete Deletes an object.
  • When placed in a data view, deletes the object to which the data view is bound; it does not delete objects in a nested data view unless configured through delete behavior
  • When placed on a data grid, template grid, or reference set selector control bar, deletes the selected object(s)
  • When placed inside a list view template, deletes the current item of the list view
Synchronize Synchronizes the data stored locally on your device with the server database.
Sign out Signs out the currently signed-in user. When no user is signed in, pressing this button has no effect.

Default value: Do nothing

Page (Only for “Show a page”)

The page that should be shown.

See Opening Pages.

Page for Specializations (Only for “Show a page”)

Allows you to configure a different page for each specialization of the context object. If this action is placed inside a data view, it is possible to configure different page(s) for each specialization of the data view object. If this action is placed in a data grid, it is possible to configure different pages for each specialization of the grid entity. This setting is not visible when there is not a context object or when the context object has no specializations.

Microflow (Only for “Call a microflow”)

The microflow that should be executed.

Microflow Settings (Only for “Call a microflow”)

The microflow settings specify what parameters will be passed to the microflow, whether to show a progress bar or not, and more.

See Starting Microflows.

Nanoflow (Only for “Call a nanoflow”)

The nanoflow that should be executed.

This specifies the type of action triggered when pressing the button. These are the options:

Value Description
Web Navigate to a website URL.
Email Compose an email.
Call Start a phone call.
Text Send a text message.

Default value: Web

Address (Only for “Open link”)

Usage of the address property depends on the chosen link type. The property is used either as a URL (Web), as an email address (Email), or as a phone number (Call/Text).

The address can be set to either a literal value, or an attribute value.

Address Value (Only for “Open link”)

If a literal value is chosen for the address, you can enter the value here.

Address Attribute (Only for “Open link”)

If an attribute is chosen for the address, you can select the attribute here. An address attribute specifies a path to an attribute. The path starts at the entity of the data view in which the link button is contained.

Close Page (Only for “Save changes”, “Cancel changes”, and “Delete”)

This flag indicates whether the current page should be closed.

Sync Automatically (Only for “Save changes”)

When an object is saved in a Mendix application running in an offline profile, this information is stored in a local database until it can be synchronized with the server. In practice, this means that uploading a new object to the server requires two distinct actions: saving the object and syncing it.

This flag indicates whether synchronization should happen when the save button is clicked.

Entity (path) (Only for “Create object”)

Specifies which entity to create. It is also possible to choose an association (if available) from the context object.

  • If an entity is configured, a new instance of the entity will be created
  • If an entity through association from the context object is configured, a new instance of the entity will be created and associated with the context object

On Click Page (Only for “Create object”)

Specifies which page should be shown with the new created object. This page must accept a context parameter object with the same or sub-type of the created entity.

General properties

Image

The actual image that this widget shows.

See Images.

Width Unit

The width of an image can be specified in three ways: pixels, percentage or auto.

Value Definition
Pixels The width is specified in a number of pixels. If you specify both width and height, the image will be scaled proportionally in the rectangle you define.
Percentage The width is specified in a percentage of the container of the image. It can be larger than its original width in which case the image is stretched.
Auto The width of the given image is used.

Default value: Auto

Width

The width of the image in pixels or percentage (see width unit). In the case of ‘Auto’, no value needs to be specified.

Default value: not applicable

Height Unit

The height of an image can be specified in three ways: pixels, percentage or auto.

Value Definition
Pixels The height is specified in a number of pixels. If you specify both width and height, the image will be scaled proportionally in the rectangle you define.
Percentage The height is specified in a percentage of the container of the image. It can be larger than its original height in which case the image is stretched.
Auto The height of the given image is used.

Default value: Auto

Height

The height of the image in pixels or percentage (see height unit). In the case of ‘Auto’, no value needs to be specified.

Default value: not applicable

Responsive

This property influences how the image scales. If the value is ‘Yes’, the image wil never get bigger than its original size. It can become smaller. If the value is ‘No’, the image can become both larger and smaller than its original size.

Default value: Yes

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.