Benutzerdefiniertes Template für Rechnungserstellung

Benutzerdefiniertes Template für Rechnungserstellung

In der All-In-One-Lösung HaloPSA können Sie selbstverständlich auch automatisch Rechnungen erstellen und versenden. Um Ihren Wünschen und Anforderungen gerecht zu werden, können Sie individuelle Vorlagen für die Rechnungserstellung erstellen. Gehen Sie dazu wie folgt vor:



Erstellung eines neuen Templates


Um zu der Bearbeitung des Templates zu gelangen unter folgendem Pfad im Dropdown "Invoices" auswählen.


Oben auf der rechten Seite befindet sich der Button "New" womit ein neues Template erzeugt werden kann. 






Grundeinstellung des Templates


Unter dem Reiter Appearance lassen sich die Grundeinstellungen wie das Margin der Seitenränder, zum Kopf - (Header), sowie zum Fuß (Footer) - Bereich und des Templates einstellen.


Um das Margin des Headers und Footers einzustellen, müssen die Radio Buttons bei "Include Header" und Include Footer aktiviert sein, welche sich durch den Edit Button in der Standardansicht verändern lassen. 



Hinzufügen eines Hintergrundbildes

Dies kann vor allem dann wichtig sein, sofern ein benutzerspezifisches Hintergrundbild für das Dokument verwendet werden soll.


HaloPSA bietet momentan noch keine direkte Lösung eines direkten Uploads eines Bildes an. 

Somit kann der gewünschte Hintergrund nur per URL verlinkt werden. 

Um dennoch das Bild auf der Instanz selbst hochzuladen, kann ein Trick angewendet werden. 


Hierfür wählt man unter dem Reiter Pages den Stift zur Bearbeitung hinter der Seite aus. Anschließend gelangt man in den Editor Modus des Templates. Auf der rechten Seite befinden sich die verschiedenen Content Buttons des Unlayer Editors. 

Zieht man nun das Image Feld in das Template, ergibt sich die Möglichkeit ein Bild via Drag and Drop abzulegen. 

Nach Upload lässt sich der Pfad des Bildes kopieren und unter dem Reiter Appearance einfügen. 









Beispielcode


<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <title>Rechnung</title>

    <style>

        body {

            font-family: sans-serif; /* Standardschrift für bessere Lesbarkeit */

            font-size: 12px;

        }


        .header {

            display: flex;

            justify-content: space-between;

            align-items: flex-start;

            margin-bottom: 40px; /* Abstand zum folgenden Inhalt */

        }


        .header > div {

            width: 48%; /* Etwas weniger als 50%, um Luft zu lassen */

        }


        .invoice-biller {

            font-size: 8px!important;

            color: $ORCOLOUR;

            font-weight: bold;

            margin-bottom: 8px;

        }


        .invoice-info {

            text-align: right;

        }


        .invoice-info table {

            margin-left: auto;

            width: auto; /* Breite an den Inhalt anpassen */

            border-collapse: collapse; /* Rahmen zusammenfallen lassen */

        }


        .invoice-info td {

            padding: 5px;

        }


        .invoice-info td:first-child{

            font-weight: bold;

            padding-right: 10px;

        }


        .table-info {

            margin-bottom: 20px;

        }


        .detail-table {

            width: 100%;

            border-collapse: collapse;

            border: 1px solid $ORCOLOUR;

            margin-bottom: 20px;

        }


        .detail-table th, .detail-table td {

            border: 1px solid #ccc;

            padding: 8px;

            text-align: left; /* Text in Tabellenzellen links ausrichten */

        }


        .detail-table th {

            background-color: $ORCOLOUR;

            color: $ORTEXTCOLOUR;

            font-weight: bold;

        }


        .total-table {

            width: auto; /* Breite an den Inhalt anpassen */

            margin-left: auto;

            border-collapse: collapse;

            line-height: 28px;

        }


        .total-table td {

            padding: 5px;

            border-top: 1px solid #000; /* Nur oberen Rand */

        }


        .total-table td:last-child {

            text-align: right;

        }

.total-table tr:last-child td:last-child { 

        font-weight: bold;

    }

        .total-table tr:last-child td {

            border-top: 2px solid #000; /* Dickere Linie für den Gesamtbetrag */

        }

        .total-table tr:not(:last-child) td { /* Alle außer der letzten Zeile */

            border-bottom: none; /* Keine untere Linie */

        }



        .add-information {

            text-align: center;

            margin-top: 40px;

            line-height: 1.5;

        }

    </style>

</head>

<body>


    <div class="header">

        <div>

            <div class="invoice-biller">ELOVADE Deutschland GmbH — Garbenheimer Str. 36 — D-35578 Wetzlar</div>

            <div>$AREA</div>

            <div>$INVOICEADDRESS1</div>

            <div>$INVOICEADDRESS2</div>

            <div>$INVOICEADDRESS3</div>

            <div>$INVOICEADDRESS4</div>

            <div>$INVOICEPOSTCODE</div>

        </div>

        <div class="invoice-info">

            <table>

                <tr><td>Partner-ID</td><td>$CLIENT_ID</td></tr>

                <tr><td>USt-ID</td><td>$CLIENT_TAX_NUMBER</td></tr>

                <tr><td>Datum:</td><td>$INVOICEDATE</td></tr>

                <tr><td>Zahlungsziel:</td><td>$DUEDATE</td></tr>

                <tr><td>Lieferdatum:</td><td>$DUEDATE</td></tr>

                <tr><td>Leistungsdatum:</td><td>$ACTIONDATE</td></tr>

            </table>

        </div>

    </div>


    <p>Ihre Referenz: $REFERENCE | $AREA</p>


    <div class="table-info">

        <h3>Rechnung Nr. $INVOICENUMBER</h3>

    </div>


    <table class="detail-table">

        $DETAILSTABLE

    </table>


    <table class="total-table">

        <tr><td>Gesamtnetto:</td><td>$INVOICESUBTOTAL</td></tr>

        <tr><td>19,00 % MwSt:</td><td>$INVOICETAXTOTAL</td></tr>

        <tr><td>Rechnungsbetrag:</td><td>$INVOICETOTAL</td></tr>

    </table>


    <div class="add-information">

        <p>Bitte überweisen Sie den Rechnungsbetrag unter Angabe der Rechnungsnummer $INVOICENUMBER in Höhe von $INVOICETOTAL bis zum $ACTIONDATE auf folgendes Konto:</p>

        <p><br>

            <span id="inhaber">ELOVADE Deutschland GmbH</span><br>

            <span id="iban">DE12 345 678 910 111 21</span> <br>Beispielbank Deutschland

        </p><br>

        <p>Wir bedanken uns für Ihr Vertrauen!</p>

    </div>


    <div class="invoice-note">$INVOICENOTE</div>


</body>

</html>


Erklärung des Beispielcodes


HTML-Struktur

Der HTML-Code verwendet folgende <div> Elemente zur besseren Strukturierung:

  • .header: Container für Absender- und Rechnungsinformationen (mittels Flexbox-Layout nebeneinander angeordnet). 
    • .invoice-biller: Absenderinformationen (Firma, Adresse).
    • .invoice-info: Tabelle mit Rechnungsinformationen (Partner-ID, USt-ID, Datum, etc.).
  • <p>: Enthält die Referenzinformationen.
  • .table-info: Container für die Rechnungsnummer.
  • .detail-table: Tabelle mit den detaillierten Rechnungspositionen.
  • .total-table: Tabelle mit den Gesamtbeträgen (Sub-total, Sales tax, TOTAL).
  • .add-information: Container für Zahlungshinweise und Danksagung.
  • .invoice-note: Container für zusätzliche Anmerkungen.

CSS-Stile (detailliert)

Die Formatierung erfolgt durch eingebettetes CSS im <style>-Tag.

  • body:
    • font-family: sans-serif;: Verwendung einer einheitlichen Schriftart.
    • font-size: 12px;: Einheitliche Schriftgröße.
  • .header:
    • display: flex;: Aktiviert das Flexbox-Layout für die Anordnung der Elemente.
    • justify-content: space-between;: Verteilt die Elemente horizontal mit gleichmäßigem Abstand.
    • align-items: flex-start;: Richtet die Elemente vertikal am oberen Rand aus.
    • margin-bottom: 40px;: Fügt einen unteren Abstand zum nächsten div-Element hinzu.
  • .header > div:
    • width: 48%;: Legt die Breite der Container innerhalb des Headers fest (etwas weniger als 50%, um etwas Abstand zu gewährleisten).
  • .invoice-biller:
    • font-size: 8px !important;: Kleinere Darstellung des Absenders. 
    • color: $ORCOLOUR;: Setzt die Textfarbe auf den voreingestellten Standard.
    • font-weight: bold;: Macht den Text fett.
    • margin-bottom: 8px;: Fügt einen unteren Abstand hinzu.
  • .invoice-info:
    • text-align: right;: Richtet den Text rechts aus.
  • .invoice-info table:
    • margin-left: auto;: Richtet die Tabelle rechts aus.
    • width: auto;: Passt die Tabellenbreite automatisch an den Inhalt an.
    • border-collapse: collapse;: Lässt die Tabellenrahmen zusammenfallen.
  • .invoice-info td:
    • padding: 5px;: Fügt Innenabstand zu den Tabellenzellen hinzu.
  • .invoice-info td:first-child:
    • font-weight: bold;: Macht die erste Zelle jeder Zeile fett.
    • padding-right: 10px;: Fügt rechts etwas Abstand hinzu.
  • .table-info:
    • margin-bottom: 20px;: Fügt einen unteren Abstand hinzu.
  • .detail-table:
    • width: 100%;: Breite der Tabelle 100%.
    • border-collapse: collapse;: Lässt die Tabellenrahmen zusammenfallen.
    • border: 1px solid $ORCOLOUR;: Fügt einen Rahmen in der voreingestellten Farbe hinzu.
    • margin-bottom: 20px;: Fügt einen unteren Abstand hinzu.
  • .detail-table th, .detail-table td:
    • border: 1px solid #ccc;: Fügt einen Rahmen zu den Tabellenzellen hinzu.
    • padding: 8px;: Fügt Innenabstand hinzu.
    • text-align: left;: Richtet den Text links aus.
  • .detail-table th:
    • background-color: $ORCOLOUR;: Setzt die Hintergrundfarbe des Tabellenkopfes.
    • color: $ORTEXTCOLOUR;: Setzt die Textfarbe des Tabellenkopfes.
    • font-weight: bold;: Macht den Text fett.
  • .total-table:
    • width: auto;: Passt die Tabellenbreite automatisch an den Inhalt an.
    • margin-left: auto;: Richtet die Tabelle rechts aus.
    • border-collapse: collapse;: Lässt die Tabellenrahmen zusammenfallen.
    • line-height: 28px;: Setzt die Zeilenhöhe.
  • .total-table td:
    • padding: 5px;: Fügt Innenabstand hinzu.
    • border-top: 1px solid #000;: Fügt eine obere Rahmenlinie hinzu.
  • .total-table td:last-child:
    • text-align: right;: Richtet den Text rechts aus.
    • font-weight: bold;: Macht den Text fett.
  • .total-table tr:last-child td:
    • border-top: 2px solid #000;: Dickere obere Linie für die letzte Zeile (Total).
  • .total-table tr:not(:last-child) td:
    • border-bottom: none;: Entfernt die untere Linie für alle Zeilen außer der letzten.
  • .add-information:
    • text-align: center;: Richtet den Text zentriert aus.
    • margin-top: 40px;: Fügt einen oberen Abstand hinzu.
    • line-height: 1.5;: Setzt den Zeilenabstand.

Platzhalter

Folgende Platzhalter werden verwendet:

  • $AREA: Bereich/Abteilung
  • $INVOICEADDRESS1 bis $INVOICEADDRESS4: Adresszeilen
  • $INVOICEPOSTCODE: Postleitzahl
  • $CLIENT_ID: Kunden-ID
  • $CLIENT_TAX_NUMBER: Umsatzsteuer-ID
  • $INVOICEDATE: Rechnungsdatum
  • $DUEDATE: Fälligkeitsdatum
  • $ACTIONDATE: Leistungsdatum/Aktionsdatum
  • $REFERENCE: Referenz
  • $INVOICENUMBER: Rechnungsnummer
  • $DETAILSTABLE: HTML-Code für die Tabelle der Rechnungspositionen (z.B. mit <tr> und <td>-Elementen).
    • Weitere Details folgen
  • $INVOICESUBTOTAL: Nettobetrag
  • $INVOICETAXTOTAL: Steuerbetrag
  • $INVOICETOTAL: Gesamtbetrag
  • $INVOICENOTE: Zusätzliche Anmerkungen
  • $ORCOLOUR: Hauptfarbe (z.B. für Rahmen und Hintergründe)
  • $ORTEXTCOLOUR: Textfarbe für farbige Elemente


Bei weiteren Anliegen oder Fragen zu diesem Thema können Sie sich gerne an unseren Support wenden.

    • Related Articles

    • Wie erstelle ich einen Lieferschein in HaloPSA?

      Die All-In-One-Lösung HaloPSA macht es Ihnen einfach Angebote für und Aufträge von Ihren Kunden zu erstellen und diese abzurechnen. Wie Sie dazu einen Lieferschein erstellen, zeigen wir Ihnen in diesem Artikel durch. Zunächst erstellen wir unter ...

    • Wie erstelle ich eine EN16931-konforme eRechnung in HaloPSA?

      Die All-In-One-Lösung HaloPSA bietet Ihnen die Möglichkeit, Ihre erbrachten Leistungen und verkauften Produkte einfach abzurechnen. Ab der Version 2.170.1 können zudem E-Rechnungen nach Standard EN16931 versendet werden. Hierzu finden Sie in Ihrem ...

    • Ressourcenbuchung in HaloPSA

      Über die All-in-One-Lösung HaloPSA haben Sie nicht nur die Möglichkeit, die Clients (Assests) Ihrer Kunden zu verwalten, sondern auch Ressourcenbuchungen über interne Abläufe, wie den eigenen Fuhrpark oder Besprechungsräume, zu verwalten. Um mit der ...

    • Übersicht der von Partnern entwickelten Integrationen für HaloPSA

      Folgend finden Sie eine Liste der Integrationen für die All-In-One-Lösung HaloPSA, die Partner aus dem deutschsprachigen Raum entwickelt haben: Bexio Buchhaltungs-, Rechnungs- und Kundendaten DATEV Export der Ausgangsrechnungen im DATEV-Format für ...

    • Konfigurieren von dynamischen Rechnungsvorlagen in HaloPSA

      Mit der All-in-One-Lösung HaloPSA können Sie unter anderem Bestell- und Rechnungsprozesse deutlich vereinfachen. Dafür bietet Ihnen HaloPSA die Möglichkeit, Rechnungsvorlagen dynamisch und anhand bereits hinterlegter Informationen anzulegen. In dem ...