Table of Contents

UI view

A UI view, or User Interface view, represents a screen on the front-end side of a solution. It is an abstraction of the UI implemented in XML and is defined independently of the platform or rendering technology.

MVVM Design Pattern

UI views adhere to the Model-View-ViewModel (MVVM) design pattern:

  • Model: The data layer, typically retrieved from an external service like an entity view or a server method.
  • View: The graphical representation displayed to the user, the XML template.
  • ViewModel: The intermediary component that manages data bindings. The ViewModel does not directly interact with the View; instead, data binding ensures a decoupled relationship between them.

By leveraging the MVVM pattern, UI views maintain a clear separation between data management and presentation, enabling a more scalable and maintainable architecture.

For more details about the view model and its built-in methods (messages, toasts, file selection, etc.), see the view model article.

mvvm

UI view header

This configuration screen addresses the main settings, the behavior, the authorizations as well as obsolescence management and documentation.

Core setting

The nature of the currently edited UI view is defined by:

  • its name (identifier)
  • its bound entity view (if any),
  • and the module it belongs to.

And its default aspect is defined by the settings:

  • title and icon
  • opening mode (e.g. frame or popup)
  • and position of the popup (if applies).

Opening mode, popup size and position

In terms of navigation by code, we have three settings for configuring this:

  • NavigationTarget
  • PopupSize
  • PopupPosition

First, the couple NavigationTarget and PopupSize is configured by a first combobox:

  • New frame
  • Nested frame
  • Same frame
  • Popup (full size)
  • Popup (autosize)

Second, you can further specify the PopupPosition via a second combobox, when "Popup (autosize)" is selected:

  • Center
  • Left
  • Right

The settings specified here will be the default settings if no other values are provided when navigating by code. Please see the navigation section of the documentation for more information.

Note

Please note that if you use an UI view sometimes as a popup and sometimes as a frame (by using navigation by code) it is recommended to configure the default setting to be "frame" and use navigation options to open it as "popup" when you need to. Doing the opposite can cause issues during a refreshes of the page (see community topic Previous and Next arrows lose report information / Popup vs. NewFrame). This problem is logged as ticket #25231.

Behavior

This section addresses basic data-related functionalities of all UI view:

  • Load data on start (toggle)
  • Mono record (toggle)
  • Default grouping
  • Records by page
  • Adding UI view
  • Editing UI view
  • Property used as edit link
Note

If deletion is allowed on this UI view but its own entity view does not expose a Delete API route, and the Editing UI view's entity view does, delete calls are automatically routed to the Editing UI view's entity view instead. This lets a list screen keep Delete out of its own public API while still letting users delete through the toolbar, as long as the paired edit/detail screen exposes it. This routing applies only to deletion - save (create/update) always uses the current UI view's own entity view, never the Adding/Editing UI view's.

Authorization

This section addresses permissions with regards to the datasource items: creation, cloning, updating and deleting.

These authorization rules are applied to the toolbar. They are used to show/hide the available actions (add, remove, clone, etc.). They can be defined with expressions. It is crucial to prioritize authorizations specified on the entity view side to ensure security.

Note

CreationAllowed is exposed as a property because it applies to the UI view itself. GetUpdateAllowed, GetDeletionAllowed, and GetCloningAllowed are exposed as methods because they can depend on a specific datasource item.

Datagrid customization

Some behavior attributes allow you to customize navigation from a datagrid. To see more details, check the datagrid article.

Template

This refers to the visual aspect of the UI view. It's the part that users interact with, such as buttons, text fields, images, and other UI elements. Essentially, it's how the view is presented to the user visually.

The structure and layout of the user interface (UI) are defined using XML (Extensible Markup Language).

To see more details, check the template article.