Automated page numbering (e.g., "Page 1 of 10") adds a professional touch to your generated documents. You can easily add this to your Headers or Footers using a small snippet of HTML.
How it Works
AMFG uses specific "marker" classes (pageNumber and totalPages) to identify where the dynamic numbers should appear. Once added to your template, the system automatically calculates and inserts the correct digits on every page.
The Code Snippet Examples
Copy and paste the following code into your Footer or Header section:
<!--footer_start height="50px"-->
<div style="display: flex; flex-direction:row;">
<div>Page </div>
<div class="pageNumber"> </div>
<div> of </div>
<div class="totalPages"> </div>
</div>
<!--footer_end-->
<!--header_start height="50px"-->
<div style="display: flex; flex-direction:row;">
<div>Page </div>
<div class="pageNumber"> </div>
<div> of </div>
<div class="totalPages"> </div>
</div>
<!--header_end-->
Customizing Your Page Numbers
You can tweak the style of your page numbers by adjusting the style attribute in the code above:
Alignment: Change
justify-content: center;toflex-start(left) orflex-end(right).Font Style: Update the
font-familyorfont-sizeto match your company’s branding.Vertical Space: Adjust the
height="50px"in the opening comment if your footer needs more or less room. If height is not specified, it will default to 20px.
Key Requirements
The Comment Tags: Ensure you include the start/end tags. These tell the AMFG engine exactly where the footer content begins and ends.
Class Names: Do not rename the classes
pageNumberortotalPages. The system relies on these exact names to inject the page data.