Hans Karlsen (talk | contribs) No edit summary |
(Adding page to Category:TOC because it contains a TOC.) |
||
(5 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
To make your app stand out fashion-wise you can work with [[Overriding AngularJS MDriven Turnkey Views|EXT_OverridePages]] | To make your app stand out fashion-wise, you can work with [[Overriding AngularJS MDriven Turnkey Views|EXT_OverridePages]], but since it can quickly become messy to mix Fashion, logic, and data, we now introduce the TagExpander. | ||
=== What is TagExpander? === | === What is TagExpander? === | ||
TagExpander discovers files in <YouModelFileName>_AssetsTK/Views/EXT_OverridePages that are named according to this pattern: <NameOfViewModel>.tagexpander.cshtml | TagExpander discovers files in <YouModelFileName>_AssetsTK/Views/EXT_OverridePages that are named according to this pattern: <NameOfViewModel>.tagexpander.cshtml | ||
Once a TagExpander file is found we load | Once a TagExpander file is found, we load, expand and cache it. We then put a file subscription on it. If you change it, we discover this and clear the cache and signal all the on-screen UI's to contact the server (this is done with SignalR). If the view is your TagExpander view, it is instructed to reload just as if it had lost the context with the server. | ||
This makes TagExpander files extra suitable for iterative design work - since the app is refreshed on model save/update. | This makes TagExpander files extra suitable for iterative design work - since the app is refreshed on model save/update. | ||
=== What | === What Can TagExpander Expand? === | ||
Borrowing from the syntax we have for [[OpenDocument|OpenDocument report generation]] you can use the Root ViewModel Column names with enclosing percentages | Borrowing from the syntax we have for [[OpenDocument|OpenDocument report generation]], you can use the Root ViewModel Column names with enclosing percentages like: <code>%Attribute1.control%</code>. | ||
Note the extra appended ".control" - this is not available in OpenDocument reports since they are | Note the extra appended ".control" - this is not available in OpenDocument reports since they are read-only. TagExtender has access to all controls your normal Turnkey UI has. | ||
If you sometimes want to skip the control and | If you sometimes want to skip the control and access the data of Attribute1-viewModel-Column, you would go to %Attribute1.data%. | ||
=== What | === What About Advanced AngularJS Stuff? === | ||
Sometimes you may need to break into angularJS code to get what you want | Sometimes, you may need to break into angularJS code to get what you want. Then it is practical to have the unmangled expression that a ViewModel-column will produce; for this purpose, we added the %Attribute1.expression% tag. | ||
Example to produce a bullet list of the contents objects in the AllClass1 ViewModel column:<pre> | |||
Example to produce a bullet list of the contents objects in the AllClass1 | |||
<pre> | |||
<ul> | <ul> | ||
<li ng-repeat='row in %AllClass1.expression%'> | <li ng-repeat='row in %AllClass1.expression%'> | ||
Line 28: | Line 25: | ||
</ul> | </ul> | ||
</pre> | </pre> | ||
=== Some | === Some Practical Extras That Always Exist === | ||
To make your fashion work easier we have added these functions | To make your fashion work easier, we have added these functions you can decide to use: | ||
* %Save.control% - this will render a Save button that shows up only if there is something to save | |||
%Save.control% - this will render a Save button that shows up only if there is something to save | * %Cancel.control% - this will render a Cancel button that shows up only if there is something to Cancel | ||
* %NoMenu.control% - this will hide the Turnkey Main menu - giving you a clean canvas to create on | |||
%Cancel.control% - this will render a Cancel button that shows up only if there is something to Cancel | * %Import(<anyurl>).control% - this will pull any HTML or text from a supplied URL and expand it into your file. If the expanded file has TagExpander-tags, they will be expanded. This allows you to work with design tools like Webflow, use TagExpander-tags in the design, and see the expanded result in your Turnkey app with real data. | ||
%NoMenu.control% - this will hide the Turnkey Main menu - giving you a clean canvas to create on | |||
%Import(<anyurl>).control% - this will pull any | |||
=== Tag summary === | === Tag summary === | ||
Line 45: | Line 38: | ||
|- | |- | ||
|%<viewmodelcolumn>.control% | |%<viewmodelcolumn>.control% | ||
|Renders the control - if you have Presentation the label is included, respects Visible,Style and ReadOnly expressions, fully bound and editable if applicable | |Renders the control - if you have Presentation the label is included, respects Visible, Style, and ReadOnly expressions, fully bound and editable if applicable | ||
|- | |- | ||
|%<viewmodelcolumn>.data% | |%<viewmodelcolumn>.data% | ||
|Gives back the angular expression to access the data of this column - ignores Visible,Style and will be readOnly | |Gives back the angular expression to access the data of this column - ignores Visible, Style and will be readOnly | ||
|- | |- | ||
|%<viewmodelcolumn>.expression% | |%<viewmodelcolumn>.expression% | ||
Line 54: | Line 47: | ||
|- | |- | ||
|%<viewmodelcolumn>.label% | |%<viewmodelcolumn>.label% | ||
|Gives back the text that is displayed as control label, or grid column header | |Gives back the text that is displayed as a control label, or grid column header. This will give back the translated text if you use the translation pattern found here: [[Localization]] | ||
|- | |- | ||
|%Save.control% | |%Save.control% | ||
| | |This will render a Save button that shows up only if there is something to save | ||
|- | |- | ||
|%Cancel.control% | |%Cancel.control% | ||
| | |This will render a Cancel button that shows up only if there is something to Cancel | ||
|- | |- | ||
|%NoMenu.control% | |%NoMenu.control% | ||
| | |This will hide the Turnkey Main menu - giving you a clean canvas to create on | ||
|- | |- | ||
|%Import(<anyurl>).control% | |%Import(<anyurl>).control% | ||
| | |This will pull any HTML or text from a supplied URL and expand it into your file | ||
|} | |} | ||
=== Video === | === Watch the Video Below to Learn More About TagExpanders === | ||
<html> | <html> | ||
Line 76: | Line 69: | ||
</div> | </div> | ||
</html> | </html> | ||
[[Category:MDriven Turnkey]] | |||
{{Edited|July|12|2024}} | |||
[[Category:TOC]] |
Latest revision as of 13:46, 26 March 2024
To make your app stand out fashion-wise, you can work with EXT_OverridePages, but since it can quickly become messy to mix Fashion, logic, and data, we now introduce the TagExpander.
What is TagExpander?
TagExpander discovers files in <YouModelFileName>_AssetsTK/Views/EXT_OverridePages that are named according to this pattern: <NameOfViewModel>.tagexpander.cshtml
Once a TagExpander file is found, we load, expand and cache it. We then put a file subscription on it. If you change it, we discover this and clear the cache and signal all the on-screen UI's to contact the server (this is done with SignalR). If the view is your TagExpander view, it is instructed to reload just as if it had lost the context with the server.
This makes TagExpander files extra suitable for iterative design work - since the app is refreshed on model save/update.
What Can TagExpander Expand?
Borrowing from the syntax we have for OpenDocument report generation, you can use the Root ViewModel Column names with enclosing percentages like: %Attribute1.control%
.
Note the extra appended ".control" - this is not available in OpenDocument reports since they are read-only. TagExtender has access to all controls your normal Turnkey UI has.
If you sometimes want to skip the control and access the data of Attribute1-viewModel-Column, you would go to %Attribute1.data%.
What About Advanced AngularJS Stuff?
Sometimes, you may need to break into angularJS code to get what you want. Then it is practical to have the unmangled expression that a ViewModel-column will produce; for this purpose, we added the %Attribute1.expression% tag.
Example to produce a bullet list of the contents objects in the AllClass1 ViewModel column:
<ul> <li ng-repeat='row in %AllClass1.expression%'> {{row.InTheGridAttribute1}} </li> </ul>
Some Practical Extras That Always Exist
To make your fashion work easier, we have added these functions you can decide to use:
- %Save.control% - this will render a Save button that shows up only if there is something to save
- %Cancel.control% - this will render a Cancel button that shows up only if there is something to Cancel
- %NoMenu.control% - this will hide the Turnkey Main menu - giving you a clean canvas to create on
- %Import(<anyurl>).control% - this will pull any HTML or text from a supplied URL and expand it into your file. If the expanded file has TagExpander-tags, they will be expanded. This allows you to work with design tools like Webflow, use TagExpander-tags in the design, and see the expanded result in your Turnkey app with real data.
Tag summary
Tag | Description |
---|---|
%<viewmodelcolumn>.control% | Renders the control - if you have Presentation the label is included, respects Visible, Style, and ReadOnly expressions, fully bound and editable if applicable |
%<viewmodelcolumn>.data% | Gives back the angular expression to access the data of this column - ignores Visible, Style and will be readOnly |
%<viewmodelcolumn>.expression% | Gives back the text that goes inside the angularJS "{" - so that you may use it inside other angularJS functions |
%<viewmodelcolumn>.label% | Gives back the text that is displayed as a control label, or grid column header. This will give back the translated text if you use the translation pattern found here: Localization |
%Save.control% | This will render a Save button that shows up only if there is something to save |
%Cancel.control% | This will render a Cancel button that shows up only if there is something to Cancel |
%NoMenu.control% | This will hide the Turnkey Main menu - giving you a clean canvas to create on |
%Import(<anyurl>).control% | This will pull any HTML or text from a supplied URL and expand it into your file |
Watch the Video Below to Learn More About TagExpanders