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. After the introduction of PlacingContainers - TagExpander-need has decreased to zero as we see it now. Refrain from new use and instead use PlacingContainers to do fluent advanced UI's.

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