Der Grid Block in Frontly ist ein vielseitiges Werkzeug zur visuellen Darstellung von Daten in einem Rasterformat. Er zeigt Ihre Tabellendaten in Form von Karten an, die in einem Raster angeordnet sind. Jede Karte repräsentiert eine Zeile in Ihrer Tabelle und kann angepasst werden, um verschiedene Informationen und Bilder anzuzeigen.
Hauptmerkmale
1. Datenauswahl: Sie können die Tabelle auswählen, deren Daten im Grid Block angezeigt werden sollen. Dies erfolgt durch die Verbindung des Blocks mit der entsprechenden Google Sheets-Tabelle.
2. Kartenanpassung: Der Grid Block verwendet Karten, um die Daten darzustellen. Diese Karten können angepasst werden, um verschiedene Informationen anzuzeigen, einschließlich Bilder, Text und andere Daten aus Ihrer Tabelle. Die Karten können durch verschiedene Einstellungen wie Hintergrund, Bildgröße und Kartenbreite weiter angepasst werden.
3. Filteroptionen: Es gibt sichtbare und versteckte Filteroptionen. Sichtbare Filter ermöglichen es Benutzern, die angezeigten Daten basierend auf bestimmten Kriterien zu filtern. Versteckte Filter können verwendet werden, um die Datenanzeige basierend auf Benutzerrollen oder anderen Bedingungen zu steuern.
4. Suchfunktion: Eine Suchleiste kann aktiviert werden, um Benutzern die Möglichkeit zu geben, nach bestimmten Schlüsselwörtern innerhalb der Daten zu suchen und die Ergebnisse entsprechend zu filtern.
5. Aktionen bei Klick: Sie können definieren, welche Aktion ausgeführt werden soll, wenn ein Benutzer auf eine Karte klickt. Dies kann die Anzeige einer Detailansicht, das Ausführen einer benutzerdefinierten Aktion oder keine Aktion sein.
6. Erstellung neuer Datensätze: Eine Schaltfläche kann hinzugefügt werden, die es Benutzern ermöglicht, neue Datensätze direkt im Grid Block zu erstellen. Diese neuen Einträge erscheinen sofort im Raster, sobald sie erstellt wurden.
Anwendungsbeispiele
Produktkatalog: Verwenden Sie den Grid Block, um einen visuellen Produktkatalog zu erstellen. Jede Karte kann ein Produktbild, den Namen, Preis und eine kurze Beschreibung enthalten. Benutzer können nach bestimmten Produkten suchen oder die Ergebnisse filtern.
Teamübersicht: Erstellen Sie eine Übersicht Ihres Teams, indem Sie jede Karte mit einem Bild, Namen, Position und Kontaktinformationen eines Teammitglieds versehen. Dies erleichtert die Navigation und das Finden von Informationen.
Projektübersicht: Verwenden Sie den Grid Block, um eine Übersicht laufender Projekte zu erstellen. Jede Karte kann Projektdetails wie Titel, Status, Fälligkeitsdatum und verantwortliche Personen anzeigen.
Detaillierte Anleitung zur Nutzung
Schritt 1: Hinzufügen des Grid Blocks Wählen Sie im Frontly-Editor den Grid Block aus und ziehen Sie ihn an die gewünschte Stelle auf Ihrer Seite. Verbinden Sie den Block mit der Tabelle, deren Daten angezeigt werden sollen.
Schritt 2: Anpassen der Karten Konfigurieren Sie die Karten, um die relevanten Informationen anzuzeigen. Passen Sie die Einstellungen für Hintergrund, Bildgröße und Kartenbreite an, um das Erscheinungsbild zu optimieren.
Schritt 3: Einrichten von Filtern und Suchfunktionen Fügen Sie sichtbare oder versteckte Filter hinzu und aktivieren Sie die Suchleiste, um Benutzern die Möglichkeit zu geben, die angezeigten Daten zu durchsuchen und zu filtern.
Schritt 4: Definieren von Aktionen bei Klick Legen Sie fest, welche Aktionen ausgeführt werden sollen, wenn eine Karte angeklickt wird. Dies kann das Anzeigen einer Detailansicht oder das Ausführen einer benutzerdefinierten Aktion umfassen.
Schritt 5: Testen und Veröffentlichen Überprüfen Sie die Funktionalität in der Vorschau Ihrer App und stellen Sie sicher, dass alle Einstellungen korrekt sind. Veröffentlichen Sie die Änderungen, wenn alles wie gewünscht funktioniert.
Fazit
Der Grid Block in Frontly bietet eine flexible und visuell ansprechende Möglichkeit, Daten zu präsentieren. Durch seine vielfältigen Anpassungsoptionen und die Möglichkeit, interaktive Elemente hinzuzufügen, können Sie eine benutzerfreundliche und informative Darstellung Ihrer Daten erstellen.
Weitere Informationen finden Sie auf der Frontly Hilfeseite.