Documentation:EXT Components

In the Turnkey Web application you will find a folder EXT_Components.

In the EXT_Components folder you can put sub folders

- each sub folder will constitute one Component - the name of the folder is the component name.

Each component can have js scripts to be loaded when angular app starts - all js found here will be loaded

Each component must have a cshtml file for content structure - name this <component name>.cshtml

Each component probably has css style sheets - all css found here will be loaded - if <name>.min.css is found then <name>.css is skipped

Use in the model

Use a component in MDriven Designer by setting UIOverride on ViewModelColumn and:

tagged value Angular_Ext_Component=<component name>

Implement a simple column override

If your component is very simple - you only want to change the HTML that we generate for the ViewModelColumn - you can do as described in this video

The binding in your replacement html takes this form:

<input ng-model='data.TheViewModelColumnToBindTo'/>

But that will require you to do a new component for each unique column (TheViewModelColumnToBindTo1,TheViewModelColumnToBindTo2).

To mitigate that need we do like this when compiling your replacement HTML:

OverrideDiv.AppendHtml(args.ResultingOverrideHTML.Replace("[ViewModelColumnName]", e.ViewModelColumn.RuntimeName));

This means that to write a more generic replacement control use an expression like this:

<input ng-model='data.[ViewModelColumnName]'/>

Update: We now also search and replace "[ViewModelClassName]". This means that you can write this ng-model='vCurrent_[ViewModelClassName]' to bind to the vCurrent variable of the ViewModelClass that has the component.

Update2: We now also search and replace "[ViewModelColumnLabel]". This means that you can write this <div>[ViewModelColumnLabel]</div> to use the columns designed presentation string in your component.

Implement a Component with js,css and html

Example:

 ****** HTML - save as EXT_Components/test1/test1.cshtml ******
<!-- notice the use of test1 - it is an angular directive that we defines in the js further down -->
  <div test1  class="test1background">
</div>

****** CSS - save as EXT_Components/test1/test1.css ******
.test1background {
    background: pink;
}

****** Javascript - save as EXT_Components/test1/test1.js ******

function InstallTheDirectiveFor_test1(streamingAppController) {
    streamingAppController.directive('test1', ['$document', function ($document) {
            return {
                link: function (scope, element, attr) {
                    // THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1)
                    var c = document.createElement('canvas');
                    element[0].appendChild(c);
                }
            };
        }]);
    console.trace("test1 component Loaded");
}
InstallTheDirectiveFor_test1(angular.module(MDrivenAngularAppModule));

If you use Typescript instead of javascript you can use this code:

****** Typescript if you prefer- save as EXT_Components/test1/test1.ts (js is generated by ts) ******

/// <reference path="../../Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../../Scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../../js/MDrivenAngularApp.ts" />


namespace test1Namespace {

   function InstallTheDirectiveFor_test1(streamingAppController) {
    streamingAppController.directive('test1', ['$document', function ($document) {
      return {
        link: function (scope, element: HTMLDivElement[], attr) {
          let c: HTMLCanvasElement = document.createElement('canvas');
          element[0].appendChild(c);
        }
      };
    }]);

    console.trace("test1 component Loaded");

  }


  InstallTheDirectiveFor_test1(angular.module(MDrivenAngularAppModule));
}

When using Typescript you may want to include a file like the one below to trigger the correct output:

*********** IF YOU USE TYPESCRIPT Consider adding this file to your folder
tsconfig.json
with content:
{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

To get global scripts to run before loading of components look at AppWideAngularScriptIncludes

Example on how to integrate TinyMCE editor in your app.