agorum.composite.form.element.objects

Dieses Element stellt ein Fenster zum Wählen von Objekten in agorum core dar. Durch das Wählen der Objekte stellen Sie eine Liste zusammen, die Sie etwa für einen Workflow verwenden können. Die gewählten Objekte fügen Sie über eine Ordnerstruktur, eine Suche oder per Drag-and-drop in das Auswahlfenster ein.

agorum.composite.form.element.objects erbt alle grundlegenden Eigenschaften von element.

Einen Workflow zu diesem Element finden Sie unter Workflow „Attachments über ein UI hinzufügen und entfernen“.

Beispiel einer Oberfläche

---

Skript zur Oberfläche

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

let form = aguila.create({ 
  type: 'agorum.composite.form.basic',
  width: 800,
  height: 600,
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.objects',
      name: 'objects',
      height: 200,
      listConfig: 'Standard',
      allowedNames: [
        '\\.pdf$',
        '\\.doc$',
        '\\.docx$'
      ],
      // allowMove: true,
      // listReadOnly: true,
      // hideRemove: true,
      /*
      texts: {
        selectSearch: 'Ordner suchen',
        selectFolder: 'Ordner auswählen', 
        removeSelection: 'Ordner löschen',
        upload: 'Lokale Dateien hochladen'
      },
      */
      /*
      icons: {
        selectSearch: 'aguila-icon https',
        // selectFolder: 'aguila-icon https',
        // removeSelection: 'aguila-icon https',
        // upload: 'aguila-icon file_upload'
      },
      */
      searchConfig: {
        additionalBaseQuery: 'isfolder:true',
        filterCollapsed: true,
        settingName: 'inbox-all',
        detailsWidget:  {
          type: 'agorum.composite.details',
          width: 600
        },
        //pickerWidth: 800,
        //pickerHeight: 600 
      },
      folderConfig: {
        selectors: [
        '[isFolder=true]',
        '[name=Demo]' 
        ],
        startFolder: '/agorum/roi/workspace',
        // baseFolder: '/',
        //pickerWidth: 500, 
        //pickerHeight: 400 
      },
      uploadConfig: {
        browse: true, // Schaltfläche für lokalen Dateiupload anzeigen
        drop: true // Drag-and-drop auf die Liste ermöglichen
      }
    }
  ]
});

form;

Parameter

---

Alle Parameter in element gelten. Zusätzlich gelten die folgenden Parameter.

form

Legt das Aussehen des Auswahlfensters fest.

Sie können das zu verwendende Design, die Höhe, Breite und die Labelposition angeben.

Beispiel

let form = aguila.create({   
  type: 'agorum.composite.form.basic',   
  width: 800,   
  height: 600,   
  labelPosition: 'top',

type

Definiert, dass es sich um ein Element handelt.

Sie können die Anzeige des Fensters mit name und height anpassen.

Beispiel

type: 'agorum.composite.form.element.objects',      
name: 'objects',       
height: 200,

listReadOnly

Wert	Beschreibung
true	Drag-and-drop und Entfernen sind NICHT möglich.
false	Drag-and-drop und Entfernen sind möglich.

hideRemove

Wert	Beschreibung
true	Blendet die Schaltfläche Löschen ein.
false	Blendet die Schaltfläche Löschen aus.

allowMove

Wert	Beschreibung
true	Blendet zwei Schaltflächen ein, mit denen der Benutzer die markierten Objekte innerhalb der Liste nach oben oder unten verschieben kann.
false	Blendet die Schaltflächen aus.

pickerWidth, pickerHeight

Definiert optional die Breite und Höhe des Suchfensters oder der Ordnerübersicht, wenn ein Benutzer auf die Schaltfläche zum Wählen klickt. 

• Das System definiert automatisch eine optimale Breite und Höhe, wenn Sie keine Werte angeben.
• Sie können die Breite und Höhe des Suchfensters unabhängig von der Breite und Höhe der Ordnerübersicht einstellen.
• Sie können diesen Parameter nachträglich ändern.

Beispiel

pickerWidth = 800;
pickerHeight = 600;

allowedNames

Definiert reguläre Ausdrücke erlaubter Namen als String.

• Sie müssen die regulären Ausdrücke codieren ( \ mit etwa \\).
• Das System vergleicht die regulären Ausdrücke Case-sensitiv.
• Das System gibt eine entsprechende Meldung aus und formt das Element um in valid=false, wenn eine hinzugefügte Datei hinzukommt und keines der Suchmuster von allowedNames passt.

Beispiel

allowedNames: [
  '\\.pdf$',
  '\\.doc$',
  '\\.docx$'
],

texts

Passt optional den Text an, der erscheint, sobald die Maus über eine der folgenden Schaltflächen fährt:

• Suche
• Ordner-Auswahl
• Löschen
• Upload

Beispiel

texts: {         
   selectSearch: 'Ordner suchen',         
   selectFolder: 'Ordner auswählen',         
   removeSelection: 'Ordner löschen',
​​​​​​   upload: 'Lokale Dateien hochladen'

icons

Passt optional die Symbole der folgenden Schaltflächen an:

• Suche
• Ordner-Auswahl
• Löschen
• Upload

Zum Anpassen der Symbole in der Oberfläche siehe Symbole anpassen.

Beispiel

icons: {      
  selectSearch: 'aguila-icon https',      
  selectFolder: 'aguila-icon add',      
  removeSelection: 'aguila-icon https',
  upload: 'aguila-icon file_upload'

searchConfig

Definiert optional die Parameter für die Suche nach Elementen, die ein Benutzer zur Liste hinzufügen kann.

• Die Schaltfläche zum Suchen erscheint nicht, wenn Sie searchConfig nicht definiert haben.
• Beispiel siehe Beispiel einer Oberfläche

Zu searchConfig existieren weitere Parameter:

additionalBaseQuery

Wert	Beschreibung
isfolder:true	Der Benutzer darf nur nach der angegebenen Objektart suchen.
isfolder:false	Der Benutzer darf nach allem außer der angegebenen Objektart suchen.

filterCollapsed

Wert	Beschreibung
true	Blendet den Filter auf der linken Seite ein.
false	Blendet den Filter auf der linken Seite aus.

settingName

Definiert, welcher Filter bei der Suche zuerst erscheint.

Der zuletzt verwendete Filter des Benutzers erscheint als Erstes, wenn Sie nichts angeben.

Beispiel:

settingName: 'inbox-all',

detailsWidget

Passt die Detailansicht auf der rechten Seite an.

detailsWidget:  {           
  type: 'agorum.composite.details', // Typ der Detailansicht           
  width: 600 // Breite der Detailansicht
},

pickerWidth, pickerHeight

Definiert optional die Breite und Höhe des Suchfensters oder der Ordnerübersicht, wenn ein Benutzer auf die Schaltfläche zum Wählen klickt. 

• Das System definiert automatisch eine optimale Breite und Höhe, wenn Sie keine Werte angeben.
• Sie können die Breite und Höhe des Suchfensters unabhängig von der Breite und Höhe der Ordnerübersicht einstellen.
• Sie können diesen Parameter nachträglich ändern.

Beispiel:

pickerWidth = 800;
pickerHeight = 600;

folderConfig

Definiert die Parameter für die Auswahl einer Datei aus der Ordner- / Baum-Auswahl.

• Die Schaltfläche für die Ordner-Auswahl erscheint nicht, wenn Sie searchConfig nicht definiert haben.
• Der Parameter beeinflusst den Startordner bei folderConfig und bei searchConfig. 
• Bei 'folder' erscheint der Verzeichnisbaum erst ab diesem Ordner.
• Das System beachtet bei der Eingabe in das Feld die baseFolder-Einstellungen. Der Benutzer kann nur das eingeben, was laut Anzeige funktioniert.
• Das System wählt bei Auswahl eines Objekts den bestmöglichen Startordner und übersetzt diesen. Die interne Ordnerangabe /agorum/roi/Files/Demo führt etwa zu Dateien/Demo.
• Eingaben, die nicht korrekt sind, invalidieren das Eingabefeld mit dem Text Objekt nicht gefunden.
• Sie können diesen Parameter nachträglich ändern.
• Beispiel siehe Beispiel einer Oberfläche

Zu folderConfig existieren weitere Parameter:

pickerWidth, pickerHeight

Definiert optional die Breite und Höhe des Suchfensters oder der Ordnerübersicht, wenn ein Benutzer auf die Schaltfläche zum Wählen klickt. 

• Das System definiert automatisch eine optimale Breite und Höhe, wenn Sie keine Werte angeben.
• Sie können die Breite und Höhe des Suchfensters unabhängig von der Breite und Höhe der Ordnerübersicht einstellen.
• Sie können diesen Parameter nachträglich ändern.

Beispiel:

pickerWidth = 800;
pickerHeight = 600;

selectors

Definiert Selektoren für die Prüfung, ob das gewählte Objekt mit den Selektoren übereinstimmt.

Die Schaltfläche Ok zur Übernahme des Objekts aktiviert sich erst, wenn einer der Selektoren greift.

Beispiel:

selectors: [       
'[isFolder=true]',         
'[name=Demo]'          
],

startFolder

Definiert, in welchem Ordner Sie sich befinden, wenn sich der Picker öffnet.

Beispiel:

startFolder: '/agorum/roi/workspace',

baseFolder (optional)

Definiert den Basisordner, ab dem der Baum beginnt.

• Die Anzeige ab dem Basisordner gilt, wenn Sie baseFolder angeben.
• Wenn Sie nichts angeben, gelten die Startordner der aktiven agorum core smart assistant-Konfiguration.
• Die Angabe von baseFolder hat Einfluss auf die Anzeige, wenn Sie displayProperty='anyFolderPath' verwenden.

Beispiel:

baseFolder = 'home:MyFiles';

uploadConfig

Wert	Beschreibung
browse: true	Blendet die Schaltfläche zum Hochladen von Dateien ein.
browse: false (Standard)	Blendet die Schaltfläche zum Hochladen von Dateien aus.
drop: true	Ermöglicht Drag-and-drop auf die Liste.
drop: false	Ermöglicht KEIN Drag-and-drop auf die Liste.

selectors

Definiert Selektoren für die Prüfung, ob das gewählte Objekt mit den Selektoren übereinstimmt.

Die Schaltfläche Ok zur Übernahme des Objekts aktiviert sich erst, wenn einer der Selektoren greift.

Beispiel

selectors: [       
'[isFolder=true]',         
'[name=Demo]'          
],

Symbole anpassen

---

1. Klicken Sie oben rechts in der Kopfleiste auf und dann auf Icon auswählen.
2. Klicken Sie das gewünschte Symbol an.
3. Kopieren Sie den Text, der oben im Feld erscheint.
4. Fügen Sie den kopierten Text anstelle der momentan verwendeten Symbol-Bezeichnung in das Skript ein.

Events

---

Alle Events in Grundlegende Eigenschaften gelten. Zusätzlich gilt das folgende Event.

selectionChanged

Löst aus, wenn ein Benutzer ein oder mehrere Objekte in der Liste wählt.

Sie erhalten deren UUID in einem Array zurück.

Beispiel 1

Dieses Skript erzeugt ein einfaches Widget mit einer Datei-Liste des persönlichen Verzeichnisses des aktuellen Benutzers und gibt es zurück.

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

let folder = objects.find('home:/');

let attachments = aguila.create({
  name: 'attachments',
  type: 'agorum.composite.form.element.objects',
  id: folder.ID,
});

attachments;

Beispiel 2

Dieses Skript reagiert auf alle Events einer Explorer-Liste und protokolliert es in der Konsole.

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

let folder = objects.find('home:/');

let attachments = aguila.create({
  name: 'attachments',
  type: 'agorum.composite.form.element.objects',
  id: folder.ID,
  pageSize: 10,
});

/**
 * Listen to all events and print the values to the console
 */
attachments.on('valueChanged', value => {
  console.log('Valued Changed', value);
});

attachments.on('configChanged', configName => {
  console.log('Config Changed', configName);
});

attachments.on('groupChanged', group => {
  console.log('Group Changed', group);
});

attachments.on('idChanged', id => {
  console.log('ID Changed', id);
});

attachments.on('idsChanged', ids => {
  console.log('IDs Changed', ids);
});

attachments.on('pageChanged', page => {
  console.log('Page Changed', page);
});

attachments.on('pageSizeChanged', pageSize => {
  console.log('Page Size Changed', pageSize);
});

attachments.on('queryChanged', queryString => {
  console.log('Query Changed', queryString);
});

attachments.on('sortChanged', sort => {
  console.log('Sort Changed', sort);
});

attachments.on('selectionChanged', selection => {
  console.log('Selection Changed', selection);
});

attachments;