Customizing Template

A template is a zip file of code snippets needed to generate the output files. Template is fully customizable, you can customize the default template shipped with the product to suit your own needs in your apps.

Customizing templates requires necessary knowledge in the related web technologies, HTML and JavaScript, and understanding on how template works. Please read the follows carefully before customizing the template.

The template engine uses Node.js and the scripting language is JavaScript, to customize template you need to have basic knowledge of JavaScript.

 

Zipped Template, Unzipped Template and Template Cache

To generate output files, the code generator first unzips the template and extensions to the subfolder <product name>\<template file name> under your AppData folder (e.g. C:\Users\<user>\AppData\Roaming\<product name>\<template file name>), then it uses these files to generate output files.

If you want to customize a template, normally you customize the files in the zipped template, but you'll need to zip it back after customization, for example, by dragging the customized files back to the zipped template. The unzipped template under the AppData folder provides an optional way to customize the template without re-zipping the template. Either way, you should zip it back after all the customizations are done. If you prefer to work with the unzipped template but you have not generated any files yet, do once first. Then you can modify the unzipped files under the subfolder named "template" and "extensions".

Note The customized files will not be zipped back to the template archive automatically. It you want to transfer or share your template, you need to zip the template files back to a template archive yourself. When you zip the template files, make sure you zip the files and subfolders in the unzipped folder, not the unzipped folder itself. Otherwise there will be one level different. Using above example, you should add the files and subfolders under the "template" subfolder to the template archive, NOT the whole folder.

When changes in the zipped template is detected, the code generator will ask you to confirm overwriting the old unzipped version, you should answer carefully, especially if you've implemented some customizations previously. Always back up your customized template first!

 

Control File

The core of the template file is a control file named control.xml. It is an XML file containing information about files to be generated. During generation the code generator will parse the control.xml and generate the output files one by one. If you want to add an output file, you need to add a <control> tag in the control file.

 

File Encoding

The template files and output files are in utf-8 encoding. Since the phrases are separated into XML language files in utf-8 encoding, when you customize a template, it is recommended you use the language file also. If you have to put unicode characters directly in the template files, you must always use utf-8 and save the file in utf-8 encoding.

 

Subfolders

Subfolders are defined in control.xml, if you want to add and copy additional subfolders, you also need to add a <control> tag in the control file.

 

Language Files

All the phrases in the template are separated into a single XML language file for easy translation to other languages and sharing. If you want to translate a template, this should be the only file you need to translate.

Language files are placed in the subfolder "languages" under the installed folder and they are used by all templates.

See Multi-Language Project for more information on making a language file.

 

Template Tags and Object Properties

The code generator processes the Template Tags in the template, assembles the output files using the code snippets from template files and generate code according to Object Properties. Object properties are project settings, they will outputted to the "cache" folder as a .json file (e.g. C:\Users\<user>\AppData\Roaming\<product name>\<template file name>\cache\<project name>.json) before each generation.

 

User Code

Advanced users can customize some dynamically generated code by adding events in the User Code file, which by default is named as "usercode.js" and can be located under the "src" subfolder of the installed directory. You can also add events to do something before and/or after generation, change project settings and add your own global functions in the User Code file. See Using User Code for details.

 

Extensions

An extension allows you to change the template to support additional feature(s) implemented in the extension.

Extensions files (in zipped format) must be placed under the subfolder "extensions" of the installation folder. Each extension must have a XML description file so the product can load it in the user interface for selection. You can open an XML file in the "extensions" subfolder to see the content, which is self-explanatory. Unzip the extension to see how it is implemented. See Extensions for details.

 

Custom View Tag

Custom View Tag is same as extensions except that it is used to display a field in the List and View pages with your own code. A Custom View Tag has the same structure as extension and you can modify them in exactly the same way.

Custom View Tag files (in zipped format and XML format) must be placed under the subfolder "customviewtags" of the installation folder. Each Custom View Tag must have a XML description file so the product can load it in the Field Setup page for selection. You can open an XML file in the "customviewtags" subfolder to see the content, which is self-explanatory. Unzip the Custom View Tag to see how it is implemented.

Read Field Setup on how to select Custom View Tag for a field.

 

Custom Edit Tag

Custom Edit Tag is same as extensions except that it is used to display the Edit Tags of a field (e.g. in Add/Edit pages) with your own code. A Custom Edit Tag has the same structure as extension and you can modify them in exactly the same way.

 

Also See

Control File
Template Tags
Object Properties
Using User Code
Extensions
Third-party Tools
Tools

 

 

 ©2016-2021 e.World Technology Limited. All rights reserved.