Generate Invoices with Line Items Using Visualforce in Salesforce

Generate Invoices with Line Items Using Visualforce in Salesforce 

In many business scenarios, generating a printable invoice for your customers is a crucial step in the sales or service process. Although Salesforce provides powerful declarative tools, sometimes you need more customization — like generating a structured invoice with detailed line items tied to an Account. 

In this blog, I’ll walk you through how I implemented a custom Visualforce-based invoice generation system in Salesforce using: 

A Visualforce Page
A Custom Button on the Invoice object
An Apex Controller
Related data display for Invoice Line Items 

Object Model Overview 

Let’s first understand the custom objects used in this solution: 

🔹 Account (Standard Object) 

Represents the customer. 

🔹 Invoice__c (Custom Object) 

Stores invoice metadata like invoice date, total amount, and associated account. 

🔹InvoiceLineItem__c (Custom Object) 

Child object of Invoice__c. Each record represents a product/service line with: 

• Product__c 

• Quantity__c 

• Price__c 

• Total__c (calculated) 

Step 1: Add the ‘Generate Invoice’ Button on Invoice 

To open our Visualforce page from a record, we need a custom button. 

Steps: 

1. Go to Object Manager → Invoice__c → Buttons, Links, and Actions 

1. Click New Button or Link 

1. Fill the details: 

• Label: Generate Invoice 

• Display Type: Detail Page Button 

• Behavior: Display in existing window without sidebar or header 

• Content Source: URL 

• URL: 

1. Add the button to the Page Layout under Custom Buttons 

Step 2: Create the Visualforce Page 

Here’s the Visualforce code that renders the invoice with a summary and detailed line items. 

GenerateInvoiceVF.page 

<apex:page controller=”GenerateInvoiceController” renderAs=”pdf” showHeader=”false” sidebar=”false”> 

    <apex:form > 

        <apex:pageBlock title=”Invoice Summary”> 

            <apex:pageBlockSection columns=”2″> 

                <apex:outputLabel value=”Invoice Name:”/> 

                <apex:outputText value=”{!invoice.Name}” /> 

                <apex:outputLabel value=”Account:”/> 

                <apex:outputText value=”{!invoice.Account__r.Name}” /> 

                <apex:outputLabel value=”Invoice Date:”/> 

                <apex:outputText value=”{!invoice.Invoice_Date__c}” /> 

                <apex:outputLabel value=”Total Amount:”/> 

                <apex:outputText value=”{!invoice.Total_Amount__c}” /> 

            </apex:pageBlockSection> 

        </apex:pageBlock> 

        <apex:pageBlock title=”Invoice Line Items”> 

            <apex:pageBlockTable value=”{!lineItems}” var=”item”> 

                <apex:column headerValue=”Product”> 

                    <apex:outputText value=”{!item.Product__c}” /> 

                </apex:column> 

                <apex:column headerValue=”Quantity”> 

                    <apex:outputText value=”{!item.Quantity__c}” /> 

                </apex:column> 

                <apex:column headerValue=”Price”> 

                    <apex:outputText value=”{!item.Price__c}” /> 

                </apex:column> 

                <apex:column headerValue=”Total”> 

                    <apex:outputText value=”{!item.Total__c}” /> 

                </apex:column> 

            </apex:pageBlockTable> 

        </apex:pageBlock> 

    </apex:form> 

</apex:page> 

Step 3: Apex Controller Logic 

This controller fetches the invoice and related line items based on the record ID passed from the button. 

GenerateInvoiceController.cls 

apex 

CopyEdit 

public class GenerateInvoiceController { 

    public Invoice__c invoice { get; set; } 

    public List<InvoiceLineItem__c> lineItems { get; set; } 

    public GenerateInvoiceController() { 

        Id invoiceId = ApexPages.currentPage().getParameters().get(‘id’); 

        if (invoiceId != null) { 

            invoice = [ 

                SELECT Id, Name, Account__r.Name, Invoice_Date__c, Total_Amount__c  

                FROM Invoice__c  

                WHERE Id = :invoiceId  

                LIMIT 1 

            ]; 

 

            lineItems = [ 

                SELECT Id, Product__c, Quantity__c, Price__c, Total__c  

                FROM InvoiceLineItem__c  

                WHERE Invoice__c = :invoiceId 

            ]; 

        } 

    } 

}  

Final Output 

After clicking the Generate Invoice button on an Invoice record, users are redirected to a clean, organized invoice view showing: 

• Invoice Summary 

• Customer (Account) Name 

• Invoice Date 

• Line-by-line items (Product, Quantity, Price, Total) 

This is ideal for printing, emailing to clients, or maintaining records. 

Possible Enhancements 

• Add a Download PDF button or auto-download functionality. 

• Integrate with Email-to-Customer flow using Apex or Flow. 

• Add custom branding or logos to the Visualforce page. 

• Use Apex triggers to auto-generate InvoiceLineItems based on Opportunity Products. 

Final Thoughts 

This approach combines Salesforce’s customization power (Apex + VF) with business-centric needs like invoice generation. Whether you’re working for a sales-driven business or a service-based company, having a print-ready invoice system directly in Salesforce can significantly streamline your billing process.