Chapter 16. Customization

Table of Contents

16.1. Custom Web App
16.1.1. Web App Look-and-feel
16.2. Email Templates
16.2.1. Email Template Syntax
16.2.2. Email Stationary Template
16.2.3. Email Message Template
16.2.4. Email Placeholders Objects
16.2.5. Email Stationary Types
16.2.6. Email Message Types
16.2.7. Custom Template Locations

SavaPage can be customized to fit your corporate identity. Customization makes SavaPage an integral part of your organization rather than an external tool.

Note

Customization is an advanced topic. If you need help, please contact your SavaPage Community Representative.

16.1. Custom Web App

Web App customization is controlled in the /opt/savapage/server/custom/web.properties file. An annotated web.properties.template file is installed for your convenience.

Tip

Each key value in the /opt/savapage/server/custom/web.properties file can be overruled at runtime by specifying the key value in the Configuration Editor. When the configuration key value is left empty customization falls back to the value in the properties file.

16.1.1. Web App Look-and-feel

The look-and-feel of Web Apps can be customized by theming and CSS tailoring.

16.1.1.1. Web App Theming

SavaPage uses jQuery Mobile as user interface system to create responsive Web Apps that are accessible on all smartphone, tablet and desktop devices. jQuery Mobile supports theming. Themes can be built online with the ThemeRoller for Mobile tools and deployed in SavaPage by downloading the zipped theme file and extracting the content of the /themes/ folder into the /opt/savapage/server/custom/web/themes directory.

The web.properties file contains entries to specify a separate CSS theme for each Web App, as shown in the example below:

webapp.theme.admin=admin.min.css              1
webapp.theme.jobtickets=jobtickets.min.css    2
webapp.theme.pos=admin.min.css                3
webapp.theme.user=user.min.css                4

1

CSS theme file name for the Admin Web App.

2

CSS theme file name for the Job Tickets Web App.

3

CSS theme file name for the POS Web App.

4

CSS theme file name for the User Web App.

SavaPage uses swatch[33] a for all pages and dialogs. Swatch b is used for page and dialog headers, and in some cases for list dividers.

You can store a theme in a subdirectory of /opt/savapage/server/custom/web/themes and use its relative path to reference a CSS theme file.

16.1.1.2. Custom CSS

Advanced tailoring can be done with custom CSS files. They are rendered as last, so they have the final say about styling.

The web.properties file contains entries to specify a custom CSS file for each Web App, as illustrated in the example below:

webapp.custom.admin=admin.css              1
webapp.custom.jobtickets=jobtickets.css    2
webapp.custom.pos=pos.css                  3
webapp.custom.user=user.css                4

1

Custom CSS file for the Admin Web App.

2

Custom CSS file for the Job Tickets Web App.

3

Custom CSS file for the POS Web App.

4

Custom CSS file for the User Web App.

Custom CSS files are stored in /opt/savapage/server/custom/web/. Subdirectories are allowed, and you can use their relative path to reference the custom CSS file.

Any content placed in /opt/savapage/server/custom/web/, such as images, can be accessed in CSS via a URL beginning with /custom/web/. For example if a file named logo.png is placed in /opt/savapage/server/custom/web/images it can be accessed via the URL /custom/web/images/logo.png.

User Web App: Custom CSS - Sample #1

Figure 16.1. User Web App: Custom CSS - Sample #1


User Web App: Custom CSS - Sample #2

Figure 16.2. User Web App: Custom CSS - Sample #2


16.1.1.3. Custom HTML

Extra tailoring can be done with HTML snippet files to be injected into the Web App. Injection points are defined at the top of the Login and About Page for each Web App. Snippet files must be placed in the /opt/savapage/server/custom/html/ directory. The default snippet is for the English locale. You can create i18n variants by appending the locale to the base file name. For example: user-login_de.html is the German variant of user-login.html.

Snippet files are assigned in the web.properties file, as shown below. Snippets must refer to the default English language variant. At runtime the locale variant (when applicable and available) is used.

webapp.html.admin.about=admin-about.html            1
webapp.html.admin.login=admin-login.html            2

webapp.html.jobtickets.about=jobtickets-about.html  3
webapp.html.jobtickets.login=jobtickets-login.html  4

webapp.html.pos.about=pos-about.html                5
webapp.html.pos.login=pos-login.html                6

webapp.html.user.about=user-about.html              7
webapp.html.user.login=user-login.html              8                            

1

snippet for Admin About Dialog.

2

snippet for Admin Login Page.

3

snippet for Job Tickets About Page.

4

snippet for Job Tickets Login Page.

5

snippet for POS About Dialog.

8

snippet for POS Login Page.

7

snippet for User About Dialog.

8

snippet for User Login Page.

You can store custom HTML files in a subdirectory of /opt/savapage/server/custom/html/ and use its relative path to reference the HTML file.

Important

Please use this template when creating snippets for Login pages. The CSS classes are needed to toggle visibility of sub-parts in different Login modes.

<h3 class="sp-login-dialog">Header when in Login Mode</h3>
<h3 class="sp-login-dialog-assoc">Header when in Card Self Association Mode</h3>
<div class="sp-login-dialog">
    <!-- Your custom HTML when in Login Mode -->
</div>

16.1.1.4. Custom i18n

In rare cases an application manager might want to override i18n text of Web App pages. Overrides of packaged *.properties.xml files must be placed in /opt/savapage/server/custom/i18n/. Each override must have *.xml name (without the ".properties." part) and be located in a subdirectory with a path identical to the original *.properties.xml file. The content of the override file can be restricted to just the overridden keys.

Example:

/opt/savapage/server/custom/i18n/org/savapage/server/pages/Login_de.xml

Custom i18n must be activated in server.properties with:

webapp.custom.i18n=true

Warning

Custom i18n is an advanced feature and should be implemented in consultation with SavaPage Tech Support.

16.1.1.5. Custom i18n for IPP

IPP attribute localization can be overridden with special i18n XML files. See Section L.3, “IPP Localization”.



[33] A swatch is one of several colour schemes that can be provided by a jQuery Mobile theme. Single-letter designations are used for swatches. The default theme provides two swatches. The "a" swatch is a neutral, gray swatch, and the "b" swatch has a darker color scheme designed to contrast with the "a" swatch. Swatch "b" is used to draw special attention to certain elements in a user interface styled with "a".