The parameter provided for 'container' is invalid.

Customizing MDriven ViewModels with UIOverride and ContentOverride

In MDriven Designer, ViewModels automatically generate UI elements like grids, edits, and picklists for various platforms. However, there are scenarios where injecting custom controls and binding them to your data is necessary. This is where UIOverride and ContentOverride come into play.

Understanding UIOverride

UIOverride allows you to replace or enhance parts of the generated UI with custom controls. You can replace an entire page, dialog, or form, but often it's enough to inject specific controls into the standard UI.

To enable UIOverride, check the "Content override" checkbox on the ViewModel column that serves as the root of your data for the override control. This action signals the Designer, indicated by a grey rectangle. Two new properties appear in the property inspector: ContentOverrideType and ContentOverrideDesignTimePath. These properties point to a C# assembly that can render the control at design time. This step is optional and not required for runtime UIOverride.

UI Override

Implementing UIOverride on Different Platforms

UIOverride works across different platforms, but the control must be compatible with the platform. Here's what you need to do for each:

Platform	Implementation Steps
WPF std MDriven Framework	Implement IExternalWECPOFUIComponent. Read more here.
MDriven Turnkey WPF	Implement the HandleContentOverride method and merge your control with an existing view.
MDriven Turnkey AngularJS	* Add AngularUIOverride tagged value on the ViewModel column. Set the value to a file containing your control, e.g., <yourcontrol>.cshtml. Ensure the file exists on the server under EXT_OverridePages (use AssetsTK). Ensure your control has a unique name to avoid being picked up as a complete view override.
MDriven Turnkey MVC	Follow the same instructions as for Angular, but the Cshtml must be Razor, and your page must use MVC.

Example: WPF-Turnkey Fat Client

In a WPF-Turnkey Fat Client, you typically work in Visual Studio with full access to the Turnkey client code. Your controls are compiled and delivered with the application client.

static WindowWecpofTest()
{
   ViewMetaBase.ContentOverride += HandleContentOverride;
}
public static void HandleContentOverride(object sender, ContentOverrideEventArgs args)
{
   if (args.ViewName == "UIOverride" && args.Owner == "UIOverride" && args.Name == "NumberOfLeaves")
   {
      args.ContinueWithOrg = false;
      ExampleUIOverrideTest myOverride = new ExampleUIOverrideTest();
      Grid.SetColumn(myOverride, args.X);
      Grid.SetRow(myOverride, args.Y);
      Grid.SetColumnSpan(myOverride, args.Colspan);
      Grid.SetRowSpan(myOverride, args.Rowspan);
      Binding b = new Binding("NumberOfLeaves");
      myOverride.SetBinding(ExampleUIOverrideTest.NumberOfLeafsProperty, b);
      (args.StreamCli.TargetForUI as Grid).Children.Add(myOverride);
   }
}

Example: AngularJS

In MDriven Turnkey for AngularJS, you may not need Visual Studio. Instead, signal in the ContentOverride column’s tagged value what the Cshtml is named. The important TaggedValue is AngularUIOverride, and the file location should be <YourSite>\Views\EXT_OverridePages\AFlowerCtrlPartial.cshtml.

In Angular, you have access to data from the scope variable named "data". Here’s an example of binding:

<h1>Control has access to data: {{data.NumberOfLeaves}}</h1>

To react to data changes, use a MutationObserver:

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var myObserver = new MutationObserver(mutationHandler);
var obsConfig = {
   childList: true,
   subtree: true
};
$(document).ready(function () {
   console.info("INIT mutationHandler");
   myObserver.observe(this, obsConfig);
   myObserver.observe(document.getElementById("TriggerToRedraw"), obsConfig);
});
function mutationHandler(mutationRecords) {
   console.info("mutationHandler:");
   var str = $("#TriggerToRedraw")[0].innerHTML;
   console.log("numleaves:" + str);
   var numleaves = Number(str);
   drawStar(100, 100, numleaves, 30, 15);
};

Whenever the MutationObserver detects a change, it calls the script with the new content of the div.

UIOverride and ContentOverride provide flexibility in customizing the UI in MDriven applications. By using these features, you can inject custom controls without overriding entire pages, making your applications more dynamic and tailored to specific needs.

Source

Based on the MDriven video MDriven Turnkey | UI Override.