Receipt Headers and Footers Overview

   Journey Manager (JM) The transaction engine for the platform. |   System Manager / DevOps |  All versions This feature is related to all versions.

When Manager creates a PDF receipt, it uses phantomjs to render each header and footer in a separate HTMLMaestro forms are fundamentally built using HTML 5. The structure of the form and the text displayed in the form are all configured and established using HTML5. HTML is the standard markup language for creating Web pages and stands for Hypertext Markup Language. HTML 5 describes the structure of a Maestro form. DOM prior to generating the receipt. This has several consequences:

• The pagination process requires a fixed header and footer height in order to correctly size the pages. This means that every page will reserve a fixed amount of space for the header and footer even if there is no content present. You can set this fixed header and footer height by setting the paperSize.header.height or paperSize.footer.height properties in the JSONJSON (JavaScript Object Notation) is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays. options file. Content that exceeds this height will be clipped and not show on the receipt.
• Because each header and footer is rendered in a separate HTML DOM, CSSCSS stands for Cascading Styles Sheets and is used to define styles for a Maestro Form, including the design, layout, and variations in the form’s display on different devices and screen sizes. The CSS on a Maestro form is primarily taken care of by the Template Designer. The Template Designer will implement the branding and/or styling of the form’s assets.CSS can be applied to the template of the form, individual components, and any other asset associated with a Maestro form. classes defined in the form itself will not ordinarily be available to use, but instead, styling must be applied using in-line styles. Render Receipt services, such as Dynamic PDF Receipt 2 Service, allow you to apply these styles with ease.
• You can use the config.customCSS property to add additional CSS style definitions to the form.
• If the config.supportHeaderFooterCSSClasses is set to true then any CSS classes used in a header or footer template are converted automatically to inline styles. This also allows the use of CSS classes already defined in the form itself, not just those defined in the config.customCSS property.

Header and Footer Templates

The headers and footers properties, stored in a JSON file, allow you to specify template rules that a receipt service runs to determine the content of a header and a footer. Click Receipt Properties Json to view a JSON file of your render receipt service, for example Dynamic PDF Receipt 2 Service. Each rule has a pageFilter and template property.

The template property contains the HTML that defines the header and footer content. The tokens ${page}and ${numPages} will be replaced with the current page number and total number of pages respectively. Page numbering will start from 1. The content must be a single HTML element so if you need multiple elements, be sure to wrap them in an appropriate <div> element.

The pageFilter property is a string that contains either the page number or a * to match all pages not otherwise filtered.

You can enable logging of the templates used by setting the config.logHeadersFooters property to true.

Custom Headers and Footers In a Form

Forms can optionally use JavaScriptJavascript (JS) is a scripting languages, primarily used on the Web. It is used to enhance HTML pages and is commonly found embedded in HTML code. JavaScript is an interpreted language. Thus, it doesn't need to be compiled. to control the content and styling of headers and footers. You may want to do this for example to inject calculated or dynamic content in the header or footer. To allow a form to control the header and footer behavior first you will need to make sure the config.disableFormOverrides property of the JSON options file is set to false.

You will then need to inject a function into the window object of your form using JavaScript inside your form as in the example below.

window.phantomReceiptCallback = function(actionName,data) {
if (actionName=="orientation") {
	// return either "landscape" or "portrait" or fall 
	// this action is only invoked once per form 
}
if (actionName=="format") {
	// return the paper format eg "A4","letter",etc or fall 
	// this action is only invoked once per form 
}
if (actionName=="margin") {
	// return a JSON object defining the margin eg {"top": "0.5cm","left": "0.5cm","bottom": "0.5cm","right":"0.5cm"} or fall  
	// this action is only invoked once per form 
}
if (actionName=="headerHeight") {
	// return the header height  eg "1cm" or fall
	// this action is only invoked once per form 
}
if (actionName=="footerHeight") {
	// return the footer height  eg "1cm" or fall
	// this action is only invoked once per form 
}
if (actionName=="header") {
	// return the header template string eg "<p>This is the header</p>" or fall 
	// you can specify the tokens ${page} and ${numPages} in the template you are returning and they will be replaced appropriately
	// you can access the current page and number of pages programmatically by using data.pageNum and data.numPages respectively
	// this action is invoked for every page on the form 
}
if (actionName=="footer") {
	// return the footer template string eg "<p>Page ${page} of ${numPages}</p>" or fall  
	// you can specify the tokens ${page} and ${numPages} in the template you are returning and they will be replaced appropriately 
	// you can access the current page and number of pages programmatically by using data.pageNum and data.numPages respectively
	// this action is invoked for every page on the form 
}
// NOTE: always return the value defined in Manager if not explicitly overriden above
return data.defaultValue; // this is the value from the JSON options file
};

Here is an example of using a form function to inject the tracking code into the form footer on page 1 for a Composer form. You can for example add this JavaScript to a composer form by dropping a Business Rule [General Purpose] with the below script content.

window.phantomReceiptCallback = function(actionName,data) {
	if (actionName=="footer") {
		if (data.pageNum==1) {
			var trackingCode = sfc.getPhaseValue("TrackingCode");
			return "<p class='phantom-footer'>Page ${page} of ${numPages} - "+trackingCode+"</p>";
		}
		return "<p class='phantom-footer'>Page ${page} of ${numPages}</p>";
	}
	// NOTE: always return the value defined in Manager if not explicitly overriden above
	return data.defaultValue; // this is the value from the JSON options file
};

Next, learn how to configure receipt headers and footers.