TL;DR:
- Z 1600 szablonów workflow n8n, żaden nie wykorzystuje natywnych formularzy, co pokazuje niewykorzystany potencjał
- Natywne formularzy n8n oferują 9+1 typów pól (standardowe plus HTML), ale mają ograniczenia
- Mechanizm „Human in the loop” pozwala integrować workflow z kanałami takimi jak Email, Slack, WhatsApp
- Wykorzystanie węzłów „wait” i „respond to webhook” pozwala tworzyć w pełni niestandardowe interfejsy
- Kluczem do implementacji jest execution ID, które pozwala określić strukturę workflow w czasie rzeczywistym
- Niestandardowe interfejsy działają szybko i są łatwe w zrozumieniu – wymagają tylko dwóch węzłów
- Interfejsy mogą odpowiadać natychmiast lub wykonywać pracę pomiędzy interakcjami z użytkownikiem
Niewykorzystany potencjał interfejsów użytkownika w n8n
W kwietniu 2025 podczas Amsterdam Meetup, Sherif Abushadi z The Talent Lab przedstawił fascynujące obserwacje dotyczące niewykorzystanego potencjału formularzy w ekosystemie n8n. W swojej prezentacji „Going Beyond Forms: Building an Advanced Front-end for n8n” podzielił się analizą 1600 dostępnych szablonów workflow, odkrywając zatrważający fakt – żaden z nich nie wykorzystywał natywnych formularzy n8n.
„Z 1600 szablonów workflow, ani jedna osoba nie zdecydowała się użyć węzła formularza. To takie smutne” – zauważył Abushadi podczas prezentacji. Ta obserwacja stała się punktem wyjścia do głębszego zbadania tematu i zaprezentowania alternatywnego podejścia.
Sherif Abushadi ma około 30-letnie doświadczenie w tworzeniu oprogramowania i założył firmę Future Proof, aby „pomagać małym i średnim firmom nadążyć za szaleństwem wokół nas, zanim osiągniemy osobliwość.” Jak sam przyznał: „Jestem całkowicie zdezorientowany tym, co się dzieje. Jestem pewien, że większość z was również.”
Analiza wykorzystania formularzy w n8n
Głębsza analiza 1600 szablonów workflow wykazała następujące trendy:
- Większość szablonów koncentruje się na żądaniach HTTP i kodzie
- AI znalazło się na szczycie listy najczęściej wykorzystywanych elementów
- Formularze i elementy „human in the loop” pozostają kompletnie niewykorzystane
- Żaden z 9 dostępnych kanałów komunikacji (Email, Slack, WhatsApp itp.) nie jest używany w szablonach
„Myślę, że n8n i UI ogólnie, interfejsy użytkownika, powinny się trochę bardziej zakochać. Jestem tutaj, aby przekazać wam tę wiadomość” – podkreślił Sherif, wskazując na konieczność lepszej integracji automatyzacji workflow z doświadczeniem użytkownika.
Natywne formularze i ich ograniczenia
Natywne formularze w n8n można wykorzystać na trzy sposoby:
- Jako trigger startujący workflow
- W środku przepływu pracy
- Jako węzeł „human in the loop” zatrzymujący workflow do interakcji
Ograniczenia natywnych formularzy:
- 9 standardowych typów pól plus niestandardowy HTML (bez możliwości używania skryptów)
- Formularze „human in the loop” ograniczają się głównie do funkcji „approve/decline”
- Możliwość dostarczania przez około 9 kanałów komunikacyjnych
- Brak możliwości tworzenia w pełni dostosowanych interfejsów dla konkretnych przypadków biznesowych
Potęga węzła „wait” w tworzeniu niestandardowych interfejsów
Kluczem do tworzenia zaawansowanych interfejsów użytkownika w n8n jest wykorzystanie węzła „wait”. Jak wyjaśnił Sherif Abushadi, węzeł ten może oczekiwać na odpowiedź z webhooka, co otwiera nowe możliwości interakcji z użytkownikiem.
„Węzeł wait jest waszym przyjacielem. Możecie powiedzieć węzłowi wait, aby odpowiedział na webhook. Istnieją też inne rzeczy. Większość osób używa go do mierzenia czasu, ale możecie powiedzieć mu, aby odpowiedział na webhook” – tłumaczył podczas prezentacji.
W połączeniu z węzłem „respond to webhook”, możliwe jest tworzenie w pełni niestandardowych interfejsów, które integrują się z istniejącymi aplikacjami lub działają samodzielnie.
Jak to działa? Mechanizm implementacji
Implementacja niestandardowego interfejsu wymaga następujących kroków:
- Rozpoczęcie workflow (dowolnym triggerem)
- Pobranie execution ID
- Określenie struktury workflow w czasie rzeczywistym
- Zidentyfikowanie ostatnio wykonanego węzła
- Odpowiedź natychmiastowa lub wykonanie pracy pomiędzy węzłami wait i respond to webhook
„Potrzebujecie execution ID, ponieważ pozwala to odkryć strukturę workflow w czasie wykonywania. W tej strukturze macie ostatnio wykonany węzeł, i to właśnie mówi wam, gdzie jest wasz workflow. Inaczej nie wiecie” – wyjaśnił Abushadi.
Co ważne, ten mechanizm pozwala na dwa scenariusze interakcji:
- Natychmiastowa odpowiedź – interfejs czeka na dane z workflow i natychmiast je wyświetla
- Praca pomiędzy – workflow zatrzymuje się, prezentuje interfejs użytkownikowi, zbiera dane, przetwarza je i dopiero wtedy odpowiada
Praktyczne zastosowania i przykłady
Podczas prezentacji Sherif Abushadi pokazał kilka praktycznych przykładów:
- Prosty interfejs z przyciskiem rozpoczynającym workflow i spinnerem oczekującym na odpowiedź
- Interfejs pozwalający na wprowadzenie danych JSON i natychmiastową odpowiedź
- Bardziej złożony interfejs z pracą pomiędzy, gdzie użytkownik może dokonać wyboru, a system przetwarza te informacje
- Zaawansowany interfejs z elementami AI, zbierający preferencje użytkownika dotyczące nauki: „co chcesz się nauczyć?”, „jak lubisz się uczyć?” i „jakie tematy cię interesują?”
Jak podkreślił prezenter: „To nie jest rodzaj interfejsu, który spodziewalibyście się, że n8n jako firma zainwestuje w budowę. Jest zbyt specyficzny. Specyficzny dla problemu biznesowego, tak jak wasze problemy biznesowe.”
Techniczne aspekty implementacji
Z technicznego punktu widzenia, implementacja opiera się na kilku kluczowych elementach:
- Execution ID: podstawa do identyfikacji i śledzenia workflow
- API n8n: używane do pobierania definicji workflow
- Last node executed: kluczowy element umożliwiający określenie gdzie znajduje się workflow
- UUID węzła: unikalny identyfikator pozwalający mapować interfejsy
- Resume URL: pozwala na wznowienie workflow, ale nie wskazuje konkretnego węzła oczekiwania
„Możecie użyć adresu URL wznowienia, aby podjąć rzeczy, ale URL wznowienia nie dba o to, na którym węźle czeka. Więc jeśli macie wiele węzłów oczekujących, musicie pokazać właściwy interfejs użytkownika” – wyjaśnił Abushadi.
Potencjalne wyzwania i rozwiązania
Podczas prezentacji pojawiły się pytania dotyczące potencjalnych wyzwań:
Co się dzieje, gdy użytkownik przerywa proces? Workflow zostaje „odwodniony” i nie zużywa zasobów serwera n8n, dopóki webhook nie zostanie wywołany ponownie.
Co z zmianami w workflow?
- Przy użyciu unikalnych identyfikatorów węzłów: mogą ulec zmianie przy duplikowaniu workflow
- Przy użyciu nazw węzłów: nie można ich później zmienić
- Rozwiązanie: wybór metody identyfikacji zależy od konkretnego przypadku użycia
Czy można cofnąć się w formularzu? Standardowe formularze n8n mają ograniczone możliwości cofania. Jeśli potrzebna jest funkcja „cofnij”, należy zaprojektować ją jako część workflow.
Podsumowanie
Tworzenie niestandardowych interfejsów użytkownika dla n8n otwiera nowe możliwości dla firm chcących lepiej integrować automatyzację z doświadczeniem użytkownika. Wykorzystując tylko dwa węzły – „wait” i „respond to webhook” – możliwe jest tworzenie zaawansowanych, dopasowanych do konkretnych potrzeb biznesowych interfejsów.
Kluczowe zalety tego podejścia:
- Działa szybko i jest łatwe w zrozumieniu
- Wymaga tylko dwóch węzłów (wait i respond to webhook)
- Pozwala na integrację z dowolnymi istniejącymi aplikacjami
- Umożliwia tworzenie specyficznych interfejsów dla konkretnych potrzeb biznesowych
- Nie wymaga specjalnych zmian w istniejących workflow
Jak podsumował Sherif Abushadi: „Działa to i jest szybkie i łatwe do zrozumienia. Po prostu musicie umieścić węzeł wait gdziekolwiek chcecie uzyskać interfejs użytkownika i połączyć długotrwałą pracę z wait i respond to webhook, gdziekolwiek chcecie zrobić coś bardziej zaawansowanego dla użytkownika.”
Ten artykuł jest częścią serii notatek z wartościowych webinarów. Prezentacja „Going Beyond Forms: Building an Advanced Front-end for n8n” została wygłoszona przez Sherifa Abushadiego z The Talent Lab podczas Amsterdam Meetup w kwietniu 2025 roku.