UIOverride, ContentOverride–creating and injecting your own controls in MDriven Turnkey generated UI

If you are happy with most of the generated UI but you have a few requirements that needs custom code you could override the whole page – or as we will look at in this article – use a part of the page.

The ability to inject your own controls into non-turnkey-MDriven applications has been covered in this earlier article: //www.capableobjects.com/2013/06/10/custom-controls-in-viewmodel-aided-views/

In the video I walk through the steps for both Angular and WPF-Turnkey-Fatclient.

In WPF-Turnkey-Fatclient you go like this:

    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);
      }
    }

In WPF-Turnkey-Fatclient you will likely work in Visual Studio having full access to the Turnkey client code. Your controls are then compiled and delivered along with the application-client.

In MDrivenTurnkey for AngualarJS you may not and need not to have access to the Visual Studio at all.

Instead you signal in the ContentOverride column’s tagged value what the cshtml is named:

image

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”. This is one example on how to bind:

<h1>Control has access to data Im telling the truth! {{data.NumberOfLeaves}}</h1>

In my example ctrl I wanted to call a javascript everytime my data changed. Maybe there are other ways to accomplish this but I added a MutationObserver to a div that shows my data:

 

    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 finds a “Mutation” on my div it will call the script with new content of that div.

The drawStar script I found at fiddle here

This entry was posted in Turnkey and tagged , . Bookmark the permalink.

2 Responses to UIOverride, ContentOverride–creating and injecting your own controls in MDriven Turnkey generated UI

  1. guest00 says:

    Hi Hans!

    Could you please advise where I can find (or download) this project?

    Thank you,
    Regards,
    Alexandr

  2. Admin says:

    Hi Alexndr – sorry for the delay – this is available in the MDrivenTurnkeyClientCode download available on buildserver

Leave a Reply

Your email address will not be published. Required fields are marked *

*