14.19. Build an MSP Invoice Layout: Create, Clone, Designer Workspace, Components, and Field Binding

This page walks the full build flow for an Alga PSA invoice layout: creating or cloning the layout, navigating the visual designer, choosing the right components, and binding invoice data into them. Once you finish here, styling and shaping are covered in 14.20. Style and Shape Invoice Layouts, and page setup, preview, and troubleshooting in 14.21. Page Setup, Preview, and Troubleshooting. For the overview of what layouts are and how they're assigned, see 14.18. What Are Invoice Layouts.

For most MSPs, the safest approach is to start from a standard layout or a known working custom layout, then make small changes and preview the result.

Create a new layout

Go to Billing > Invoice Layouts.
Click Create New Layout.
Enter a clear name, such as GreenLeaf Managed Services Invoice Layout.
Use the visual designer to add invoice components.
Preview the layout with sample or existing invoice data.
Save the template when it is ready.

Figure 1: A new invoice layout starts with a name, design workspace, and page setup controls.

When to clone instead of starting blank

Clone or copy an existing layout when you only need to adjust presentation. Starting from a blank layout is better when you want a completely new page structure.

On the Invoice Layouts list, use the row's actions menu:

Clone creates a duplicate and appends (Copy) to the name. The new copy is saved as a custom layout you can edit later.
Edit as Copy appears on standard layouts because standards are read-only. Choosing it creates an editable copy named Copy of [original name] and opens it in the visual designer.

Situation	Recommended approach
Add your logo and payment instructions to the standard invoice	Clone a standard layout, then edit branding and footer text.
Create a special invoice for a large managed services client	Clone your normal layout, then add client-specific sections.
Build location-based billing presentation	Start from a standard detailed layout or a layout that already groups line items.
Redesign the invoice from scratch	Create a new blank layout and add only the components you need.

Naming standards

Use names that explain how the layout should be used.

Good name	Avoid
Default Managed Services Invoice	New Template
GreenLeaf Dental Monthly Services Invoice	Test Layout
Project Retainer Invoice Layout	Invoice Copy 2 Final
Location-Based Invoice Detail	Layout 7

If a layout is client-specific, include the client or agreement name. If it is a general tenant default, use a broad name like Default MSP Invoice Layout.

The Designer Workspace

The invoice designer is a visual workspace for building invoice documents. You place components on a page, arrange them, bind fields to invoice data, style the layout, and preview the result before saving.

Figure 2: The designer includes the component palette on the left, the invoice canvas in the center, and the inspector on the right.

Main areas

Area	What it does
Template name	Names the layout so billing staff know when to use it.
Visual / Code tabs	Most users work in Visual mode. Code mode is a read-only JSON view of the template structure, useful for advanced inspection or support workflows.
Design tab	The drag-and-drop canvas where you build the invoice page.
Transforms tab	Optional data shaping for filtering, sorting, grouping, or summarizing invoice collections. See 14.20. Style and Shape Invoice Layouts.
Preview tab	Renders the invoice using sample data or an existing invoice. See 14.21. Page Setup, Preview, and Troubleshooting.
Toolbar	Undo, redo, snap-to-grid, guides, rulers, and zoom controls.
Palette	Blocks, presets, fields, and outline tools for adding or navigating components.
Canvas	The page area where invoice content is arranged.
Inspector	Property panel for the selected component or page setup.

Toolbar controls

Control	Use it for
Undo / Redo	Step backward or forward while editing.
Snap	Keep components aligned to the grid. Leave it on for most business layouts.
Guides	Show alignment helpers while moving components.
Rulers	Show measurement guides around the page.
Zoom	Zoom in for detailed placement or out for full-page review.

Palette tabs

Tab	Use it for
Blocks	Add sections, containers, text, data fields, totals, tables, logos, and images.
Presets	Insert prebuilt combinations when available.
Fields	Browse invoice, customer, tenant, and line-item fields that can be inserted into text or field components.
Outline	Navigate the component hierarchy when a layout becomes complex.

Inspector basics

The inspector changes based on the selected component. Select a logo to edit image-related settings. Select a table to edit table settings. Select a section or container to change layout, spacing, size, background, borders, and alignment.

When no component is selected, the inspector shows page setup controls such as paper preset and margins. Paper preset and margins are covered in 14.21. Page Setup, Preview, and Troubleshooting.

Practical editing habits

Build from top to bottom: header, invoice details, line items, totals, footer.
Use containers to keep related items aligned.
Keep snap and guides enabled while arranging components.
Preview frequently instead of waiting until the layout is finished.
Save only after the preview successfully renders the expected data.

Component Reference

Invoice layouts are built from components. Each has a business purpose: some organize the page, some display invoice data, some repeat line items, and some add branding or supporting information. The blocks listed below match the BLOCKS tab in the designer's left rail.

Structure components

Component	Use it for	Example
Section	Group a major part of the invoice.	Header, billing summary, line items, footer.
Box Container	Arrange several items in a row, column, or grid.	Logo on the left and invoice number on the right.
Divider	Separate invoice areas visually.	Line between header and invoice details.
Spacer	Add intentional blank space.	Extra space before totals or payment instructions.

Content components

Component	Use it for	Example
Text Block	Static or mixed text.	"Thank you for choosing Northstar Managed IT."
Data Field	A bound invoice value.	Invoice Number, Due Date, Customer Name, Total.
Field Label	A label next to a data field.	"Due Date" or "PO Number."
Totals	A combined subtotal, tax, and total block.	Standard invoice total section.
Subtotal Row	A single subtotal line.	Show subtotal in a custom totals design.
Tax Row	A single tax line.	Show tax below subtotal.
Discount Row	A discount line.	Show contract discount or credit.
Custom Total Row	A custom summary line.	"Managed services total" or "Project total."
Signature Block	A signature line when needed.	Project or quote-style signoff workflows.
Action Button	A visual button in supported document output.	"Pay Invoice" or "View Portal."
Attachment List	List supporting attachments.	Project statement of work or supporting billing detail.

Dynamic components

Component	Use it for	Example
Line Items Table	Standard invoice line-item table.	Description, quantity, rate, and amount.
Dynamic Table	A repeating table bound to another collection.	Grouped usage rows or custom detail rows.

Dynamic components are essential when the number of invoice rows changes from invoice to invoice. Configuring column bindings and grouping is covered in 14.20. Style and Shape Invoice Layouts.

Media components

Component	Use it for	Example
Image	Add a stored image.	A remittance slip, certification badge, or document image.
Logo	Add your MSP logo.	Top-left branded invoice header.
QR Code	Add a scannable code.	Payment link, portal link, or reference link when supported.

Recommended starter set

For a standard MSP invoice, begin with:

Logo for branding.
Text Block for your MSP name or payment message.
Data Fields for invoice number, customer name, issue date, due date, and PO number.
Line Items Table for services, time, usage, and recurring charges.
Totals for subtotal, tax, and amount due.
Text Block for payment instructions and support contact.

Keep the first version simple. Add advanced components only when they solve a real client billing need.

Binding Invoice Data

A layout becomes useful when its components are connected to invoice data. In the designer, this is called binding. A bound field displays the value from the invoice being rendered, such as customer name, invoice number, due date, subtotal, tax, or total.

Figure 3: The Fields tab helps billing admins find and insert available invoice data fields.

Field categories

The Fields picker groups available data into four core categories.

Category	Common fields	Use them for
Customer	Customer Name, Customer Address	Show who receives the invoice.
Invoice	Invoice Number, Issue Date, Due Date, PO Number, Subtotal, Tax, Total, Recurring Service Period	Show core invoice details and amounts.
Line Item	Item Description, Item Quantity, Item Unit Price, Item Total, Item Service Period Start/End, Item Billing Timing	Build tables and detailed charge explanations.
Tenant	Tenant Name, Tenant Address	Show your MSP company information.

Where to use fields

Fields can appear in several places in a layout:

a Data Field component;
a Text Block that combines text and values;
a Line Items Table column;
a Totals or custom total row;
a footer message or payment instruction.

Inside a Text Block, fields are interpolated with double-brace syntax. For example, a payment message might say: "Payment for invoice {{invoice.number}} is due by {{invoice.dueDate}}." You can also pipe values through formatters, such as {{invoice.total | currency}}.

Important invoice fields

Most invoice layouts should include:

Field	Why it matters
Customer Name	Confirms the billed client.
Invoice Number	Required for client reference and accounting.
Issue Date	Shows when the invoice was created.
Due Date	Makes payment timing clear.
PO Number	Important for clients that require purchase orders.
Recurring Service Period	Explains the service window for recurring billing.
Subtotal, Tax, Total	Shows the billing calculation and amount due.

For configuring the totals rows specifically, see 14.20. Style and Shape Invoice Layouts.

Important line-item fields

Line-item fields explain what the client is being charged for and drive the rows of dynamic tables.

Field	Example use
Item Description	"Managed Endpoint Monitoring" or "Cloud Backup Storage Overage."
Item Quantity	35 endpoints, 250 GB, or 4.5 hours.
Item Unit Price	Rate per endpoint, GB, license, or hour.
Item Total	Extended amount for that line.
Item Service Period Start/End	Useful for recurring services and contract periods.
Item Billing Timing	Helps explain prepaid, arrears, or period-based charges when available.

Binding checklist

Before saving a layout, preview it and confirm:

customer and tenant fields show the right names and addresses;
invoice number, issue date, due date, and PO number appear where expected;
service period fields are present for recurring invoices;
line-item quantity, rate, and amount columns align correctly;
totals are formatted as currency;
missing optional fields do not leave confusing blank labels.

Preview before you save

The designer's Preview tab renders the layout against real data so you can validate the result before saving:

Sample invoice data — pick one of the built-in sample invoices to confirm structure, totals, and styling without touching live data.
Existing invoice data — select an actual invoice from your tenant to see exactly how the layout will render for a known billing scenario.

Always run a preview with both a sample and a representative existing invoice before publishing changes. The full preview/validation workflow lives in 14.21. Page Setup, Preview, and Troubleshooting.

Before saving

Before saving a new layout, confirm:

the layout has a meaningful name;
the invoice number, customer name, issue date, due date, and total are present;
line items are visible and readable;
totals appear once and are easy to find;
the logo or images fit the page;
margins are suitable for PDF and print;
preview renders successfully with both sample and existing invoice data.

Do not assign a new layout as a default until billing staff have previewed it with realistic sample data or an existing draft invoice.

Navigation