Customer center templates
The templates are located inside the Templates directory in your Service install directory. Inside this directory, there can be multiple folders, each containing templates for the different customer languages. Inside the language directory, there should be only one directory called customer, unless you have made any custom directories. This is where the templates are stored. To edit one, you simply open it in a text editor.
What the various templates do is described on Customer Center Configuration page.
The templates are composed of normal HTML code and some tags that are understood by the Service system. These tags are marked with the percent symbol. For example, %GfxPath%. In Service-jargon, these tags are called parser variables. When accessed through the customer module in Service, the parser variables are replaced with understandable HTML code.
All templates can be customized to your own wishes and you should be safe when just editing the HTML code and preserving the parser variables. If you are certain that you do not need a parser variable you can remove it. Parser variables can also be moved to other places in the template to fix the order of information.
The template called framework.html is the base template. This acts like a frame in normal HTML, except that it does not use frames. All other templates are displayed inside this, so the framework.html will form a border around them. Hence, graphical changes you want to be exposed on every customer page should go here. All the other templates are linked to one action.
You should be able to understand what the different parser variables do by looking at the various templates and the result they produce, but this document will go through some of the important constructions.
IF-construction:
%IF:<test>%
%ELSE%
%ENDIF%
The <test> statement can either be a parser variable only (if it is located the test returns true), or it can be a comparison of a parser variable and a constant, for example %IF:authenticated="true"%.
Looping:
%ROWSTART%
...
<parser variables>
...
%ROWEND%
This construction will loop over a set of parser variables. You can see an example of this in use in listTickets.html, which lists all requests for a customer. Loops can not be nested. Be aware that the %ROWSTART% and %ROWEND% tags have to be placed at the beginning of a line with no spaces or tabs before it.
Two important global parser variables are %GfxPath% which gives the base path to the graphic directory. Example:
%GfxPath%/customer/myPic.gif
%Program% will return the link for the customer module. If you for example would call the routine to register a customer, you would write:
<a href="%Program%?action=registerCust">Register</a>
The other variables should be self-explaining if you study the templates. Be aware that all parser variables will not be accessible in every template. To see the defined variables for a template, you can use the special debug variables %PARSER_TREE% at the bottom of a template file. This will print out all the variables to your browser when access through the customer module. This is especially useful when you want to explicitly call an extra field defined in Service. If you for example make an extra field in the request table, you have to manually code the template to show these in the customer pages.
You can also create your own custom templates, which for example can make a request in Service based on information from the web page. The following described how to make such templates.
How can I create drop-downs on the customer pages where you can choose the category from a hierarchical view?
Customer Center is default shipped with templates that lists the categories in a single drop-down. If you want these to show the categories in a hierarchy, you have to make some small changes to the templates.
In framework.html you have to add the following between the <head> tags:
%IF:category.head% %category.head% %ENDIF%
To use the category drop-down, you enter the following into the right templates:
%IF:category.body% %category.body% %ENDIF%