agorum.composite.details.tabbedView

Diese Komponente erstellt Reiter aus einer übergebenen aguila-Widget-Konfiguration.

Verwendung

---

let widget = aguila.create({
   type: 'agorum.composite.details.tabbedView',
   name: 'tabbedView',
   width: 1000,
   height: 500,
   tabs: tabs,
   single: false,
   id: '1716952'
});

Parameter

---

tabs

Erwartet eine Definition der Reiter, die Sie dem Parameter tabs übergeben.

• Enthalten ist ein Array mit aguila-Widgets.
• Die Definition des Widgets erwartet wiederum die Parameter name, title und eine Liste von items, mindestens aber ein item.

name
Dient dem internen Verwalten und muss eindeutig sein.

Dadurch können Sie in einer customer-Konfiguration ein Widget überschreiben.

title
Erscheint im Reiter als Titel.

items
Definiert ein Array mit mehreren items.

• Jedes item definiert ein Widget und einen Selektor, anhand dessen das System das richtige Widget aussucht.
• Es besteht aus einem aon-Objekt, in dem ein Widget-Typ definiert ist. Dieser definiert ein aguila-Widget, das in diesem Reiter erscheint.
• Zusätzlich können Sie folgende Konfigurationen mitgeben:

name
Definiert einen eindeutigen Namen für das Widget.

aon
Definiert ein normales aguila-Widget.

Verwenden Sie ein registriertes Widget (siehe Beispiel aon).

selector

• Die Auswahl des Selektors findet von unten nach oben statt.
• Ein Selektor kann ein String oder ein Array mit Strings sein.
• Das System verwendet das Array, um einen OR-Fall abzudecken.

Wenn Sie diese Konfiguration über die MetaDb per Skript configured-settings.js laden, können Sie zusätzlich eine Reihenfolge (über den Parameter order) zum Laden mitgeben (etwa tabs[0].order = 2;).

Beispiel aon

aon: {
  type: 'agorum.composite.details.view.textEditor'
},

Beispiel selector

selector: '[nameExtension=/csv|js|json/][!isFolder]'

Im Beispiel verwendet das System das item, wenn es sich nicht um einen Ordner und um die Dateien mit der Dateiendung csv, js oder json handelt. Platzieren Sie den Default-Fall ganz oben, damit das System ihn erst am Schluss nimmt. Dieser benötigt keinen Selektor mehr.
 

Allgemeines Beispiel

// Einfaches Beispiel - ein normaler Tab 
let tabs = [
  {
    name: 'objectInfoTab',
    title: 'Objekt-Info',
    items: [
      {
        aon: {
          type: 'agorum.composite.details.view.objectInfoViewer'        
        }
      }
    ]
  },
  // Komplexeres Beispiel - ein Tab mit Selektoren
  {
    name: 'view', 
    title: 'Ansicht',
    items: [
      {
        // Default Fall, falls kein Selektor greift, wird dieses Widget erstellt
        aon: {
          type: 'agorum.composite.details.view.noView'
        }
      },
      {
// Ist das Objekt ein Ordner, so wird dieser Type mit entsprechender config aufgerufen.
        name: 'ac.folder',
        aon: {
          type: 'agorum.composite.details.view.dashboard',
          config: {
            dashboard: '/agorum/roi/customers/Standard/dashboard/folder.dashboard',
            embedded: true
          }
        },
        selector: '[isFolder]'
      }
    ]
  }
];

id

Ändert das angezeigte Objekt.

Beispiel

widget.id = '1509732';

single

Wert	Beschreibung
true	Zeigt nur den ersten Reiter, um zu vermeiden, dass bei einem einzelnen Reiter die Tab-Leiste oben erscheint. Sinnvoll, wenn nur der Reiter Ansicht erscheinen soll. Diesen Wert können Sie nachträglich nicht ändern. Sie müssen den Wert bei der Initialisierung mitgeben. Geben Sie bei Reitern nur eine Konfiguration mit, die nur einen Reiter enthält.
false (Standard)	Zeigt alle Reiter.

Beispiel für den Reiter „Ansicht“

let widget = aguila.create({
  type: 'agorum.composite.details.tabbedView',
  width: 1000,
  height: 500,
  name: 'tabbedView',
  single: true,
  tabs: [
    // laden der Standard-Konfiguration für den Ansichts-Tab
    require('/agorum/roi/customers/agorum.composite/js/aguila/details/widget-definition/view').settings()
  ]
});

Events (fire)

---

Dieses Widget empfängt keine Events.

Events (on)

---

Dieses Widget sendet keine Events.