Outlook (New): Vorlagenerstellung
Auf dieser Seite wird erläutert wie in primedocs desktop Vorlagen für die webfähige Outlook-Version Outlook (New) erstellt werden.
tipp
Sie kennen das primedocs Add-In in Outlook (New) noch nicht? Lesen Sie diese Seite: Word Templating Basics
- 1 Werkzeuge
- 1.1 Outlook (New)
- 1.2 Templating
- 1.3 Vorlageneditor (HTML)
- 2 Vorlagenerstellung
- 3 E-Mail-Vorlage erstellen
- 3.1 Vorbereitung
- 4 Signaturvorlage erstellen
- 4.1 Beispiel
- 4.2 HTML-Code und Ergebnis
- 4.3 Erklärung HTML-Elemente
warnung
Stellen Sie zu Beginn sicher, dass
- in primedocs desktop die Administrationsansicht eingeschaltet ist.
- die Outlook (New)-Vorlage, die Sie bearbeiten möchten, nur für Sie sichtbar ist.
Werkzeuge
Während der Vorlagenbearbeitung bzw. -erstellung für Outlook (New) befinden wir uns in zwei Bereichen:
- in Outlook (New) über die Applikation oder den Browser: in einer offenen leeren E-Mail sowie in der Seitenleiste des primedocs Add-In im Templating-Menü.
- im Vorlageneditor einer primedocs Vorlage für Outlook (New). Die Vorlageneditoren sind dabei darauf ausgerichtet, dass die Vorlage in HTML bearbeitet wird.
tipp
Da alle E-Mail-Nachrichten in Outlook (New) auf HTML basieren, werden auch die Vorlagen in primedocs in einem Vorlageneditor in HTML gebaut.
Outlook (New)
Bei der Vorlagenerstellung öffnen Sie als Erstes eine neue E-Mail Nachricht in Outlook (New). Hier werden Sie die Vorlage mit Outlook bauen.
Templating
Für die Vorlagenerstellung wird das Templating-Menü benötigt. Dazu wird das primedocs Add-In geöffnet: primedocs Add-In - Outlook (New).
Wenn Sie auf Ihr Profilbild klicken, sehen Sie die Option Templating. Klicken Sie darauf.
hinweis
Falls Sie Templating nicht sehen, sind Sie nicht für die Bearbeitung von Outlook (New) Vorlagen berechtigt. Wenden Sie sich an den Administrator Ihrer Organisation.
Danach wird das Templating-Menü geöffnet.
hinweis
WICHTIG
Das Templating-Menü ist ein integraler Bestandteil zum Erstellen von Outlook (New)-Vorlagen.
Es vereinfacht die Umsetzung von Vorlagen mit HTML, indem es Konvertierungsoptionen vom sichtbaren Inhalt in der E-Mail Nachricht zu HTML und umgekehrt anbietet.
Klicken Sie auf “Nachricht als HTML in den Textbereich einfügen”, wenn Sie den Inhalt in der E-Mail-Nachricht in HTML umwandeln möchten.
Klicken Sie auf “HTML aus dem Textbereich in Nachricht einfügen”, wenn sich im Textfeld HTML befindet und Sie dieses zur Bearbeitung oder zu Testzwecken in die E-Mail-Nachricht einfügen möchten.
Wir schauen uns das unten im Detail an.
Vorlageneditor (HTML)
Das zweite Werkzeug ist der HTML-Vorlageneditor. Er wird geöffnet, indem man im Vorlageneditor einer Vorlage für Outlook (New) auf Editor klickt.
In allen HTML-Vorlageneditoren wählen Sie in der Auswahlliste Sprache zuerst die Dokumentsprache aus.
Vorlagenerstellung
Für die Vorlagenerstellung arbeiten Sie nun mit beiden Werkzeugen parallel; dem primedocs Add-In und dem HTML-Vorlageneditor.
Vorgehen
Grundsätzlich gehen Sie folgendermassen vor:
- Vorlage erstellen für Outlook (New) und den Vorlagenstatus In Bearbeitung konfigurieren
- Im geöffneten Vorlageneditor auf Editor klicken, um die Vorlage zu bearbeiten. Es öffnet sich ein neues Fenster Vorlageneditor, der HTML-Vorlageneditor.
- In Outlook (New) in der E-Mail-Nachricht den gewünschten Inhalt, die E-Mail oder die Signatur, vorbereiten
- Das HTML zum Text in der E-Mail-Nachricht über das primedocs Add-In generieren
- Das HTML im HTML-Vorlageneditor der Vorlage in das Feld HTML Inhalt einfügen
- Forms und Fields erstellen, die die Vorlage benötigt werden und diese im Feld HTML Inhalt ergänzen: Forms-Felder und Fields können über die Syntax
{{Name}}im HTML aufgerufen werden. - Im HTML-Vorlageneditor über “Text aus HTML extrahieren“ das HTML in Nur-Text konvertieren
- Vorlageneditor speichern und schliessen
- Synchronisieren
- Vorlage testen über das primedocs Add-In in Outlook (New) und ggf. die Schritte 2-9 wiederholen
- Vorlage freigeben und für die Benutzer berechtigen
Templating-Menü (Schritte 3 und 4)
Beispiel der Anwendung des Templating-Menüs
Der Text für eine E-Mail-Vorlage wurde erstellt.
Anschliessend wurde über die Schaltfläche “Nachricht als HTML in den Textbereich einfügen“ das HTML des Inhalts generiert.
E-Mail-Vorlage erstellen
Die E-Mail-Vorlage ist sehr einfach zu erstellen. Daher beginnen wir gerade mit dieser Outlook-Vorlage.
Vorbereitung
- Öffnen Sie die oben erwähnten Werkzeuge, um loszulegen.
- Für den Vorlageneditor: Klicken Sie in primedocs desktop auf Neue Vorlage und wählen Sie E-Mail.
- Klicken Sie im geöffneten Vorlageneditor auf Editor, um die Vorlage zu bearbeiten. Es öffnet sich ein neues Fenster Vorlageneditor, der HTML-Vorlageneditor.
- Im HTML-Vorlageneditor wählen Sie in der Auswahlliste Sprache zuerst die Dokumentsprache aus.
warnung
Falls die Vorlage in mehreren Dokumentsprachen zur Verfügung steht, vergessen Sie nicht, im Vorlageneditor alle gewünschten Dokumentsprachen zu aktivieren.
- Im Feld Betreff kann der Betreff für die E-Mail-Vorlage gesetzt werden.
- In die Felder An, Cc und Bcc können E-Mail-Adressen mit Semikolon (
;) getrennt angegeben werden. - Wechseln Sie ins Outlook (New) und erstellen Sie den gewünschten Text. Über das Templating-Menü erzeugen Sie das HTML des Textes: Word Templating Basics
- Kopieren Sie das erzeugte HTML vom Templating-Menü.
- Wechseln Sie in den HTML-Vorlageneditor und fügen Sie das HTML in das Textfeld HTML Inhalt ein.
- Klicken Sie auf die Schaltfläche
</>, um das HTML schöner zu strukturieren. In unserem Beispiel sieht das HTML folgendermassen aus:
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">Lieber [Name]</div>
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">
<br />
</div>
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">Herzlich Willkommen im Team!</div>
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">
<br />
</div>
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">Wir wünschen Dir viel Spass.</div>
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">
<br />
</div>
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">Alles Gute!</div>
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">
<br />
</div>
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">
<br />
</div>
- Es lohnt sich, das HTML anschliessend noch zu verschönern. Falls Ihnen dazu die nötigen HTML-Kenntnisse fehlen, melden Sie sich gerne beim primedocs Support.
- So sieht das überarbeitete HTML aus:
Text
Lieber [Name]
Herzlich Willkommen im Team!
Wir wünschen Dir viel Spass.
Alles Gute!
HTML-Code
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">
Lieber [Name]<br>
<br>
Herzlich Willkommen im Team!<br>
<br>
Wir wünschen Dir viel Spass.<br>
<br>
Alles Gute!
</div>
- Für diese E-Mail-Vorlage soll nun
- der Satz “Herzlich Willkommen im Team!“ über eine Forms-Auswahl gesteuert und damit dynamisiert werden
- der in Forms ausgewählte Betreff im Betrefffeld der E-Mail erscheinen.
Forms (Vorschau)
Forms-Code
In der Konfiguration befindet sich ein Choice-Feld, das in Forms als Dropdown angezeigt wird.
<FormsConfiguration>
<Elements>
<Choice Id="Subject" translate-Label="Texts.Subject" Required="true" translate-ValidationMessage="Forms.Info.CompleteField">
<Option Value="Herzlich Willkommen im Team!" Label="Herzlich Willkommen im Team!" />
<Option Value="Herzlichen Glückwunsch zum Geburtstag!" Label="Herzlichen Glückwunsch zum Geburtstag!" />
<Option Value="Viel Erfolg!" Label="Viel Erfolg!" />
</Choice>
</Elements>
</FormsConfiguration>
Text-Field mit Satz
<FieldsConfiguration>
<Fields>
<Text Name="Content">
<Code>
function main(){
// Variable, die den ersten Teil des Satzes enthält.
let sentence = "Wir wünschen dir ";
// Für jede Auswahl im Choice-Feld, wird etwas anderes ausgegeben.
switch($("Forms.Subject")){
case 'Herzlich Willkommen im Team!':
// Der erste Teil wird vor den zweiten Teil angehängt.
sentence += "viel Spass bei der Einarbeitung.";
break; // switch() verlassen, wenn ein Fall eingetreten ist.
case 'Herzlichen Glückwunsch zum Geburtstag!':
sentence += "alles Gute zum Geburtstag.";
break;
case 'Viel Erfolg!':
sentence += "viel Erfolg bei deiner Prüfung.";
break;
default:
// Dieser Fall wird nicht eintreten, weil die Choice in Forms
// als "required" markiert ist.
sentence += "[Auswählen]";
}
// Die Variable, die den vollständigen Satz enthält, wird zurückgegeben.
return sentence;
}
</Code>
</Text>
</Fields>
</FieldsConfiguration>
- Forms-Felder und Fields können über die Syntax
{{Name}}im HTML aufgerufen werden. Daher passen wir danach das HTML folgendermassen an:
Text
Lieber [Name]
Content-Field-Inhalt
Wir wünschen Dir viel Spass.
Alles Gute!
HTML
<div class="elementToProof" style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);">
Lieber [Name]<br>
<br>
{{Content}}<br>
<br>
Wir wünschen Dir viel Spass.<br>
<br>
Alles Gute!
</div>
- Den Betreff setzen wir entsprechend mit
{{Forms.Subject}}. - Über die Schaltfläche Text aus HTML extrahieren wird der Nur-Text erstellt.
- Die Vorlage wird gespeichert.
- Nun gilt es, die E-Mail-Vorlage zu testen und zu prüfen, ob sie so aussieht, wie gewollt.
- Schlussendlich muss die Vorlage nur noch den korrekten Benutzern freigegeben werden: Word Dive Into Fields.
Signaturvorlage erstellen
- Öffnen Sie die oben erwähnten Werkzeuge, um loszulegen.
- Für den Vorlageneditor: Klicken Sie in primedocs desktop auf Neue Vorlage und wählen Sie Signatur.
- Klicken Sie im geöffneten Vorlageneditor auf Editor, um die Vorlage zu bearbeiten. Es öffnet sich ein neues Fenster Vorlageneditor, der HTML-Vorlageneditor.
- Im HTML-Vorlageneditor wählen Sie in der Auswahlliste Sprache zuerst die Dokumentsprache aus.
warnung
Falls die Vorlage in mehreren Dokumentsprachen zur Verfügung steht, vergessen Sie nicht, im Vorlageneditor alle gewünschten Dokumentsprachen zu aktivieren.
- Nun gehen Sie genau gleich vor wie bei der Erstellung einer E-Mail Nachricht (ab Schritt 5).
Der grösste Unterschied liegt im Inhalt es Textes, der bei einer Signatur meistens etwas umfassender ausfällt als bei einer E-Mail-Vorlage.
Beispiel
HTML-Code und Ergebnis
Folgend finden Sie ein Beispiel einer Signatur mit HTML-Code und wie sie in der E-Mail-Nachricht aussieht:
HTML-Code
<div style="font-family: "Segoe UI", "Segoe UI Web (West European)", "Helvetica Neue", sans-serif; font-size: 10pt; color: rgb(0, 0, 0);" class="elementToProof">
<br/>
Freundliche Grüsse<br/>
{{Profile.User.FirstName}} {{Profile.User.LastName}}<br/>
<br/>
<span style="font-size: 9pt; text-decoration:none">
_________________________<br/>
<b>{{Profile.User.FirstName}} {{Profile.User.LastName}}</b><br/>
{{Profile.User.Function}}<br/>
{{Profile.User.Phone}} (Direkt)<br/>
<a href="mailto:{{Profile.User.Email}}" style="color: black; text-decoration:none">{{Profile.User.Email}}</a><br/>
<br/>
<a href="https://{{Profile.Org.Web}}" style="color: black; text-decoration:none">
<img src="data:image/png;base64,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" alt="AnyCompanyLogo" width="167" height="50" style="width: 167px; height: 50px; min-width: auto; min-height: auto; margin: 0px; vertical-align: top;"/>
</a><br/>
<br/>
{{Profile.Org.Title}} <br/>
{{Profile.Org.Postal.Street}} <br/>
{{Profile.Org.Postal.Zip}} {{Profile.Org.Postal.City}}<br/>
{{Profile.Org.Phone}} (Hauptnummer)<br/>
<a href="https://{{Profile.Org.Web}}" style="color: black; text-decoration:none">{{Profile.Org.Web}}</a><br/>
<br/>
</span>
</div>
Ergebnis
Erklärung HTML-Elemente
Nun werden noch einzelne Elemente erklärt:
| Element | Zweck |
|---|---|
<div></div> | Ein Strukturelement, in das Text oder anderer Inhalt kommt. |
<br/> | HTML erkennt keine ungeschützten Leerschläge. Daher benötigt es für eine leere Zeile einen geschützten Leerschlag und danach den Zeilenumbruch <br/>. |
<span style=""> | Ändert sich die Formatierung eines Absatzes (wie hier von 10 pt auf 9 pt), macht es Sinn, dies mit dem span-Tag zu konfigurieren.Mit dem style-Attribut wird die Formatierung festgelegt. |
<a href="" style="" /> | Das a-Tag eröffnet einen Link. In diesem Fall ist es ein E-Mail-Link.Das href-Attribut ist der effektiv hinterlegte Link. Zwischen Start- und Endtag wird der Anzeigetext definiert.Da Links gerne anders formatiert werden, wird die abweichende Formatierung mit dem style-Attribut definiert. |
<img src="" /> | Das img-Tag lässt einem ein Bild von einem Base64-String anzeigen.Wie auf den Zeilen 13-15 ersichtlich, kann ein Link auch ein Bild ( img) enthalten. So wird es ein Bild mit Link. |