Documentation:Fashion with tagexpander

To make your app stand out fashion-wise you can work with EXT_OverridePages - but since it can get messy fast to mix what is Fashion and what is 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 it, expand it and cache it - we then put a file subscription on the file - so 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) and 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 readonly - but TagExtender has access to all controls your normal Turnkey UI has access to.

If you sometimes want to skip the control and just access the data of Attribute1-viewModel-Column the you would go %Attribute1.data%.

What about advanced AngularJS stuff?

Sometimes you may need to break into angularJS code to get what you want - and 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 exists

To make your fashion work easier we have added these functions that you can choose 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 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