MVVM Guide - barsandcat/HMS-Sunflower GitHub Wiki

https://miltoncandelero.github.io/unreal-viewmodel

And here is original documentation: https://dev.epicgames.com/documentation/en-us/unreal-engine/umg-viewmodel-for-unreal-engine

ModelViewViewModel is a software architecture pattern for UI, it main purpose is isolation of UI and logic from each other. In case on unreal - isolation of widgets and game from each other. It a nut shell you insert ViewModel between the game and the widget, which is basically a proxy that defines an interface between the two. If taken to the extreme it gives 2 major possibilities:

• Running UI without game
• Running game without UI

Epic ship together with engine MVVM plugin that helps to implement this pattern.

Example: C++ view model and Health bar widget. Important part: ViewMode is It is just an UObject with properties! All that binding UI is just a nice packaging! What it actually does is creates a blueprint that takes a value from property and sets it to the widget property.

P.S. ViewModel can be created in blueprint! Example: blueprint view model for the Health bar widget.

Forwarding value from one property to another is not that exiting, is it. But it makes more complicated (and more useful) concepts possible. List view is another already useful pattern, that combines extremely well with nested ViewModels: Example: C++ view model and inventory view widget.

Converting data on the fly. Example: Blue print conversion function - from integer to the m,k string. What is allowed to be used as conversion function.

• For UUserWidget classes: the function must be BlueprintPure and Const.
• For Blueprint function libraries: the function must be Static and BlueprintPure.
• The function must have a return value.
• The function must have at least one argument.
• The function must not be an inherited Blueprint function (i.e., not overridden).

Conditions directly it the binding ui! Example: Blue print function that paints text red if it is below threshold

Example: bind function to launch animation Example: bind function that fills combobox values

Viewmodel tricks: Getter functions for virtual properties. Example: Health percentage

All previous examples were about sending data and events from game to the UI. What about other way? You can bind the widget data to the VeiwModel data, and then subscribe to the notification your self Example C++: Example Blueprint???

But that is not a button click is it? Well you can bind to the events as well, for example function: Example: C++ simple click handling What is not really working in 5.6 is parameters forwarding: Example:

So on this front, MVVM plugin is still in development. Luckly event handling is rather simple to do your self: Example: Full path - click - Delegate call from widget - game code - update of view model - update of the widget click to make paper clip.

Boundary between ViewModel and Widget is more or less defined with help of UI integration. But boundary between ViewModel and the game is up to you to maintain. Nothing stops you from putting game logic into ViewModel directly, and basically using ViewModels just as fancy new binder. But if you actually want a proper separation of UI and GameCode, it is better to create ViewModel as a separate object, that knows nothing about your game. Then give this view model to the widget, during widget initialization, and likewise give it to the game during game initialization.

PS MVVM plugin actually offers support in the editor for different types of widget initialization with view models. Instead of setting ViewModel manually, you can use global storage, create ViewModel on the fly, or use "pseudo path" to fetch ViewModel.