Mobil-Layout

In NocoBase dient das Mobil-Layout dazu, eine eigenständige Navigation und eigene Seiten für Mobilgeräte zu erstellen. Es ist standardmäßig unter /mobile erreichbar, verwendet eine untere Tab-Leiste als Hauptnavigation und eignet sich besonders für Dateneingaben, Abfragen, Freigaben und Aufgabenbearbeitung auf dem Smartphone.

Mobil-Layout und Desktop-Layout greifen auf dieselben Datenquellen und Geschäftsdaten zu. Menüs, Routen und Seiteninhalte werden jedoch getrennt konfiguriert. Dadurch können Sie Seiten passend für die mobile Nutzung neu ordnen, ohne an die Struktur der Desktop-Seiten gebunden zu sein.

Mobil-Layout öffnen und in der Vorschau prüfen

Standardmäßig können Sie im Einstellungscenter auf „Mobil“ klicken oder /mobile direkt aufrufen.

Erstellen Sie die Seiten am besten im Desktop-Browser. Dort sehen Sie einen mobilen Vorschaubereich und eine obere Werkzeugleiste mit diesen Funktionen:

„UI Editor“ aktiviert oder deaktiviert die Oberflächengestaltung.
„Tablet-Vorschau“ prüft die Darstellung auf breiteren Mobilgeräten.
„Mobil-Vorschau“ setzt den Vorschaubereich auf die Größe eines Smartphones zurück.
„QR-Code“ öffnet die aktuelle mobile Adresse auf einem Smartphone.

20260715221712

Prüfen Sie die fertige Seite anschließend über den QR-Code auf einem echten Gerät. Achten Sie dabei besonders auf Navigation, Scrollen, Formulareingaben, eingeblendete Seiten und Sicherheitsabstände.

Das Mobil-Layout verwendet eine untere Tab-Leiste als Hauptnavigation. Derzeit unterstützt diese Navigation hauptsächlich Seiten und Links.

Eine Seite hinzufügen

Öffnen Sie den „UI Editor“.
Klicken Sie rechts neben der unteren Tab-Leiste auf die Schaltfläche zum Hinzufügen.
Wählen Sie „Seite“.
Geben Sie einen Seitentitel ein und wählen Sie ein Symbol.
Öffnen Sie nach dem Speichern die neue Seite und fügen Sie den Seiteninhalt hinzu.

20260715221823_rec_

Einen Link hinzufügen

Wenn Sie zu einer internen oder externen Adresse wechseln möchten, wählen Sie „Link“ und konfigurieren Sie Titel, Symbol und URL.

Der Link kann im aktuellen oder in einem neuen Fenster geöffnet werden. Das genaue Verhalten hängt von der Link-Konfiguration ab.

20260715221950

In der Oberflächengestaltung können Sie die Tabs in der unteren Leiste per Drag & Drop neu anordnen. Für jeden Tab können Sie außerdem Titel und Symbol bearbeiten, Verknüpfungsregeln konfigurieren, die UID kopieren oder den Tab löschen.

Um mobile Routen zentral anzuzeigen, einzublenden, auszublenden oder zu löschen, öffnen Sie „Einstellungscenter / Routen / Mobile Routen“.

20260715222113_rec_

Eine mobile Seite erstellen

Erstellen und öffnen Sie zuerst eine mobile Seite und fügen Sie dann Blöcke hinzu. Der Seiteninhalt wird grundsätzlich nach demselben Prinzip wie im Desktop-Layout aufgebaut: Mit Blöcken, Feldern und Aktionen organisieren Sie die benötigten Geschäftsinhalte. Die mobile Navigation und die Interaktion einiger Komponenten werden jedoch für kleine Bildschirme angepasst.

Seiteninhalt hinzufügen

Öffnen Sie die mobile Seite, die Sie gestalten möchten.
Prüfen Sie, ob der „UI Editor“ aktiviert ist.
Klicken Sie auf der Seite auf „Block hinzufügen“.
Wählen Sie eine Tabelle, ein Formular, eine Detailansicht, einen Filter oder einen anderen Block.
Konfigurieren Sie anschließend Felder, Aktionen und Blockeinstellungen.

20260715222230_rec_

Seiten-Tabs verwenden

Auch auf einer mobilen Seite können Sie Tabs aktivieren. Inhalte, die unter demselben Navigationseintrag liegen, aber weitgehend unabhängig voneinander sind, lassen sich auf verschiedene Tabs verteilen.

Öffnen Sie die Seiteneinstellungen und aktivieren Sie „Tabs aktivieren“. Alternativ können Sie die Seite unter „Einstellungscenter / Routen / Mobile Routen“ bearbeiten und „Seiten-Tabs aktivieren“ auswählen.
Öffnen Sie den „UI Editor“.
Klicken Sie rechts neben der Tab-Leiste der Seite auf „Tab hinzufügen“.
Fügen Sie den Tab hinzu und konfigurieren Sie anschließend seinen Namen und Inhalt.

Wenn die mobile Seite nur wenig Inhalt enthält, genügt eine einzelne Seite. Zusätzliche Tabs sind dann nicht nötig.

20260715222354_rec_

Mobile Interaktionen häufig verwendeter Komponenten

Häufig verwendete Komponenten passen ihre Anordnung und Interaktion an das Mobil-Layout an. So wechseln mehrspaltige Inhalte automatisch zu einer einzelnen Spalte, die sich besser vertikal lesen lässt, Auswahl- und Datums-/Zeitfelder verwenden mobile Auswahlansichten, und Filter, verknüpfte Datensätze sowie Unterseiten erhalten eine für Touch-Bedienung geeignete Oberfläche.

Tabellen bleiben im Mobil-Layout Tabellen. Spalten außerhalb des sichtbaren Bereichs können horizontal angezeigt werden. Ob weitere Blöcke ein eigenes mobiles Verhalten bieten, hängt von der Unterstützung des jeweiligen Blocks ab.

Seiten und Unterseiten

Inhalte, die über Aktionen zum Anzeigen, Bearbeiten oder Auswählen verknüpfter Datensätze geöffnet werden, erscheinen als mobile Unterseiten. Jede Unterseite bietet eine Schaltfläche, um zur vorherigen Seite zurückzukehren.

Beim Öffnen einer tieferen Unterseite wird die untere Tab-Leiste ausgeblendet, damit mehr Platz für den aktuellen Inhalt zur Verfügung steht. Beim Schließen der Unterseite oder beim Zurückkehren zur vorherigen Ebene wird die Tab-Leiste wieder angezeigt.

Beim Wechsel zwischen den unteren Tabs bleibt der Zustand bereits geöffneter Seiten erhalten. So können Sie zwischen mehreren mobilen Aufgaben wechseln, ohne den aktuellen Stand zu verlieren.

20260715222828_rec_

Routen und Berechtigungen verwalten

Mobile Routen können zentral im Routen-Manager verwaltet werden. Unter „Einstellungscenter / Routen / Mobile Routen“ können Sie Seiten und Links hinzufügen, bearbeiten, löschen, einblenden oder ausblenden und Seiten-Tabs konfigurieren.

Die Zugriffsrechte für mobile Routen werden getrennt von den Desktop-Routen konfiguriert. Öffnen Sie in den Rollenberechtigungen den Bereich „Mobile Routen“ und wählen Sie die Seiten aus, auf die die aktuelle Rolle zugreifen darf. Weitere Informationen finden Sie unter Berechtigungskonfiguration.

20260715223016_rec_

20260715223106_rec_

Zusammenhang mit dem Desktop-Layout

Desktop-Layout und Mobil-Layout können auf Grundlage derselben Datentabelle unterschiedliche Seiten bereitstellen. So kann das Desktop-Layout etwa eine Tabelle mit vielen Feldern für die Datenbearbeitung verwenden, während das Mobil-Layout eine einfachere Liste oder ein Formular für Eingaben vor Ort bietet.

Die Seiten der beiden Layouts werden nicht automatisch synchronisiert. Änderungen an Desktop-Seiten, -Menüs oder -Routen wirken sich nicht auf die mobile Konfiguration aus. Umgekehrt haben Änderungen am Mobil-Layout keine Auswirkungen auf das Desktop-Layout.

Empfehlung

Wenn Sie Desktop-Seiten nur gelegentlich per Smartphone anzeigen möchten, verwenden Sie zunächst das responsive Verhalten des Desktop-Layouts. Ein separates Mobil-Layout benötigen Sie nur für eine eigenständige Navigation und eigene Seitenabläufe auf Mobilgeräten.

Mobil-Layout

Mobil-Layout öffnen und in der Vorschau prüfen