Integration | Nextcloud anpassen

Integration | Nextcloud bringt das aguila-Widget agorum.nextcloud.nextcloudObjectPicker mit. Damit wählen Anwender in Ihren eigenen Oberflächen Ordner oder Dateien auf einem Nextcloud-Server aus, ähnlich wie mit agorum.composite.form.element.objectPicker in agorum core.

Nextcloud Object Picker einbinden

Der Nextcloud Object Picker von Integration | Nextcloud besteht aus einem Eingabefeld, einer Schaltfläche zum Öffnen des Auswahldialogs und einer Schaltfläche zum Löschen des Werts. Der Dialog zeigt links den Ordnerbaum und rechts den Inhalt des gewählten Ordners; Ordner lädt er über WebDAV nach.

Das Widget ist ein Formularelement auf Basis der Form-Factory von agorum.composite.form. Sie binden es über seinen type ein; label, placeholder, tooltip und validation verhalten sich wie bei den Formularelementen von agorum.composite.form.

{
  type: 'agorum.nextcloud.nextcloudObjectPicker',
  name: 'folderPicker',
  nextcloudURL: 'https://cloud.example.com',
  nextcloudUser: 'doc-test',
  nextcloudPW: 'passwort',
  nextcloudBaseFolder: '/',
  nextcloudObject: 'folder',
}

Properties des Nextcloud Object Pickers

Der Nextcloud Object Picker von Integration | Nextcloud kennt folgende Properties. Alle lassen sich nach dem Erzeugen ändern, etwa Zugangsdaten, die erst zur Laufzeit bekannt sind.

Property	Typ	Standard	Beschreibung
nextcloudURL	String	–	Pflicht. Adresse des Nextcloud-Servers mit Protokoll
nextcloudUser	String	–	Pflicht. Benutzername
nextcloudPW	String	–	Pflicht. Passwort oder App-Passwort
value	String	''	Gewählter Pfad; beim Öffnen navigiert der Dialog dorthin
nextcloudBaseFolder	String	'/'	Startordner; darüber lässt sich nicht navigieren
nextcloudObject	String	'folder'	'folder' wählt Ordner, der Dialog blendet Dateien aus; 'file' wählt Dateien
nextcloudObjectFilter	String	''	Regulärer Ausdruck für Dateinamen, nur bei 'file'; Ordner bleiben zur Navigation sichtbar
nextcloudUserEdit	Boolean	false	Erlaubt die direkte Eingabe eines Pfads; er wird gegen Startordner und Server geprüft, ein ungültiger Pfad bleibt stehen und wird als Fehler markiert
readOnly	Boolean	false	Blendet die Schaltflächen aus, Feld schreibgeschützt
disabled	Boolean	false	Deaktiviert das Widget
validation	Array	–	Prüfungen wie bei agorum.composite.form, etwa [{ required: true }] für ein Pflichtfeld
tooltip	String	''	Tooltip
width	Number	–	Breite des Felds in Pixel
pickerWidth, pickerHeight	Number	800, 500	Größe des Dialogs in Pixel

Das Event valueChanged löst aus, sobald sich der Pfad ändert: durch Auswahl im Dialog, Eingabe, Löschen oder Setzen von value.

Beispiel: PDF-Datei aus Nextcloud wählen

Das folgende Beispiel zeigt einen Nextcloud Object Picker von Integration | Nextcloud, der nur PDF-Dateien unterhalb von /Documents anbietet und den gewählten Pfad ausgibt:

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

let widget = aguila.create({
  type: 'agorum.vbox',
  width: 500,
  items: [
    {
      type: 'agorum.nextcloud.nextcloudObjectPicker',
      name: 'pdfPicker',
      nextcloudURL: 'https://cloud.example.com',
      nextcloudUser: 'doc-test',
      nextcloudPW: 'passwort',
      nextcloudBaseFolder: '/Documents',
      nextcloudObject: 'file',
      nextcloudObjectFilter: '\\.pdf$',
      validation: [{ required: true }],
    },
  ],
});

let picker = widget.down('pdfPicker');
picker.on('valueChanged', () => {
  console.log('Gewählt:', picker.value);
});

widget;

Im Modus 'folder' wählt ein Klick einen Ordner, ein Doppelklick übernimmt ihn. Im Modus 'file' dienen Ordner zur Navigation, ein Doppelklick auf eine Datei übernimmt sie. Escape schließt den Dialog ohne Änderung.