Explorer-Darstellung anpassen (agorum.explorer)

Das Widget agorum.explorer steuert, wie Ordner und Dateien angezeigt werden, wenn Sie im Navigationsbaum im Explorer einen Ordner auswählen. Mithilfe des Widgets können Sie etwa festlegen,

• welche Ordner im Navigationsbaum als Wurzelordner angezeigt werden
• welcher Ordner im Ordnerinhalt angezeigt wird
• welcher Ordnerinhalt angezeigt wird (Sucheinschränkung etwa auf Ordner oder Dateien)
• wie viele Objekte pro Seite angezeigt werden
• ob das Detailfenster angezeigt wird

Verwendung

Wenn Sie den Explorer ohne weitere Einstellungen aufrufen, werden alle vorhandenen Wurzelordner angezeigt.

Einfache Verwendung

Explorer-Anzeige ohne Einschränkungen

Gezielte Ordneranzeige

Sie verwenden das Widget agorum.explorer wie folgt, um zu steuern, welche Ordner angezeigt werden:

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

let widget = aguila.create({
  type: 'agorum.explorer',
  // --- Properties
  // UUID des geöffneten Ordners (wird konvertiert, wenn nötig)
  id: '/agorum/roi/Files/Demo/Projekte',
  roots: ['/agorum/roi/Files/Demo'],
});
widget;

Die Property roots dient dazu, einen oder mehrere Ordner anzugeben, die in der Navigation als Wurzelordner angezeigt werden. Die id steuert, welcher Ordnerinhalt angezeigt wird. In diesem Beispiel ist der Wurzelordner für die Navigation der Ordner Demo, im Detailfenster werden die Inhalte aus dem Unterordner Projekte angezeigt. Alternativ können Sie auch mit config einen smart assistant konfigurator-Einsprungspunkt als Wurzelordner festlegen.

Beispiel für die Verwendung von agorum.explorer

Anzeigen des aufgeklappten Ordnerbaums

Mit der Funktion expand() können Sie einen Ordner angeben, bis zu dem die Ordnerstruktur aufgeklappt dargestellt werden soll.

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

let target = objects.find('ee7574f0-62f5-11f0-a328-00007f000101');

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

widget.id = target.UUID;
widget.expand(target.UUID);

widget;

Anzeige des aufgeklappten Ordnerbaums bis einschließlich Ordner 1

Anzeigen der Suche mit einem bestimmten Suchfilter

Sie können angeben, welche Ansicht geöffnet werden soll. Zudem können Sie einen bestimmten Suchfilter für die Anzeige in der Suchansicht verwenden.

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

let target = objects.find('24c0cec0-6c6f-11ef-b01a-00007f000101');

let widget = aguila.create({
  type: 'agorum.explorer',
  roots: ['714f1580-ce62-11e0-b47a-0800276e2399'],
  view: {
    type: 'search',
    parameters: {
      settingName: 'inbox-all',
    },
  },
});

widget.id = target.UUID;
widget.expand(target.UUID);

widget;

Suchansicht Eingang (alles)

Properties und Parameter

Sie können den Explorer-Aufruf durch folgende Eigenschaften anpassen. Diese Eigenschaften können nachträglich durch den Benutzer geändert werden.

roots: ['/agorum/roi/Files/Demo', '/agorum/roi/Files/DemoWorkflows'],

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

  view: {
    type: 'search',
    // zusätzlich immer eingeschränkt über inpath_uuid:<id>
    baseQuery: 'isfolder:false',
    parameters: {
      settingName: 'inbox-all', 
    },
  },

pageSize: 100,

Zusätzlich können Sie folgende Parameter angeben, die nachträglich nicht geändert werden können.

Funktionen

expand

Die Funktion expand() dient dazu, den Ordnerbaum automatisch von roots aus bis zum angegebenen Ordner aufzuklappen. Sie erwartet entweder eine komplette Pfad-ID (<uuid1>|<uuid2>|…) oder eine einzelne Ordner-ID, zu der der kürzeste sichtbare Pfad automatisch ermittelt wird. Die Funktion wird typischerweise kombiniert mit dem id-Attribut verwendet, das auf denselben Wert gesetzt wird, damit der geöffnete Ordner direkt selektiert ist und ggf. automatisch dorthin gescrollt wird.

widget.id = target.UUID;
widget.expand(target.UUID);

itemOverride

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

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

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

menuOverride

Die Funktion menuOverride wird verwendet, um Kontextmenüs anzupassen oder zu erweitern. Sie können damit zusätzliche Menüeinträge hinzufügen und bestehende Menüeinträge ändern oder entfernen. Die Funktion wird auf die Kontextmenüs sowohl im Navigationsbaum als auch in der Listenansicht angewendet.

Die Callback-Funktion erhält ein Array von Menüeinträgen, das Sie nach Bedarf anpassen können.

Jeder Menüeintrag hat Eigenschaften wie text (Anzeigetext), icon (Symbol), action (Funktion, die beim Klick ausgeführt wird) und weitere.

widget.menuOverride(items => {
  // Adds a new menu entry
  items.push({
    text: 'Eigene Aktion',
    icon: 'aguila-icon sentiment_satisfied',
    action: () => {
      console.log('Eigene Aktion wurde ausgeführt');
    },
  });
  
  return items;
});

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',
  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;

Beispiele

Beispiel: Anzeige des Detailfensters

Sie können durch Angabe von showDetails steuern, dass das Detailfenster angezeigt wird.

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

let widget = aguila.create({
  type: 'agorum.explorer',
  // --- Properties
  // UUID des geöffneten Ordners (wird konvertiert, wenn nötig)
  id: '/agorum/roi/Files/Demo',
  roots: ['/agorum/roi/Files'],
  // --- Parameter
  showDetails: true,
});
widget;

Explorer-Anzeige mit Detailfenster

Beispiel: Einschränkung der Anzeige in den Ordnerdetails

Sie können die Anzeige der Ordnerdetails anpassen, indem Sie die Suche anpassen. In diesem Beispiel werden Ordner nicht in den Ordnerdetails angezeigt, sondern nur die beiden vorhandenen Dateien:

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

let widget = aguila.create({
  type: 'agorum.explorer',
  // --- Properties
  // UUID des geöffneten Ordners (wird konvertiert, wenn nötig)
  id: '/agorum/roi/Files/Demo',
  roots: ['/agorum/roi/Files'],
  view: {
    type: 'search',
    // zusätzlich immer eingeschränkt über inpath_uuid:<id>
    baseQuery: 'isfolder:false',
  }
});
widget;

Explorer mit Ordnerinhalt-Anzeige ohne Unterordner

Beispiel: Verwendung von agorum.explorer in einer Form

Das Widget agorum.explorer 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',
      name: 'explorer',
      showDetails: true,
    },
  },
});

form.down('explorer').roots = ['/agorum/roi/Files/Demo'];

form;

Verwendung von agorum.explorer in einer Form

Beispiel: Anpassung der angezeigten Treffer pro Seite

Sie können die Anzahl der Objekte festlegen, die pro Seite angezeigt werden. Dies ist besonders nützlich, wenn Sie viele Objekte haben und die Ladezeiten optimieren oder wenn Sie mehr Objekte auf einmal sehen möchten.

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

let widget = aguila.create({
  type: 'agorum.explorer',
  // --- Properties
  id: '/agorum/roi/Files/Demo',
  roots: ['/agorum/roi/Files'],
  // displays 10 objects per page (instead of the default 50)
  pageSize: 10,
});
widget;

Beispiel: Anpassung des Kontextmenüs

Mit der Funktion menuOverride können Sie eigene Menüeinträge zum Kontextmenü hinzufügen. Dies ist nützlich, um anwendungsspezifische Aktionen bereitzustellen.

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

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

// Adds a custom context menu entry
widget.menuOverride((items, objects, parent) => {
  items.push({
    // Shows the menu item as inactive (true/false)
    disabled: false,

    // The handler that is called when the menu item is clicked
    handler: () => {
      let names = '';
      let parentName = '';

      if (objects) names = objects.map(item => item.name).join(', ');
      if (parent) parentName = parent.name;

      console.log('The following menu item was clicked: Objects: ' + names + ', Parent: ' + parentName);
    },

    // Icon for the menu entry
    icon: 'aguila-icon sentiment_satisfied',

    // Unique name for the menu entry
    name: 'my-menu-entry-1',

    // The text of the menu entry
    text: 'My new menu entry',
  });

  return items;
});

widget;