Wie wäre es, wenn wir einen Button in der Ribbon-Leiste hätten, der eine Journey auslöst? Aber wie erstellt man überhaupt einen neuen Button in der Ribbon-Leiste und wie kann dieser als Trigger fungieren?
In meinen vorherigen Artikeln habe ich bereits gezeigt, wie man Custom Trigger in Journeys verwenden kann. Meistens hat der Trigger einen Power Automate ausgelöst. Oder wir haben natürlich auch den Dataverse-Trigger, der ausgelöst wird, wenn ein Datensatz erstellt oder ein Feld aktualisiert wird. Diese Low-Code/No-Code-Varianten sind einfach zu implementieren, aber heute wollen wir einen Schritt weiter gehen. Mit einem Custom Trigger und Javascript.
Immer wenn der Button in der Ribbon-Leiste auf dem Kontaktformular geklickt wird, soll eine Email versendet werden.
Also, lasst uns starten und mit der Erstellung des Buttons beginnen.
Schritt 1: Button in der Befehlsleiste erstellen
Um einen Button zur Befehlsleiste hinzuzufügen, gehe zu deiner Lösung und füge die Kontakttabelle hinzu.
Erstelle eine neue Command und wähle im erscheinenden Popup „Main form“ aus, da wir den Button auf dem Kontaktformular ergänzen wollen.
Im modernen Designer können wir den neuen Button erstellen. Vergib einen Labeltext und wähle ein Icon aus der Bibliothek aus. Im Action-Bereich werden wir später das Javascript vom Trigger eintragen. Zunächst kannst du noch Tooltip-Informationen hinzufügen und festlegen, ob der Button angezeigt oder versteckt werden soll. Mit Drag und Drop platzierst du den Button an der gewünschten Stelle in der Buttonleiste.
Bevor wir hierher zurückkehren, erstellen wir zuerst den Trigger in Customer Insights.
Schritt 2: Trigger erstellen
Wie genau man einen neuen Trigger erstellt, muss ich bestimmt gar nicht mehr im Detail erzählen. Also halten wir es kurz. In der Customer Insights Journeys App erstelle ich einen Custom Trigger mit dem Attribut und Datentyp Kontakt. Weitere Attribute füge ich nicht hinzu. Dann klicke ich auf Next, Next und Ready to Use.
Sobald der Trigger erstellt ist, kannst du auf Go to code snippet klicken. Hier erhältst du den Javascript-Code und den Code für das initiale Setup des Skripts. Der initiale Code erscheint, wenn du auf den One-time set up link klickst.
Dieses Skript fügen wir später zu einer Webressource hinzu und hinterlegen es dann im Button. Vorher müssen wir den Code aber noch anpassen.
Schritt 3: Ein bisschen Code Magie
Damit ich den Code besser anpassen und ergänzen kann, nutze ich am liebsten Visual Studio Code. Sonst gibt es ein Durcheinander. Dort füge ich zuerst den initalen Code und dann den Javascript Code aus unserem Trigger ein.
Wenn wir es jetzt so lassen, würde der Trigger direkt nach dem Klick auf den Button ausgelöst werden und die Email versenden. Das ist natürlich ok, aber ich finde es bisschen schwierig. Was ist, wenn der User aus Versehen auf den Button klickt? Dann lässt sich die Email nicht mehr aufhalten.
Deswegen fügen wir noch einen Bestätigungsdialog zur Sicherheit hinzu. Wenn also der User auf den Button klickt, öffnet sich ein Dialog und nur wenn der User auf OK klickt, wird auch der Trigger ausgelöst.
Im Code müssen wir auch noch definieren, für welchen Kontakt der Trigger starten werden soll. Daher fügen wir den Parameter primaryControl ein. Diesen benötigen wir, um Informationen über den Ausführungskontext (Formularkontext oder Grid-Kontext) an die JavaScript-Funktion zu übergeben. Denn dann können wir anschließend die Variable contactid erhalten. Das ist die GUID des Kontakts. Und diese müssen wir im Trigger-Javascript hinter die authID setzen. Nur so weiß auch die Journey, welcher Kontakt die Email erhalten soll.
Speichere den Code als Datei ab. Der fertige Code sieht so aus:
//initial code from the trigger:
(function (a, t, i) { const e = "MSEI"; const s = "Analytics"; const o = e + "queue"; a[o] = a[o] || []; const r = a[e] || function (n) { const t = {}; t[s] = {}; function e(e) { while (e.length) { const r = e.pop(); t[s][r] = function (e) { return function () { a[o].push([e, n, arguments]) } }(r) } } const r = "track"; const i = "set"; e([r + "Event", r + "View", r + "Action", i + "Property", i + "User", "initialize", "teardown"]); return t }(i.name); const n = i.name; if (!a[e]) { a[n] = r[s]; a[o].push(["new", n]); setTimeout(function () { const e = "script"; const r = t.createElement(e); r.async = 1; r.src = i.src; const n = t.getElementsByTagName(e)[0]; n.parentNode.insertBefore(r, n) }, 1) } else { a[n] = new r[s] } if (i.user) { a[n].setUser(i.user) } if (i.props) { for (const c in i.props) { a[n].setProperty(c, i.props[c]) } } a[n].initialize(i.cfg) })(window, document, {
src: "https://download.pi.dynamics.com/sdk/web/msei-0.js",
name: "msdynmkt",
cfg: {
ingestionKey:"cbe10dd607934e80bed9e498c1a1759d-1b54873a-1542-..."
}
});
//the javascript of the trigger, add the primaryControl in the brackets:
function track_msdynmkt_copyofrequestconsent_140916360(primaryControl) {
const confirmStrings = {
//label and description of the confirmation dialog
text: "By confirming this dialog an email will be send to this contact. Choose wisely.",
title: "Are you sure?"
};
//design on the confirm options
const confirmOptions = {
height: 200,
width: 450
};
//setting the variables for the primarycontrol and the contactid
const formContext = primaryControl;
const contactid = formContext.data.entity.getId();
//starting the confirmDialog
Xrm.Navigation.openConfirmDialog(confirmStrings, confirmOptions).then(
function (success) {
if (success.confirmed) {
//when the use clicks on Ok the rest of the trigger code will be executed
console.log("Dialog closed using OK button.");
window["msdynmkt"].setUser({authId: contactid}); // ID, e-mail or phone number - see instructions
window["msdynmkt"].trackEvent({
name: "msdynmkt_copyofrequestconsent_140916360", //Trigger title: Request Consent
ingestionKey : "cbe10dd607934e80bed9e498c1a1759d-1b54873a-",
version: "1.0.0" ,
properties: {
"bindingid" : "12345"
}
})
//a notification is shown
formContext.ui.setFormNotification("The email was sent. Congratulations!", "WARNING");
} else {
//nothing happens
}
}
);
}
Schritt 4: Webressource erstellen
Jetzt erstellen wir die Webressource und fügen dort unseren Code ein. Gehe dafür zurück zu den PowerApps, wo wir den Button erstellt haben. Denn jetzt kommen wir zu dem Action Teil. Dort kannst du zwischen PowerFX und Javascript wählen. Wähle im Action-Bereich „Javascript“.
In der Library kannst du eine schon bestehende Skriptbibliothek verwenden und dort dein Skript aus dem vorherigen Kapitel ergänzen. Oder du legst eine neue Webressource an. Gib der Webressource einen passenden Namen, wähle als Typ Javascript und lade dort deine Skriptdatei hoch.
Zurück im PowerApps Designer wählst du deine gewünschte Bibliothek. Dann fügst du im darunter liegenden Feld den Funktionsnamen ein. In unserem Beispiel ist das track_msdynmkt_copyofrequestconsent_140916360. Den Namen findest du im Trigger-Javascript.
Im Bereich darunter ergänzt du den Parameter PrimaryControl. Den brauchen wir ja wie gesagt im Code, um an die Kontakt GUID zu kommen.
Alles publishen natürlich und dann kommen wir zum letzten Schritt.
Schritt 5: Journey erstellen
Nun zum einfachsten Teil: Erstelle eine triggerbasierte Journey, die mit unserem Trigger startet und anschließend eine E-Mail versendet. Veröffentliche die Journey.
Ein letzter Test
Schauen wir uns den Button im Kontaktformular an und testen, ob alles funktioniert.
Zusammenfassung
In diesem Artikel haben wir gelernt, wie man einen benutzerfreundlichen Button in der Ribbonbar erstellt, der eine Journey in Dynamics 365 Customer Insights auslöst. Von der Erstellung des Buttons über die Anpassung des Javascript-Codes bis hin zur finalen Veröffentlichung der Journey haben wir jeden Schritt durchlaufen.
Die Möglichkeiten mit benutzerdefinierten Buttons sind endlos. Künftig könnten wir beispielsweise Buttons erstellen, die verschiedene Automatisierungen in Gang setzen, wie das Versenden von Follow-up-E-Mails oder das Starten komplexerer Marketing-Kampagnen. Der Fantasie sind wie immer keine Grenzen gesetzt!
***Hinweis: Der Inhalt ist zum Zeitpunkt der Erstellung korrekt. Microsoft mag in der Zwischenzeit Änderungen vorgenommen haben.***
Schau dir auch die FAQs in meinem Blog an: Kurze Fragen – schnelle Antworten! Zu den FAQs