agorum.explorer.tree

Das Widget agorum.explorer.tree öffnet einen Navigationsbaum, also eine hierarchische Darstellung von Ordnern und Dateien. Sie können etwa angeben

• welche Ordner im Navigationsbaum als Wurzelordner angezeigt werden
• welcher Ordner im Inhalt angezeigt wird

Verwendung

---

Sie verwenden das Widget wie folgt, um einen Navigationsbaum anzuzeigen.

Sie müssen nicht zwingend weitere Einstellungen angeben. Standardmäßig werden alle Ordner angezeigt:

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.explorer.tree',
});

widget.on('idChanged', id => console.log('idChanged', id));

widget;

 

In der Praxis wollen Sie in der Regel nur eine bestimmte Sicht auf die Ordnerstruktur anbieten. Dazu haben Sie folgende Möglichkeiten.

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.explorer.tree',
  initiallyVisibleDepth: 1,
  //id: '7149be55-ce62-11e0-b47a-0800276e2399|50841ce0-02e0-11ef-81aa-02420a0a000e|8965dff0-69ef-11ef-94e4-02420a0a0010|990544e0-7f08-11ef-97ec-02420a0a0005|a84efef0-7f08-11ef-97ec-02420a0a0005',
  roots: ['home:MyFiles'],
  //config: 'Einstieg',
});

widget.on('idChanged', id => console.log('idChanged', id));

widget;

 

Events (fire)

---

Events, die Sie zum Widget senden können.

refresh

Aktualisiert das Widget.

Beispiel

widget.fire('refresh');

Das folgende Beispiel zeigt, wie das Widget in zwei aufeinanderfolgenden Phasen aktualisiert werden kann. Nach einer Sekunde ändert sich der Zustand des Widgets auf 'refresh-1', und nach zwei Sekunden auf 'refresh-2'. Bei jeder dieser Aktualisierungen wird eine spezielle CSS-Klasse zu den Elementen des Widgets hinzugefügt, die den aktuellen Zustand widerspiegelt.

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.explorer.tree',
  roots: [9999],
});

let stage = 'initial';

widget.itemOverride(item => {
  item.cls += ' test-' + stage;
  console.log('itemOverride', item);
});

widget.setTimeout(() => {
  stage = 'refresh-1';
  widget.fire('refresh');
}, 1000);

widget.setTimeout(() => {
  stage = 'refresh-2';
  widget.fire('refresh');
}, 2000);

widget;

Events (on)

---

idChanged

Löst aus, sobald ein anderes Objekt (bzw. andere ID) in der Navigation ausgewählt wird.

Beispiel:

widget.on('idChanged', id => console.log('idChanged', id));

In diesem Beispiel wird ein Log-Eintrag beim Öffnen der Baumansicht mit der ID des geöffneten Objekts geschrieben, im Verwendungsbeispiel wäre das die UUID des Ordners Eigene Dateien. Wenn ein Benutzer auf einen Unterordner klickt, etwa test, wird eine UUID-Liste bestehend aus der UUID des Ursprungsordners und der UUID des gewählten Ordners protokolliert:

idChanged 7149be55-ce62-11e0-b47a-0800276e2399|50841ce0-02e0-11ef-81aa-02420a0a000e

Mithilfe dieses Events könnten Sie etwa eine Vor- und Zurück-Logik entwickeln.

Properties und Parameter

---

config

Verweist auf einen smart assistant konfigurator-Einsprungspunkt über den Namen, der in smart assistant konfigurator definiert ist.

Beispiel für die Verwendung eines Einsprungspunkts

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.explorer.tree',
  config: 'Einstieg',
});

widget;

 

id

Gibt einen markierten Ordner an. Sie können den Ordner über den Pfad oder die ID angeben. Es muss sich dabei um den ID-Pfad (Navigationspfad) handeln, wie er etwa vom Event idChanged protokolliert wird.  Die Angabe ist optional.

Beispiel für die Markierung eines Ordners

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.explorer.tree',
  initiallyVisibleDepth: 1,
  id: '7149be55-ce62-11e0-b47a-0800276e2399|50841ce0-02e0-11ef-81aa-02420a0a000e',
  roots: ['home:MyFiles'],
});

widget;

 

initiallyVisibleDepth

Der Parameter gibt die Anzahl der Ordnerebenen an, die im Navigationsbaum angezeigt werden. Die sinnvollen Einstellungen sind 0 und 1, um unnötige Systemlasten zu vermeiden.

Beispiel mit Angabe 0

Beispiel mit Angabe 1

roots

Gibt einen oder mehrere Ordner an, die als Wurzelordner im Navigationsbaum angezeigt werden. Sie können Pfade oder IDs für die Angabe der Ordner verwenden. Die Angabe ist optional.

Beispiel für die Angabe von zwei roots-Ordnern

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.explorer.tree',
  initiallyVisibleDepth: 1,
  roots: ['/agorum/roi/Files/Demo', 'home:MyFiles'],
});

widget;

 

Funktionen

---

itemOverride

Die Funktion itemOverride wird verwendet, um eine oder mehrere Callback-Funktionen zu registrieren, die auf die Elemente im Baum angewendet werden. So können Sie mit itemOverride die Darstellung der Baum-Elemente basierend auf Ihrer spezifischen Logik oder dem Anwendungskontext anpassen. Sie könnten etwa Elemente mit verschiedenfarbigem Hintergrund darstellen, abhängig davon, ob der Benutzer Lese- oder Schreibzugriff auf ein Element hat.

widget.itemOverride(item => {
  item.cls += ' custom-class'; // adds a custom CSS class to all tree elements
});

In diesem Beispiel wird jeder Baumknoten um die CSS-Klasse custom-class erweitert. Für Informationen wie Sie die Styles ergänzen können siehe Styles von agorum core. anpassen.