Von DocuGenerate Lagerverwaltungsanwendungen, die mit Retool erstellt wurden, sind hervorragend darin, Daten zu organisieren und intuitive Oberflächen für die Verfolgung von Produkten, Bestellungen und Sendungen bereitzustellen. Viele Unternehmen benötigen jedoch professionelle Dokumentation für ihre Versandabläufe, die über einfache Datenanzeigen hinausgeht. Die Erstellung von PDF-Lieferscheinen mit detaillierten Produktinformationen, Adressen und individuellem Branding kann Logistikabläufe erheblich verbessern und Kunden mit professioneller Dokumentation versorgen.
In diesem Tutorial erweitern wir Retools vorhandene Inventory Management App-Vorlage durch die Integration von DocuGenerates Dokumentengenerierungsfunktionen. Anstatt ein Lagersystem von Grund auf neu aufzubauen, konzentrieren wir uns auf das Hinzufügen einer professionellen PDF-Lieferscheingenerierung zu einer bereits funktionsfähigen Anwendung. Dieser Ansatz zeigt, wie bestehende Retool-Anwendungen um Dokumentengenerierungsfunktionen erweitert werden können, ohne etablierte Workflows zu unterbrechen.
Die Integration, die wir aufbauen, schafft eine leistungsstarke Kombination, bei der Benutzer ihre Bestandsdaten über Retools intuitive Oberfläche verwalten und gleichzeitig bei Bedarf professionelle Versanddokumente generieren können. Diese Lösung ist besonders wertvoll für Unternehmen, die Spediteure, Kunden und interne Teams mit standardisierter Versanddokumentation versorgen müssen, die detaillierte Produktinformationen und Unternehmensbranding enthält.
Bevor wir Dokumentengenerierungsfunktionen hinzufügen, schauen wir uns die Grundlage an, mit der wir arbeiten. Retools Inventory Management App-Vorlage bietet eine umfassende Lösung zur Verfolgung von Lagerbeständen, Verwaltung von Sendungen und Überwachung von Produktdaten an mehreren Standorten.
Die Anwendung enthält mehrere Schlüsselkomponenten, die sie ideal für unsere Lieferscheinerweiterung machen:
Sendungsverfolgung: Ein vollständiges System zur Verwaltung von Sendungen von der Erstellung bis zur Lieferung, einschließlich Statusupdates und detaillierter Sendungsinformationen.
Produktverwaltung: Umfassende Produktdaten einschließlich Beschreibungen, Mengen und Preisinformationen, die für die Versanddokumentation unerlässlich sind.
Standortverwaltung: Unterstützung für mehrere Lager und Versandstandorte mit Adressinformationen für Lieferscheine.
Datenbeziehungen: Gut strukturierte Beziehungen zwischen Sendungen, Produkten und Standorten, die eine umfassende Dokumentengenerierung ermöglichen.
Die vorhandene Datenstruktur der Vorlage enthält alle Informationen, die für professionelle Lieferscheine typischerweise benötigt werden, einschließlich Absender- und Empfängerdetails, Produktbeschreibungen, Mengen und Sendungsstatusinformationen.
Um uns auf die Dokumentengenerierungsaspekte dieses Tutorials zu konzentrieren, nehmen wir einige Änderungen an der Basisvorlage vor. Diese Änderungen vereinfachen die Oberfläche, während die für die Lieferscheingenerierung erforderliche Kernfunktionalität erhalten bleibt.
Beginnen Sie mit dem Klonen der Inventory Management App-Vorlage aus Retools Vorlagenbibliothek. Dies bietet die vollständige Grundlage mit Beispieldaten, etablierten Workflows und bewährten UI-Mustern.
Die geklonte Vorlage enthält alle notwendigen Komponenten, Abfragen und Beispieldaten, um den Lieferscheingenerierungsprozess zu demonstrieren. Die vorhandene Struktur bietet realistische Sendungsszenarien, die verschiedene Möglichkeiten der Dokumentengenerierung aufzeigen.
Für dieses Tutorial entfernen wir etwas Komplexität, um uns auf den Dokumentengenerierungs-Workflow zu konzentrieren. Die wichtigste Vereinfachung beinhaltet das Aktualisieren der Sendungsabfrage, um die Datumsfilterung zu entfernen und so die Anzeige aller verfügbaren Sendungen zu erleichtern.
Wir entfernen die Datumsbereichsfilterkomponenten und vereinfachen die getShipments-Abfrage. Diese Änderung beeinträchtigt die Kernfunktionalität nicht, macht es aber einfacher, Sendungen während unseres Tutorials zu navigieren. In einer Produktionsumgebung würden Sie diese Filterfunktionen typischerweise beibehalten, um große Mengen von Sendungsdaten zu verwalten. Die vereinfachte Ansicht bietet sofortigen Zugriff auf alle Sendungen und erleichtert das Testen der Dokumentengenerierung mit verschiedenen Sendungstypen und Konfigurationen.
Als nächstes fügen wir eine View Shipping Form-Schaltfläche zur Sendungsdetailseite hinzu. Diese Schaltfläche löst den Dokumentengenerierungsprozess aus und navigiert Benutzer zu einer PDF-Viewer-Seite.
Die Platzierung der Schaltfläche fügt sich natürlich in die bestehende Sendungsdetailoberfläche ein und bietet Benutzern sofortigen Zugriff auf die Lieferscheingenerierung, ohne etablierte Workflows zu unterbrechen. Das Design der Schaltfläche entspricht den vorhandenen Stilmustern der Anwendung und gewährleistet visuelle Konsistenz.
Der letzte Schritt beinhaltet die Erstellung einer neuen ShippingFormPDF-Seite zur Anzeige generierter Lieferscheine. Diese Seite enthält eine PDF-Viewer-Komponente zur Anzeige von DocuGenerate-generierten Dokumenten sowie eine Print-Schaltfläche, die es Benutzern ermöglicht, den Lieferschein auszudrucken.
Um dynamische Lieferscheine zu generieren, müssen wir zunächst eine Vorlage erstellen, die alle wesentlichen Elemente professioneller Versanddokumentation enthält. Die Vorlage enthält Abschnitte mit Merge-Tags für Absenderinformationen, Empfängerdetails, Sendungsinhalt und zusätzliche Hinweise.
Die Lieferschein-Vorlage in diesem Tutorial enthält mehrere wichtige Funktionen:
Bedingter Inhalt: Der Hinweisabschnitt erscheint nur, wenn Sendungshinweise vorhanden sind, unter Verwendung der Bedingungssyntax
Dynamische Tabelle: Der Sendungsartikelabschnitt expandiert automatisch, um eine variable Anzahl von Produkten aufzunehmen, mithilfe der Tabellensyntax
Konsistente Formatierung: Alle Elemente behalten eine professionelle Formatierung unabhängig von Inhaltslänge oder Komplexität
Mit unserer fertigen Oberfläche können wir uns auf die Integration von DocuGenerates PDF-Generierungsfunktionen in den bestehenden Sendungsworkflow konzentrieren, um Lieferscheine automatisch zu erstellen.
Wir müssen die Verbindung zwischen Retool und der DocuGenerate-API konfigurieren. Dies beinhaltet die Erstellung einer REST-API-Ressource, die Authentifizierung und Kommunikation mit DocuGenerates Dokumentengenerierungsdienst verwaltet.
Die REST-API-Konfiguration erfordert:
https://api.docugenerate.com (oder verwenden Sie einen unserer regionalen Endpunkte für bessere Leistung)Authorization-Header hinzuDiese Konfiguration bildet die Grundlage für alle Dokumentengenerierungsanfragen, verwaltet die Authentifizierung automatisch und stellt eine wiederverwendbare Verbindung für mehrere Dokumenttypen bereit.
Mit unserer erstellten Vorlage müssen wir die Retool-Abfrage konfigurieren, die Sendungsdaten zur Verarbeitung an DocuGenerate sendet. Diese Abfrage übernimmt die Datentransformation und die API-Kommunikation.
Die generateDocument-Abfrage verwendet die DocuGenerate-Ressource, und ihre Konfiguration umfasst:
/v1/document/-Endpunkt zum Erstellen neuer Dokumentetemplate_id: ID der in DocuGenerate erstellten Lieferschein-Vorlageoutput_format: auf .pdf gesetzt, um PDF-Dokumente zu generierenname: gibt den dynamischen Dokumentnamen an, der dem in der App angezeigten Namen entspricht (Shipment #{{ Shipments_HistoryCollection.selectedItem.id }})data: die Lieferscheindaten basierend auf Shipments_HistoryCollection.selectedItem
[{
"shipment_number": "{{ Shipments_HistoryCollection.selectedItem.id }}",
"shipment_from": "{{ Shipments_HistoryCollection.selectedItem.fromStreet }}",
"shipment_to": "{{ Shipments_HistoryCollection.selectedItem.toStreet }}",
"shipment_status": "{{ Shipments_HistoryCollection.selectedItem.status }}",
"shipment_notes": "{{ Shipments_HistoryCollection.selectedItem.notes }}",
"shipment_items": {{ getShipmentItems.data }},
"shipment_date": "{{ Shipments_HistoryCollection.selectedItem.date }}"
}]
Die Abfrage transformiert Retools Sendungsdaten in das Format, das von DocuGenerates Vorlagenverarbeitungs-Engine erwartet wird. Dies beinhaltet das Extrahieren relevanter Informationen aus dem ausgewählten Sendungsdatensatz und deren angemessene Formatierung für die in unserer Vorlage definierten Merge-Tags.
Die getShipmentItems-Abfrage liefert Sendungsartikel im Tabellenformat, das inkompatibel mit dem für den shipment_items-Wert in der generateDocument-Abfrage erwarteten Listenformat ist.
Wir müssen diese tabellarischen Daten in eine Array-Struktur konvertieren, die die dynamische Produktliste in unserer Lieferscheinvorlage befüllen kann. Die Eingabe des folgenden JavaScript-Codes im Schritt Transform results konvertiert das Tabellenformat in ein Array von Objekten mit den Attributen title und quantity:
const { title, quantity } = data;
return title.map((t, i) => ({
title: t,
quantity: quantity[i]
}));
Diese Transformation stellt sicher, dass Produktinformationen aus Retools Datenbankstruktur dem Array-Format entsprechen, das von DocuGenerates Vorlagenverarbeitungs-Engine erwartet wird. Das resultierende Array kann eine beliebige Anzahl von Produkten aufnehmen und dabei konsistente Formatierung im generierten Dokument beibehalten.
Die abschließende Implementierung verbindet alle Komponenten zu einem reibungslosen Benutzererlebnis, von der Sendungsauswahl bis zur PDF-Generierung und -Anzeige. Diese Integration stellt sicher, dass die Dokumentengenerierung sich als natürliche Erweiterung des bestehenden Lagerverwaltungsworkflows anfühlt und nicht als separater Prozess.
Die View Shipping Form-Schaltfläche benötigt zwei Event-Handler für den vollständigen Workflow. Der erste Event-Handler löst die generateDocument-Abfrage aus, die die Sendungsdaten an DocuGenerate sendet und die generierte PDF-URL als Antwort erhält.
Der zweite Event-Handler verwaltet die Navigation zur ShippingFormPDF-Seite nach erfolgreicher Dokumentengenerierung. Dies schafft ein reibungsloses Benutzererlebnis, bei dem das Klicken auf die Schaltfläche das Dokument sofort generiert und dem Benutzer anzeigt.
Der letzte Schritt besteht darin, das generierte Lieferschein-PDF auf der dedizierten Seite anzuzeigen, die zu Beginn dieses Tutorials zur Anwendung hinzugefügt wurde.
Um das generierte Dokument in der ShippingFormPDFViewer-Komponente zu laden, müssen wir folgenden Wert im File URL-Eingabefeld angeben:
{{ generateDocument.data?.document_uri }}
Diese Konfiguration zeigt automatisch das von DocuGenerates API über die Dokumentengenerierungsabfrage zurückgegebene PDF an und bietet Benutzern sofortigen Zugriff auf ihre generierten Lieferscheine.
Mit allen konfigurierten Komponenten bietet der vollständige Workflow ein professionelles Dokumentengenerierungserlebnis, das direkt in die Lagerverwaltungsoberfläche integriert ist. Benutzer können von der Sendungsverwaltung zur professionellen PDF-Generierung navigieren, ohne die Anwendung zu verlassen.
Die fertige Lösung, auf die Sie hier zugreifen können, demonstriert mehrere wichtige Vorteile:
Die Integration von DocuGenerates Dokumentengenerierungsfunktionen in Retools Inventory Management App zeigt, wie bestehende No-Code-Anwendungen mit professioneller Dokumenterstellung erweitert werden können, ohne etablierte Workflows zu unterbrechen. Dieser Ansatz bietet erheblichen Mehrwert für Unternehmen, die konsistente, professionelle Versanddokumentation generieren müssen, während sie die Effizienz ihrer bestehenden Lagerverwaltungsprozesse aufrechterhalten.
Die Kombination von Retools intuitiver Oberflächen-Builder-Funktion mit DocuGenerates robuster Vorlagenverarbeitung schafft eine Lösung, die operative Effizienz mit professionellen Dokumentationsanforderungen verbindet. Benutzer können ihre Bestände und Sendungen weiterhin über vertraute Oberflächen verwalten und dabei mit einfachen Schaltflächenklicks auf Dokumentengenerierungsfunktionen auf Unternehmensniveau zugreifen. Die Flexibilität beider Plattformen bedeutet, dass die Lösung mit sich ändernden Geschäftsanforderungen mitwachsen kann und alles von einfachen Lieferscheinen bis hin zu komplexen mehrseitigen Versandmanifesten unterstützt.
Der schrittweise Ansatz dieses Tutorials zeigt, dass ausgefeilte Dokumentengenerierungsfunktionen zu bestehenden Anwendungen hinzugefügt werden können, ohne umfangreiche Entwicklungsressourcen zu benötigen oder aktuelle operative Workflows zu unterbrechen. Dies macht professionelle Dokumentenautomatisierung für Unternehmen jeder Größe zugänglich – von kleinen Betrieben, die Dutzende von Sendungen verwalten, bis hin zu großen Unternehmen, die täglich Tausende von Versanddokumenten verarbeiten.
Geben Sie Ihre E-Mail-Adresse ein, um den aktuellen Newsletter von DocuGenerate zu erhalten
Erfahren Sie, wie Sie mit n8n und DocuGenerate einen automatisierten Rechnungsgenerierungs-Workflow erstellen, der einen Ordner auf Excel-Dateien überwacht, die Daten extrahiert und professionelle PDF-Rechnungen generiert. Ideal für lokale Verarbeitung ohne Abhängigkeit von mehreren Cloud-Lösungen.
Entdecken Sie, wie Sie neue Vorlagen automatisch erstellen, wenn Google Docs zu einem Ordner hinzugefügt werden, und Vorlagen aktualisieren, wenn Dokumente geändert werden. Ideal für Teams, die lieber in Google Docs arbeiten, aber die Leistung von DocuGenerate für die Dokumentgenerierung benötigen.
Erfahren Sie, wie Sie in Bubble einen kompletten Workflow erstellen, der personalisierte Vertraulichkeits- vereinbarungen generiert und diese als E-Mail-Anhänge an Kunden sendet. Dieses Schritt-für-Schritt-Tutorial zeigt Ihnen, wie Sie mit Bubbles KI-Seitendesigner ein professionelles Kunden-Onboarding-System aufbauen.