React and UIOverride

UIOverride lets you replace generated UI content with a custom control. All platforms support UIOverride, but the used control must support the platform.

What UIOverride covers

Enable a content override by selecting the Content override checkbox on the ViewModel column that is the root of the data for the override control. In the Designer, the override is indicated as a grey rectangle.

The optional ContentOverrideType and ContentOverrideDesignTimePath properties can point to a C# assembly that renders the control at design time. The documentation states that these properties are not required to use UIOverride at runtime.

UIOverride can be used to inject one or more controls into the standard UI. The documentation also states that a whole page, dialog, or form can be replaced.

Documented runtime approaches

Target platform	Documented approach	Example from the documentation
WPF-Turnkey Fat Client	Handle ViewMetaBase.ContentOverride, create a control, bind it to ViewModel data, and add it to the target grid.	A custom control binds NumberOfLeafsProperty to NumberOfLeaves.
MDriven Turnkey for AngularJS	Use the AngularUIOverride tagged value on the ContentOverride column and provide the referenced cshtml override file under <YourSite>\Views\EXT_OverridePages.	The override HTML can read ViewModel data through the AngularJS scope variable data, for example Template:Data.NumberOfLeaves.
MDriven Turnkey for AngularJS	Set UIOverride on a ViewModelColumn and use the Angular_Ext_Component=<component name> tagged value, with the component content in EXT_Components.	The override is supplied as an AngularJS component in EXT_Components.

React boundary

UIOverride is supported on all platforms, provided that the used control supports the platform. The documented web examples are AngularJS overrides using either a cshtml override file with the AngularUIOverride tagged value or an AngularJS component in EXT_Components with the Angular_Ext_Component tagged value.

Before implementing a platform-specific control, confirm the applicable client contract for reading ViewModel data, submitting changes, and participating in Turnkey interactions.

Choosing a documented path

1. Use UIOverride for the documented WPF or AngularJS customization patterns.
2. For WPF-Turnkey Fat Client, implement and inject a WPF control through the content-override event.
3. For MDriven Turnkey for AngularJS, use the documented AngularUIOverride tagged value and cshtml override-file approach, or the Angular_Ext_Component tagged value with content in EXT_Components.
4. Ensure that the control used for UIOverride supports the target platform.

See also

• Documentation:UIOverride