Layouts

Im Layouts-Bereich des Backend einer Anwendung werden die jeweiligen Frontend-Regionen der Anwendung und die in ihnen enthaltenen Elemente aufgelistet. Eine Übersicht über alle Elemente gibt es unter Elemente.

Note

Unterschiedliche Templates können durch unterschiedliche Regionen strukturiert sein. Die Demo-Anwendungen nutzen das selbe Layout. Nicht jedes Element kann in jeder Region verwendet werden. Mapbender achtet darauf.

Layout des Fullscreen Templates:

Obere Werkzeugleiste - Region für die Platzierung von Buttons, Links, HTML, …
Sidepane - Seitenleisten-Region für den Ebenenbaum, die Legende, die Suche, den Druck, HTML, …
Kartenbereich - Region für die Karte, die Maßstabsleiste, …
Fußzeile - Region für das Impressum, die Aktivitätsanzeige, die Maßstabsauswahl, …

Der mapbender-button-add Button rechts oberhalb des Bereichs ermöglicht das Hinzufügen von Elementen. Nach dem Klick auf den Button öffnet sich eine Dialogmaske, die die Auswahl eines Elements und dessen anschließende Konfiguration ermöglicht.

Alle eingebauten Funktionen lassen sich per Drag & Drop zwischen den Regionen verschieben.

Die Regionen können über den mapbender-button-edit Button in der oberen rechten Ecke individuell konfiguriert werden.

Die unterschiedlichen Regionen bieten folgende Konfigurationsmöglichkeiten:

Konfigurationsmöglichkeiten der Oberen Werkzeugleiste und Fußzeile

Die Regionen der Oberen Werkzeugleiste und der Fußzeile bieten folgende Konfigurationsmöglichkeiten über den mapbender-button-edit Button an:

Bildschirmtyp (Alle, Mobil, Desktop. Standard: Alle) Bei dieser Option wird der Bereich für die nicht ausgewählte Geräteart ausgeblendet. Alle zeigt die Region auf allen Geräten an.
Ausrichtung (Links, Rechts, Zentriert. Standard: Rechts): Die Ausrichtung definiert die Positionierung der Elemente innerhalb der Bereiche.
Menü: (No, nur Desktop, nur Mobil, Desktop + Mobil, Standard: nur Mobil) Elemente werden in ein aufklappbares Menü zusammengefasst.
Menütitel: Es lässt sich ein Text definieren, der dem Menü vorangestellt wird.

Tip

Hinweis: Das Ausklappmenü ist besonders sinnvoll, wenn die Anwendung für mobile Endgeräte ausgerichtet sein soll. Unter CSS-Editor findet sich ein Codebaustein, der die Bedienbarkeit bei Anwendungen mit vielen Elementen erhöht.

YAML-Konfiguration

Diese Vorlage kann zur Eigenschaftenkonfiguration der Oberen Werkzeugleiste in einer YAML-Anwendung verwendet werden:

- name: toolbar
  properties:
    item_alignment: right # right/left/center - Standard right
    screenType: all # all/desktop/mobile - Standard all
    generate_button_menu: only_mobile # no/yes/only_desktop/only_mobile - Standard only_mobile
    menu_label: "Menu" # NULL oder Text

Außerdem kann diese Vorlage verwendet werden, um eine Eigenschaftenkonfiguration für die Fußzeile einer YAML-Anwendung vorzunehmen:

- name: footer
  properties:
    item_alignment: right # right/left/center - Standard right
    screenType: all # all/desktop/mobile - Standard all
    generate_button_menu: only_mobile # no/yes/only_desktop/only_mobile - Standard only_mobile
    menu_label: "Menu" # NULL oder Text

Sidepane-Konfigurationsmöglichkeiten

Die Ansichtsoptionen für die Sidepane können im Sidepane-Bereich im Mapbender-Backend ausgewählt werden. Dazu genügt ein Klick auf den mapbender-button-edit Button:

Typ: Siehe Funktionsbeschreibung unten.
Bildschirmtyp (Alle, Mobil, Desktop. Standard: Alle) Bei dieser Option wird der Bereich für die nicht ausgewählte Geräteart ausgeblendet. Alle zeigt die Region auf allen Geräten an.
Breite (in Pixeln, Standard: 350 px) Definiert über einen Pixelwert die Breite der Sidepane in der Anwendung.
Größe veränderbar (Standard: true): Erlaubt das Verbreitern und Verkleinern der Seitenleiste.
Position (Links, Rechts. Standard: Links) gibt an, ob die Sidepane am linken oder rechten Bildschirmrand angezeigt wird.
Geschlossen starten (No, nur Desktop, nur Mobil, Desktop + Mobil) Verhalten der Sidepane bei Anwendungsstart - zugeklappt / aufgeklappt.

Die Option Typ zeigt die Sidepane-Elemente in unterschiedlichen Ansichten an:

Buttons zeigt alle hinzugefügten Elemente über Buttons.
Akkordeon zeigt alle hinzugefügten Elemente in Reitern.
Liste zeigt alle Elemente als Liste. Das aktive Element nimmt den gesamten Bereich der Sidepane ein.
Unformatiert verzichtet auf Styling-Optionen und zeigt die Elemente direkt und in der im Backend gewählten Reihenfolge untereinander an.

Die Option Größe verändern geht von einer minimalen Breite von 120 px und einem Maximum von 95 % der Bildschirmbreite aus. Diese Werte können über CSS angepasst werden:

.sidePane.resizable {
  min-width: 200px;
  max-width: 500px;
}

YAML-Konfiguration

Diese Vorlage kann zur Eigenschaftenkonfiguration der Sidepane in einer YAML-Anwendung verwendet werden:

- name: sidepane
  properties:
    name: accordion # tabs (für Button) / accordion (für Akkordeon) / NULL (für unformatiert)
    align: right # right/left
    closed: no # no/yes/only_desktop/only_mobile
    screenType: all # all/desktop/mobile
    width: "654px"

Element-Buttonleiste

Jedem Element kann ein konfigurierter Button zugewiesen werden. Die Buttonleiste dient der Konfiguration dieser Buttons.

Dabei verfügen die Buttons über folgende Optionen:

Bearbeiten: Erlaubt die Anpassung des Elements.
Auf Mobilgeräten anzeigen: Zeigt Elemente nur auf mobilen Geräten an.
Auf großen Bildschrimen anzeigen: Zeigt Elemente nur auf Desktop-Geräten an.
Zugriff auf das Element einschränken: Erlaubt die Konfiguration von Element-Sichtbarkeiten bei bestimmten Berechtigungen.
Aktiv/inaktiv: Ein aktives Element ist in der Anwendung freigeschaltet. Ein inaktives Element kann zwar bearbeitet werden, ist aber in der Anwendung ausgeblendet.
Element duplizieren: Erstellt eine Kopie des Elements mit den gleichen Einstellungen.
Löschen: Entfernt ein Element vom Back- und Frontend.

Bearbeiten

Öffnet über den mapbender-button-edit Button die individuelle Konfigurationsmaske eines Elements. Diese finden Sie in der Dokumentation des jeweiligen Elements unter Elemente.

Zugriff auf das Element einschränken

Öffnet über den mapbender-button-key Button einen Element sichern-Dialog, der ein explizites Konfigurieren der Ansehen-Regel in Rechteverwaltung für Benutzer und Gruppen ermöglicht.

Ist dies nicht konfiguriert, hat das Element keine expliziten Zugangsbeschränkungen und sollte allen Benutzern und Gruppen zur Verfügung stehen.

Sofern die View-Regel für bestimmte Benutzer oder Gruppen gesetzt ist, können ausschließlich dort Eingetragene auf das Element zugreifen.

Beschränken Sie den Zugriff, indem Sie Benutzer über den mapbender-button-add Button hinzufügen. Eine gesetzte Checkbox zeigt an, dass die benötigten Berechtigungen zur Verfügung stehen.

Der Schlüssel wird nach erfolgreicher Rechtevergabe rot. Wenn Sie nun den Cursor über den Schlüssel halten, sehen Sie die Namen der berechtigten Nutzer in einem Pop-Up Fenster.

Detaillierte Informationen zu den Sicherheitseinstellungen finden sich unter Rechteverwaltung.