agorum.explorer.list

Das Widget agorum.explorer.list zeigt eine Liste von Dateien und Ordnern an. Es kann für die Darstellung von dynamischen Suchergebnissen oder statischen Listen konfiguriert werden und eignet sich, um Benutzern eine geordnete Übersicht über Ordnerinhalte zu bieten.

Verwendung

Das Widget wird wie folgt verwendet, um eine Liste von Ordnern oder Dateien darzustellen. Sie können eine statische Liste anzeigen lassen, indem Sie die ID eines Ordners oder die IDs der entsprechenden Ordner angeben.

Wenn Sie nur einen Ordner über den Parameter id angeben, zeigt das Widget den Inhalt des angegebenen Ordners an (hier: home:MyFiles).

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

let widget = aguila.create({
  type: 'agorum.explorer.list',
  id: 'home:MyFiles',
});

widget;

Screenshot zum Verwendungsbeispiel für die Anzeige der Eigenen Dateien

Die Spalten in der Anzeige können standardmäßig sortiert und gruppiert werden. Dazu können die Benutzer die Spaltensortierung über den Spaltennamen oder dieses Menü verwenden:

Menü für die Spaltensortierung und Gruppierung

Anstatt die Inhalte eines oder mehrerer Ordner anzuzeigen, können Sie auch eine Suchabfrage angeben, um dynamische Inhalte basierend auf den Suchkriterien anzuzeigen.

Wenn Sie eine Suchabfrage mit dem Parameter query angeben, werden als Ergebnis alle Dateien und Ordner angezeigt, auf die das angegebene Suchkriterium zutrifft.

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

let widget = aguila.create({
  type: 'agorum.explorer.list',
  query: 'inpath:1122594',
});

widget;

Screenshot zum Verwendungsbeispiel zur Anzeige einer Suchergebnisliste

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.list',
  id: 'home:MyFiles',
});

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)

selectionChanged

Löst aus, sobald die Auswahl in der Navigation geändert wird.

Beispiel:

widget.on('selectionChanged', selection => console.log('selectionChanged', selection));

In diesem Beispiel wird beim Ändern der Auswahl die aktuelle Auswahl protokolliert.

selectionChanged 
Array [ "638fb340-2e09-11ef-8cf8-02420a0a000b" ]

Properties

Sie können die Listenanzeige durch folgende Eigenschaften anpassen.

id: 'home:MyFiles',

  ids: [
    'beca3860-3869-11ef-96ad-02420a0a000b',
    'f032f170-4fda-11ef-952a-02420a0a000f',
    '4d099110-f7e8-11ee-874b-02420a0a0007',
  ],

  query: 'nameextension:pdf',

config: 'Standard',

pageSize: 100,

sort: [
    {
      property: 'name',
      descending: true,
    },
  ],

  group: [
       { property: 'name', 
         descending: true 
        }
   ],

Funktionen

itemOverride

Die Funktion itemOverride wird verwendet, um eine oder mehrere Callback-Funktionen zu registrieren, die auf die Listenelemente angewendet werden. So können Sie mit itemOverride die Darstellung der Listenelemente 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 list elements
});

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

Beispiele

Beispiel: Auflisten mehrerer Ordner über die Angabe der IDs

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

let widget = aguila.create({
  type: 'agorum.explorer.list',
  ids: [
    'beca3860-3869-11ef-96ad-02420a0a000b',
    'f032f170-4fda-11ef-952a-02420a0a000f',
    '4d099110-f7e8-11ee-874b-02420a0a0007',
  ],
});

widget;

Beispiel für die Anzeige verschiedener Testordner

Beispiel: Gruppierte Listenanzeige nach Name

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

let widget = aguila.create({
  type: 'agorum.explorer.list',
  query: 'nameextension:pdf',
  sort: [{ property: 'name', descending: true }],
  group: [{ property: 'name', descending: false }],
});

widget.on('selectionChanged', selection => console.log('selectionChanged', selection));

widget

Nach Namen gruppierte Listenanzeige

Beispiel: Verwendung von agorum.explorer.list in einer Form

Das Widget agorum.explorer.list kann in einer Form verwendet werden, etwa wie folgt:

let aguila = require('common/aguila');
let form = aguila.create({
  type: 'agorum.border',
  width: 600,
  height: 400,
  docked: {
    top: {
      type: 'agorum.toolBar',
      items: [
        {
          type: 'agorum.button',
          text: '',
        },
      ],
    },
    bottom: {
      type: 'agorum.toolBar',
      items: [
        {
          type: 'agorum.button',
          text: '',
        },
      ],
    },
    left: {
      type: 'agorum.toolBar',
      items: [
        {
          type: 'agorum.button',
          text: '',
        },
      ],
    },
    right: {
      type: 'agorum.toolBar',
      items: [
        {
          type: 'agorum.button',
          text: '',
        },
      ],
    },
    center: {
      type: 'agorum.explorer.list',
      name: 'explorerList',
      config: 'Standard',
    },
  },
});

form.down('explorerList').id = '/agorum/roi/Files/Demo';

form;

Verwendung von agorum.explorer.list in einer Form