Heyflow ist ein No-Code-Tool, das es dir ermöglicht, Flows zu erstellen, zu gestalten und zu integrieren, ohne dass du programmieren musst. Wir erlauben dir jedoch, dein eigenes JavaScript zu schreiben, um die Funktionalitäten von Heyflow zu erweitern.

Heyflow-Screenshot – benutzerdefinierter JavaScript-Code

Wie du eigenes JavaScript hinzufügst

Du findest den Code-Editor auf der linken Seite des Bauen-Bereichs. Klicke dort oben auf JavaScript.

Jeder Code, der im JavaScript-Code-Editor geschrieben (und gespeichert) wird, wird geladen und ausgeführt, kurz bevor der Heyflow geladen wird. Wenn du also zum Beispiel die folgende Zeile im Editor schreibst und die Änderungen speicherst, erscheint ein Alert:

alert('Heyflow World!');

Heyflows legen ihren Lebenszyklus durch unsere Heyflow Events API offen. Schau dir den Leitfaden an, um mehr darüber zu erfahren.

Obwohl es möglich ist, raten wir davon ab, die Daten, das DOM und den HTML-Code deines Heyflows über JavaScript zu ändern, da dies zu Fehlern in deinem Flow führen kann und der zugrunde liegende Flow-Code sich ändern könnte, so dass deine Implementierung nicht mehr funktioniert. Zukünftige Verbesserungen und Änderungen an Heyflow können dein benutzerdefiniertes JavaScript leider nicht berücksichtigen.

Beachte auch, dass der Code, den du schreibst, nicht an deinen Heyflow gebunden ist und im window ausgeführt wird, wenn du deinen Heyflow in eine Website eingebettet haben.

Wenn du mit den Einschränkungen einverstanden bist, findst du hier ein Beispiel für die Übergabe der vollständigen URL deines Heyflows an die Antwort:

const input = document.createElement('input');
input.type = 'text';
input.name = 'fullURL';
input.id = 'fullURL';
input.setAttribute('data-label', 'Full URL');
input.value = window.location.href;
input.style = "display:none;"

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementsByTagName('form')[0];
    form.appendChild(input);
});

Technisch gesehen erstellt dieses Snippet ein Eingabefeld, benennt es, legt die (System-)Bezeichnung fest, weist ihm einen Wert zu, verbirgt es vor dem Benutzer und fügt es dann den Formulardaten hinzu.

Du kannst input.value auf jeden beliebigen Wert setzen. Wenn du zum Beispiel das aktuelle Datum übergeben möchtest, schreibe

input.value = new Date().toJSON().split('T')[0]; (Format: JJJJ-MM-TT).

Eigenes JavaScript in eingebetteten Heyflow

Wenn du unsere Webkomponenten-Einbettungen verwendest und eigenes JavaScript in deinem Flow nutzt, musst du sicherstellen, dass DOM-Abfragen, Manipulationen usw. auf das shadowDOM der Webkomponente abzielen.

Eine Möglichkeit, dies zu erreichen, besteht darin, im heyflow-init Event (siehe Events API) zu prüfen, ob es ein shadowDOM gibt und dieses für alle nachfolgenden Abfragen zu verwenden:

let shadowRoot;
window.addEventListener('heyflow-init', (event) => {
shadowRoot =
(document.querySelector(`[flow-id="${event.detail.flowID}"]`) &&
document.querySelector(`[flow-id="${event.detail.flowID}"]`)
.shadowRoot) ||
document;
shadowRoot.querySelector('foobar').value = "baz";
})