Pages in the Mendix Metamodel

Last modified: January 11, 2024

1 Overview

The metamodel for pages contain several document types that help build pages in Studio Pro, as shown below.

There are Pages, Layouts, and Snippets that represent the actual pages of an app. Pages are based on Layouts, and both can use Snippets to have bits of reusable UI.

Page Templates define starting points for creating new Pages, and Building Blocks are small bits of UI to quickly add structure to a page.

Studio Pro Guide Model SDK API docs
Pages overview pages namespace
Page Page
Layout Layout
Snippet Snippet
Page Template Page Template
Building Block Building Block

2 Pages and Layouts

A layout defines a base structure for pages, containing widgets and structure that is applied for every page that is based on it. A key part of this structure is the Placeholder widget, through which a layout defines structure where the page can fill it with page-specific widgets.

The content of a layout defines if it is a layout for native pages or web pages. All pages based on a layout with NativeLayoutContent will be native pages, and pages based on a layout with WebLayoutContent will be web pages. Both types of content contain a list of widgets that define the base structure of the layout.

The page uses a layout through its LayoutCall. This defines the layout as well as the LayoutCallArguments. A LayoutCallArgument points to a Placeholder widget on the layout with the LayoutParameter, and defines a list of widgets to fill the placeholder with.

In the same way, a web layout may also be based on a master layout by defining the LayoutCall inside the WebLayoutContents. If a layout has a master layout, it may not directly specify any widgets, but uses the LayoutCallArguments for that instead.

Studio Pro Guide Model SDK API docs
Page Page
Placeholder Placeholder
Layout Layout
LayoutCall
LayoutCallArgument
LayoutParameter
WebLayoutContent
NativeLayoutContent

3 Snippets

Snippets are reusable interface parts that allow you to create a more maintainable interface, and can be used on pages, layouts, and even other snippets. Changes made to the snippet will show up in all places the snippet is used.

A snippet contains widgets, and may define one or more parameters to use data inside the snippet.

To include a snippet, you need to use the SnippetCallWidget on a page, layout, or other snippet. The SnippetCallWidget has a SnippetCall which calls the Snippet and defines a SnippetParameterMapping for each parameter of the snippet.

The SnippetParameterMapping points to the parameter of the snippet to provide data for, as well as a PageVariable that defines where this data comes from. A page variable can either point to a data widget, a page parameter, or a snippet parameter.

Studio Pro Guide Model SDK API docs
Snippet Snippet
SnippetCall
SnippetCallWidget
SnippetParameter
SnippetParameterMapping
PageVariable

4 Containers

Container widgets are widgets used to contain other widgets.

DivContainer is a simple container, which may be given a specific HTML tag (DIV by default) and can be used to style or hide a group of widgets simultaneously.

GroupBox is a container with a header, and can be configured to allow collapsing/expanding the contents.

LayoutGrid is used to layout widgets in rows and columns. A column can be given a concrete width (in 1/12ths) or take the amount of space its contents need, or fill up the remaining space of a row.

ScrollContainer is a widget to divide an area (usually on layouts) in multiple regions. It must have a center content, and may also be configured to have top, right, bottom, and left regions.

TabContainer contains one or more TabPages, of which one may be set as the default tab page (which is shown initially when opening the page). Only one TabPage is visible at the same time, allowing to show a subset of widgets.

Studio Pro Guide Model SDK API docs
Container DivContainer
Group Box GroupBox
Layout Grid LayoutGrid
LayoutGridRow
LayoutGridColumn
Scroll Container ScrollContainer
ScrollContainerRegion
Tab Container TabContainer
TabPage

5 Buttons

Buttons perform an action when clicked. They can be rendered as a button or as a hyperlink through the RenderType enumeration. The ButtonStyle enumeration determines the visual cues for the type of button (for example, Warning, Success).

Buttons can have a caption, which is translatable and can be templated through the ClientTemplate. Through the icon property, the button can refer to an icon from either an image collection (using ImageIcon) or to a glyph icon (containing a UTF-8 code referring to a glyph from the Bootstrap Halflings collection).

The ActionButton implementation determines what to do based on the ClientAction configured.

Studio Pro Guide Model SDK API docs
Buttons ActionButton
Button Properties RenderType
Language Menu ButtonStyle
ClientTemplate
Icon
ImageIcon
GlyphIcon
ClientAction

6 Data Widgets

Data widgets display data that they retrieve from a Data Source.

A DataView is used to show or edit content from a single object. ListView is used to show a list of objects.

There are also a couple of grid widgets, with DataGrid showing data based on configured columns. ReferenceSetSelector allows displaying or selecting the values of many-to-many associations. TemplateGrid shows a list of objects in a tile view, where the number of columns can be configured.

6.1 DataView

The data view is a central component in Mendix applications. The data view typically contains input widgets, like text boxes with labels. In more complex screens, a data view can contain tab controls per topic, and data views and data grids for related objects.

If a noEntityMessage is specified, a data view that receives no source data will show this message instead of its content. Otherwise, the data view will show its static content and disabled input widgets. This property is a translatable text.

The footer of a data view is often used to add buttons such as a save button or a cancel button. Note that footers can only be used for data views that are not nested inside other data widgets.

Studio Pro Guide Model SDK API docs
Data View DataView
Language Menu Text

6.2 ListView

The list view widget shows a list of objects using a template. The default template is configured through the widgets property. It is also possible to add specialized templates by adding a ListViewTemplate for a specialization of the base data source entity.

The clickAction ClientAction is the action that is performed when a list view entry is clicked.

Studio Pro Guide Model SDK API docs
List View ListView
Entity Generalization ListViewTemplate
List View Templates ClientAction

6.3 DataGrid

A data grid shows a list of objects in a table format. The configured columns determine which attributes are shown. It contains a control bar in which buttons can be added to create a new object, or show/edit an existing one.

Studio Pro Guide Model SDK API docs
Data Grid DataGrid
Grid Columns GridColumn
Grid Control Bar GridControlBar

6.4 ReferenceSetSelector

A reference set selector displays a grid of objects from a many-to-many association. By adding a DataGridAddButton and DataGridRemoveButton to the control bar, the grid can be used to edit the linked objects.

Studio Pro Guide Model SDK API docs
Reference Set Selector ReferenceSetSelector
Grid Columns GridColumn
Grid Control Bar GridControlBar
DataGridAddButton
DataGridRemoveButton

6.5 TemplateGrid

A template grid shows a list of objects in a tile view using a template. This template is configured in the TemplateGridContents.

The number of columns to show can be set with the numberOfColumns property, the rows shown per page using numberOfColumns.

Studio Pro Guide Model SDK API docs
Template Grid TemplateGrid
TemplateGridContents
Grid Control Bar GridControlBar

7 Data Sources

Input widgets, such as a text box, will derive their content from their context. The data widgets themselves get this data from their configured data source. Depending on the data widget, different sources are applicable (for example, a ListViewDatabaseSource is only applicable for a ListView widget).

The data sources can be divided by how their retrieve their data:

Most data sources are configured with the target EntityRef. This reference can be a DirectEntityRef to fetch all objects of the given entity, or an IndirectEntityRef to fetch objects related to an object already in context (either a surrounding data widget, or a page parameter).

Studio Pro Guide Model SDK API docs
Data Sources DataSource
XPath

8 Association Widgets

The reference selector and input reference set selector are input widgets that can be used to display and edit associations. Objects selectable for the association are determined by the SelectorSource, and can be queried from the database or retrieved from a microflow (only for the reference selector).

Both widgets have a selectPageSettings that determines the page used to select the linked object (or objects). The reference selector optionally also has a goToPageSettings that determines the page used to display detailed information about the associated object.

Studio Pro Guide Model SDK API docs
Reference Selector ReferenceSelector
Input Reference Set Selector InputReferenceSetSelector
SelectorSource

9 Read More