Dieser Artikel erklärt, wie Dokumentvorlagen angepasst werden können. Alle Dokumentvorlagen basieren auf HTML und können nach Bedarf modifiziert werden. So kann das Layout und der Inhalt der Finanzdokumente an die spezifischen geschäftlichen Anforderungen angepasst werden.
Schritt-für-Schritt-Anleitung zur Anpassung einer Dokumentvorlage #
- Öffnet den Tab „Unternehmens-Stammdaten“:
- Geht in der Salesforce-Umgebung zum Tab Unternehmens-Stammdaten.
- Öffnet den Datensatz des Unternehmens-Stammdaten:
- Standardmäßig wird ein Unternehmens-Stammdaten-Datensatz mit vordefinierten Daten aus der Salesforce-Org erstellt.
- Klickt auf diesen Datensatz, um es zu öffnen.
- Überprüft die Standardvorlagen:
- In diesem Datensatz werden die Standardvorlagen für verschiedene Dokumente angezeigt (z. B. Rechnungen, Angebote).
- Öffnet eine Vorlage zur Bearbeitung:
- Klickt auf eine Vorlage, die angepasst werden soll. Folgende Felder werden angezeigt:
- Name – Der Name der Vorlage.
- Objektname – Der API-Name des mit der Vorlage verknüpften Objekts.
- Dokumentausrichtung – Querformat oder Hochformat.
- Klickt auf eine Vorlage, die angepasst werden soll. Folgende Felder werden angezeigt:
- Bearbeitet den Vorlageninhalt:
- Klickt auf Vorlage bearbeiten, um den Vorlageneditor zu öffnen.
- Der erste Schritt im Assistenten ist der Editor-Bildschirm, auf dem die Änderungen vorgenommen werden können.
- Vorschau der Änderungen:
- Klickt auf Vorschau, um die Änderungen vor dem Speichern zu überprüfen.
- Wählt einen Datensatz als Vorschau-Beispiel, eine Nummernsequenz und die Sprache aus.
Die Vorschau verwendet diese Daten nur als Datenquelle und ändert sie nicht.
- PDF anzeigen:
- Klickt auf Weiter, um das PDF anzuzeigen und die Änderungen zu prüfen.
- Vorlage speichern:
- Wenn die Anpassung erfolgreich ist, geht zurück und klickt Speichern auf dem ersten Bildschirm des Assistenten, um die Vorlage zu sichern.
Verwendung mehrerer Vorlagen für dasselbe Objekt #
- Es können mehrere Vorlagen für dasselbe Objekt erstellt werden. Es gibt eine Standardvorlage, die im Unternehmens-Stammdaten-Datensatz angegeben ist. Diese Vorlage wird standardmäßig für das Dokument verwendet, sofern im Vorlagen-Lookup kein anderer Wert angegeben ist.
Vorlagen-Syntax #
Freitext hinzufügen:
- Um Freitext in die Vorlage einzufügen, gebt den Text einfach direkt ein.
- Wenn Übersetzungen erforderlich sind, müssen Custom Labels verwendet werden. Die Syntax lautet:
{{data.labels.namespace__labelname}}- Beispiele:
{{data.labels.finblick__DocumentTemplatePerformancePeriod}}
{{data.labels.EndDate}}Feld aus dem Dokumentobjekt hinzufügen:
- Um ein Feld aus dem Objekt hinzuzufügen, verwendet folgende Syntax:
{{data.objectname.fieldname}}- Beispiel:
{{data.finblick__Invoice__c.finblick__BillingAddress__Street__s}}Feld aus dem übergeordneten Objekt hinzufügen:
- Um ein Feld aus dem übergeordneten Objekt hinzuzufügen, verwendet folgende Syntax:
{{data.objectname.parentlookup.fieldname}}- Beispiel:
{{data.finblick__Invoice__c.finblick__Account__r.finblick__VAT__c}}Schleifen (Child-Objekte):
- Um mehrere untergeordnete Datensätze zu iterieren, verwendet folgende Syntax:
{{#each data.objectname.childlookupfield.records as |key|}}
{{/each}}Hinweis: Der key muss mit dem Namen des untergeordneten Objekts übereinstimmen.
- Beispiel:
{{#each data.finblick__Invoice__c.finblick__InvoiceProducts__r.records as |finblick__InvoiceLine__c|}}
<div>{{finblick__InvoiceLine__c.finblick__Quantity__c}}</div>
{{/each}}Die Anpassung von Dokumentvorlagen in HTML ermöglicht volle Kontrolle über das Grundgerüst von Finanzdokumente. Die Vorlage ist in mehrere Hauptbereiche unterteilt:
- Kopfzeile: Enthält Unternehmensinformationen, Logos oder Branding-Elemente, die auf jeder Seite erscheinen.
- Fußzeile: Wird für zusätzlichen Text, rechtliche Hinweise oder wiederkehrende Zusammenfassungen verwendet.
- Hauptbereich: Enthält die dynamischen Inhalte des Dokuments, wie Positionen, Summen und benutzerdefinierte Felder.
- Wasserzeichen (optional): Kann für interne Hinweise, „Entwurf“-Markierungen oder andere visuelle Hinweise hinzugefügt werden.
In diesen Bereichen können Platzhalter und Schleifen verwendet werden, um Daten dynamisch zu füllen, während bedingte Logik Inhalte basierend auf Sprache, Dokumenttyp oder anderen Kriterien anpassen kann. Diese Struktur stellt sicher, dass Vorlagen konsistent und professionell bleiben und gleichzeitig eine vollständig flexible Dokumentenerstellung unterstützen.
Vorlagen-Skelett #
<!DOCTYPE html>
<html>
<head>
<style>
.content {
break-inside: avoid;
position: relative;
}
/* Remaining content styles here */
</style>
</head>
<body>
<div class="generator_watermark">Watermark</div>
<div class="generator_header" style="height: 20mm">
<style>
/* Header styles */
</style>
<!-- Header content -->
</div>
<div class="generator_first_header" style="height: 20mm">
<style>
/* Header styles */
</style>
<!-- Header content -->
</div>
<div class="content">
<!-- Page content -->
</div>
<div class="generator_footer" style="height: 20mm">
<style>
/* Footer styles */
</style>
<!-- Footer content -->
</div>
<div class="generator_first_footer" style="height: 20mm">
<style>
/* Footer styles */
</style>
<!-- Footer content -->
</div>
</body>
</html>Der Hauptteil der Vorlage besteht aus 4 Elementen:
- Hauptbereich
<!-- Style can be placed in the <head> of the document -->
<style>
.content {
break-inside: avoid;
position: relative;
}
/* Remaining content styles here */
</style>
<div class="content">
<!-- Page content -->
</div>- Wasserzeichen
<div class="generator_watermark">Watermark</div>Das Wasserzeichen ist eine Textzeile, die während der Vorschau der Datei angezeigt wird.
Das Wasserzeichen sieht folgendermaßen aus:
- Kopfzeile
<div class="generator_header" style="height: 20mm">
<style>
/* Header styles */
</style>
<!-- Header content -->
</div>Der Container der Kopfzeile muss den Stil „height: #mm“ enthalten. Die Höhe muss in mm angegeben werden. Es wird nicht empfohlen, andere Stile im Container der Kopfzeile zu verwenden. Alle außerhalb des Kopfzeilen-Containers angewendeten Stile wirken sich nicht auf die Kopfzeile aus. Sie sollten innerhalb der Kopfzeile definiert werden, entweder direkt auf den Elementen oder innerhalb des <style>-Tags in der Kopfzeile.
Wenn der Inhalt der Kopfzeile in den Hauptbereich hineinragt, liegt dies höchstwahrscheinlich daran, dass die Höhe des Kopfzeileninhalts die Höhe des Kopfzeilen-Containers überschreitet.
Beispiel: Ein Logo mit 20mm Höhe und ein Slogan darunter wurden hinzugefügt, die Kopfzeilenhöhe beträgt 24mm. Wenn der Slogan mehr als 4mm Höhe beansprucht, wird er in den Hauptbereich hineinragen.
Wenn eine separate Kopfzeile auf der ersten Seite erforderlich ist, kann folgender Container verwendet werden:
<div class="generator_first_header" style="height: 20mm">
<-- same restrictions as for normal header apply -->
</div>Beispiel Kopfzeile:
<!DOCTYPE html>
<html>
<head>
<style>
.content {
break-inside: avoid;
position: relative;
}
</style>
</head>
<body>
<div class="generator_header" style="height: 30mm">
<style>
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 19mm;
padding: 0 20mm;
border-bottom: 1px solid black;
}
.logo {
max-height: 100%;
}
.slogan {
text-align: right;
font-weight: 600;
font-size: 4mm;
color: {{%%finblick__Invoice__c.finblick__LegalEntity__r.finblick__BrandColor__c%%}};
}
</style>
<div class="header-container">
<img class="logo" src="{{%%finblick__Invoice__c.finblick__LegalEntity__r.finblick__LogoUrl__c%%}}" />
<div class="slogan">{{%%finblick__Invoice__c.finblick__LegalEntity__r.finblick__BrandSlogan__c%%}}</div>
</div>
</div>
<div class="content">
<div>Page Body</div>
</div>
</body>
</html>
- Fußzeile
<div class="generator_footer" style="height: 20mm">
<style>
/* Footer styles */
</style>
<!-- Footer content -->
</div>Die Fußzeile unterliegt denselben Einschränkungen wie die Kopfzeile:
- Der Container der Fußzeile muss den Stil
"height: #mm"enthalten. - Alle außerhalb des Fußzeilen-Containers angewendeten Stile wirken sich nicht auf die Fußzeile aus.
- Wenn der Inhalt der Fußzeile in den Hauptbereich hineinragt, überschreitet die Höhe des Fußzeileninhalts die Höhe des Containers.
Wenn eine separate Fußzeile auf der ersten Seite erforderlich ist, kann folgender Container verwendet werden:
<div class="generator_first_footer" style="height: 20mm">
<-- same restrictions as for normal footer apply -->
</div>Beispiel Fußzeile:
<!DOCTYPE html>
<html>
<head>
<style>
.content {
break-inside: avoid;
position: relative;
}
.info {
font-weight: 600; /* please note that this style doesn't apply to info class in footer */
}
</style>
</head>
<body>
<div class="content">
<div>Page Body</div>
</div>
<div class="generator_footer" style="height: 30mm">
<style>
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 19mm;
margin-top: 0;
padding: 0 20mm;
border-top: 1px solid black;
}
.logo {
max-height: 100%;
}
.info {
text-align: right;
font-size: 4mm;
color: {{%%finblick__Invoice__c.finblick__LegalEntity__r.finblick__BrandColor__c%%}};
}
</style>
<div class="footer-container">
<img class="logo" src="{{%%finblick__Invoice__c.finblick__LegalEntity__r.finblick__LogoUrl__c%%}}" />
<div class="info">
<p>Cloudwharf GmbH</p>
<p>München, Germany</p>
</div>
</div>
</div>
</body>
</html>
Zusätzliche Hinweise #
- Die in der vorherigen Abschnitt definierten Elemente können in beliebiger Reihenfolge platziert werden. Solange sie ihre jeweiligen Klassen haben, werden sie an den richtigen Stellen angezeigt.
- Bei der Verwendung der @page-Regel ist Vorsicht geboten, da dadurch unerwünschte Nebeneffekte verursacht werden. Insbesondere wird durch die Verwendung von Rändern in @page der Hauptbereich gezwungen, eine gesamte Seite auszufüllen, und sowohl Kopf- als auch Fußzeile werden hineingeklippt.
