top of page

Hübsch formatierte E-Mails aus PowerApps versenden – ganz ohne HTML-Kenntnisse

Autorenbild: kimkim

💡 Herausforderung: Wenn du in PowerApps mit dem Outlook Connector eine E-Mail über die SendMail-Aktion versendest, sieht die Nachricht beim Empfänger oft trist und unformatiert aus.


👉 Lösung: In diesem Blog zeige ich dir eine einfache Methode, um E-Mails professionell zu formatieren – ohne eine einzige Zeile HTML-Code schreiben zu müssen.


📢 Zusätzlich erkläre ich, wie du Bilder direkt in deine E-Mail einbetten kannst!



📌 Schritt-für-Schritt-Anleitung zur perfekten HTML-E-Mail

1️⃣ E-Mail in Outlook gestalten

📌 Öffne Outlook und erstelle eine neue E-Mail mit deinem gewünschten Layout:

✅ Tabellen & Spalten einfügen

✅ Farben, Fettschrift & Links setzen

✅ Platzhalter für dynamische Inhalte nutzen (z. B. [Name] für die Anrede)


2️⃣ HTML-Code der E-Mail extrahieren

  1. Schicke die E-Mail an dich selbst.

  2. Öffne die gesendete E-Mail in Outlook.

  3. Klicke mit Rechtsklick auf die E-Mail und wähle "Quelle anzeigen".

  4. Es öffnet sich dein Notepad / Editor

  5. Kopiere den gesamten HTML-Code mit Strg + A & Strg + C

HTML Code anzeigen
HTML Code anzeigen
HTML kopieren
HTML kopieren

3️⃣ HTML-Code in PowerApps einfügen

  1. Füge in PowerApps ein HTML-Text-Steuerelement hinzu.

  2. Kopiere den HTML-Code in das Steuerelement.

  3. Ersetze doppelte Apostrophe (") durch einfache Apostrophe (').

  4. Am Anfang und Ende müssen wieder doppelte Apostrophe gesetzt werden, damit PowerApps den Code als Text erkennt.


4️⃣ Dynamische Inhalte in den HTML-Code einfügen

Falls du Platzhalter ([Name]) in deiner Vorlage definiert hast, kannst du sie nun durch dynamische Inhalte aus PowerApps ersetzen.

📌 Syntax für das Ersetzen von Platzhaltern mit PowerApps-Werten:

"Hallo " &txtName.Value& ", anbei findest du deine Buchungsbestätigung."

💡 Erklärung:

  • "Hallo " – Fester Textbeginn mit Apostrophen

  • & txtName.Value & – Dynamischer Wert aus dem Steuerelement

  • ", anbei findest du deine Buchungsbestätigung." – Fester Textabschluss


5️⃣ HTML-E-Mail mit PowerApps versenden

Jetzt kommt der finale Schritt: Das Senden der formatierten E-Mail.

📌 PowerApps Code für SendMailV2:

Office365Outlook.SendMailV2(
    "empfaenger@email.com", 
    "Dein Betreff hier", 
    HTMLText.HtmlText
)

Fertig! Sobald du den Button klickst, wird die E-Mail mit sauberer Formatierung und dynamischen Inhalten an den Empfänger gesendet. 🎉



🚀 Bonus: Bilder in die E-Mail einbetten

Falls du Logos, Icons oder Bilder (z. B. aus einer E-Mail-Signatur) in deine formatierte E-Mail integrieren möchtest, kannst du sie direkt in PowerApps einbinden.


1️⃣ Befolge die Schritte 1️⃣ bis 4️⃣ und erstelle eine E-Mail mit eingebetteten Bildern.


2️⃣ Lade das Bild als .jpg in deine Power App hoch.

Achte darauf, dass die Dateigröße möglichst klein ist, um optimale Performance zu gewährleisten.



3️⃣Speichere das Bild als Variable im App.OnStart-Ereignis und konvertiere es mit folgendem Code:

Set(gblEMailBild, JSON(<DeinBild>, JSONFormat.IncludeBinaryData))

4️⃣ Suche das Bild im HTML-Code, indem du nach "src=" suchst.



5️⃣ Ersetze die ursprüngliche Bildquelle (src) durch die Variable gblEMailBild.

<img border=0 width=150 height=149 src="&gblEMailBild&">

Jetzt wird das Bild korrekt in die E-Mail eingefügt!


🎯 Fazit

Ohne jegliche HTML-Kenntnisse kannst du mit dieser Methode perfekt formatierte E-Mails mit eingebetteten Bildern direkt aus PowerApps senden.

💡 Meine Key Learnings:✔️ PowerApps kann wunderschön formatierte E-Mails senden – ohne Code-Wissen✔️ HTML aus Outlook kopieren & direkt in PowerApps nutzen✔️ Dynamische Inhalte einfach mit & txtName.Value & ersetzen✔️ Bilder über JSON-Umwandlung in PowerApps integrieren

 
 
 

Comments


bottom of page