In the Turnkey Web application, you will find a folder named EXT_Components.
This article targets AngularJS components - to read on Blazor components go here Documentation:EXT ComponentsBlazor
In the EXT_Components folder, you can create subfolders.
- Each subfolder will constitute one Component. The name of the folder is the component name.
- Each Component can have js scripts to be loaded when the angular app starts. All js found here will be loaded if the script filename contains '_module' - we will add type='module' to the script tag.
- 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 generated 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, do this when compiling your replacement HTML:
OverrideDiv.AppendHtml(args.ResultingOverrideHTML.Replace("[ViewModelColumnName]", e.ViewModelColumn.RuntimeName));
This means that you can use an expression like this to write a more generic replacement control:
<input ng-model='data.[ViewModelColumnName]'/>
Update: We now also search and replace "[ViewModelClassName]". This means you can write this ng-model='vCurrent_[ViewModelClassName]' to bind to the vCurrent variable of the ViewModelClass that has the component.
Update 2: We now also search and replace "[ViewModelColumnLabel]". This means 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.
- An example of how to integrate TinyMCE editor in your app.
- Example on A simple table component for just listing a collection without actions/selections.
- Another article describing Turnkey components: https://blog.mdriven.net/svg-and-mdriven-turnkey-components/
New 2023
Components ready to use are maintained in this repository: https://github.com/supportMDriven/MDrivenComponents