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 viewer
An image viewer can be used to display an image or its thumbnail.
This image viewer shows the product image.
An image viewer must be placed in a data view or template grid.
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
Classproperty of the widget - the
Styleproperty 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.
Data source properties
Entity (path)
The entity (path) property specifies which entity will be shown in the image viewer. It starts in the data view entity and must end in System.Image or a specialization thereof. If the data view entity itself is (a specialization of) System.Image you can use this entity on the image viewer as well.
Events
On click
This property specifies what happens when the image is clicked:
| Value | Meaning |
|---|---|
| Do nothing | Nothing happens. |
| Call microflow | The specified microflow is executed. |
| Enlarge | The image is shown at full size. |
Default value: Do nothing
Microflow (in the case ‘Call microflow’)
This property specifies the microflow that will be executed when the image is clicked.
Microflow settings (in the case ‘Call microflow’)
The on click settings specify what parameters will be passed to the microflow, whether to show a progress bar or not, and more.
See Starting Microflows.
General properties
Default image
This is the image that is displayed if no image is uploaded.
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: Percentage
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: 100
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
Show
This property indicates whether the generated thumbnail is shown or the full image.
Default value: Thumbnail
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.