Wir haben ein neues Tutorial veröffentlicht, in dem Captain Astro zeigt, wie ihr eine Filterbar in Ninox mit dem State-Bag-Konzept umsetzt. Der Fokus liegt auf einer technisch sauberen Architektur: Ein zentrales Feld statt vieler Helper-Felder.

Technische Übersicht

State-Bag-Konzept

Alle Filter- und Ansichtswerte werden in einem einzigen Ninox-Feld gespeichert – als URL-encodiertes JSON-Objekt. Das reduziert die Anzahl der benötigten Felder deutlich und macht Erweiterungen einfacher.

Implementierung

State-Feld in Ninox:

• Feldname: helper_mainContentState

• Typ: Textfeld

• Inhalt: URL-encoded JSON mit allen Filter- und Ansichtswerten

Beispiel-Struktur (dekodiert):

{
  "search": "Suchbegriff",
  "showComplete": true,
  "kpiActive": "card-id",
  "tabs": "active-tab-id"
}

Die Filterbar schreibt die Sucheingabe direkt in dieses Feld. Die Tabelle reagiert darauf über Formeln/Queries, die den State auslesen und filtern.

Komponenten der Filterbar

• Suchfeld – schreibt in den State, Tabelle filtert live

• Show Complete Filter – Checkbox für erledigte/offene Tasks

• Task-Button – Erstellen neuer Einträge

• KPI-Bar-Integration – KPI-Cards und Filterbar teilen sich dasselbe State-Feld

Workflow mit Cursor AI + ADK

1. Ninox-Schema in Cursor laden (ADK)

2. Prompt für Filterbar schreiben – AI generiert main.arc Code

3. Code in Ninox-Funktionsfeld einfügen

4. Feld-IDs werden automatisch aus dem Schema gelesen

Die AI kennt die Tabellen- und Feldstruktur und kann den Code entsprechend anpassen – inkl. korrekter Feld-IDs für das Suchfeld.

Vorraussetzung

• Ninox DB
• Arc Rider Widgets
• Arc Rider Develpment Kit
• Cursor o.Ä. (Visual Studio Code)

Nächster Schritt

Die Tabelle muss ebenfalls auf den zentralen UI State umgerüstet werden – das kommt im nächsten Teil.