agorum.composite.form.element.splitGrid

Dieses Element stellt Positionen (Zeilen) in Listenform dar und erlaubt das Aufsplitten der Postionen, etwa für die Zuweisung von verschiedenen Kostenstelle bei der Kontierung.

Sie legen beim Erstellen einer splitGrid-Oberfläche fest, welche Spalten (Felder) in der Oberfläche angezeigt werden und welche dieser Felder aufgesplittet werden. Dabei gibt es zwei Möglichkeiten, abhängig vom Typ des aufgesplitteten Felds:

• Zahlenbeträge können so aufgesplittet werden, dass sich die Gesamtsumme aus den aufgesplitteten Beträgen ergibt
• Textfelder können so aufgesplittet werden, dass die Beschreibung für jede aufgesplittete Zeile durch den Benutzer angepasst werden kann, etwa zum Eintragen unterschiedlicher Kostenstellen. Dabei kann der Wert der Ursprungsposition optional übernommen werden, wenn häufig keine Anpassung erforderlich ist.

agorum.composite.form.element.splitGrid basiert auf agorum.composite.form.element.grid und erbt dessen Eigenschaften und Funktionen sowie die grundlegenden Eigenschaften von element.

Unterschiede zwischen splitList und splitGrid

Die beiden Möglichkeiten zur Oberflächengestaltung, agorum.composite.form.element.splitGrid und agorum.composite.form.element.splitList, unterscheiden sich darin, wie Benutzer die Informationen anzeigen lassen und bearbeiten können.

Beispiel einer Oberfläche

Beispiel einer Oberfläche

Beim Schließen einer fehlerhaften Ansicht erhalten Sie folgenden Hinweis:

Hinweis über eine ungültige Eingabe

Skript zur Oberfläche

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

let form = aguila.create({
  type: 'agorum.composite.form.basic',
  name: 'form',
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.splitGrid',
      name: 'splitGrid',
      disableSplit: false,
      showRowDelete: true,
      showAppend: true,
      copyDiffValues: false,
      template: [
        // Es muss mindestens ein festes Feld geben, das pro Position eindeutig ist, etwa eine Positionsnummer.
        {
          type: 'agorum.composite.form.element.text',
          label: 'Nummer',
          name: 'number',
          readOnly: true,
        },
        {
          type: 'agorum.composite.form.element.text',
          label: 'Beschreibung',
          name: 'description',
          readOnly: true,
        },
        {
          type: 'agorum.composite.form.element.number',
          label: 'Menge',
          name: 'quantity',
          // Der Wert dieser Spalte ergibt sich aus allen Summen der aufgesplitteten Werte dieser Spalte.
          split: 'sum',
        },
        {
          type: 'agorum.composite.form.element.number',
          label: 'Einzelpreis',
          name: 'net_price',
          readOnly: true,
        },
        {
          type: 'agorum.composite.form.element.number',
          label: 'Gesamtpreis',
          name: 'net_amount',
          readOnly: true,
          // Der Wert dieser Spalte ergibt sich aus allen Summen der aufgesplitteten Werte dieser Spalte.
          split: 'sum',
        },
        {
          type: 'agorum.composite.form.element.text',
          label: 'Kostenstelle',
          name: 'cost_center',
          // Der Wert dieser Spalte soll pro aufgesplitteter Position unterschiedlich sein.
          split: 'diff',
          validation: [
            {
              required: true,
            },
          ],
        },
      ],
    },
  ],
});

// Konsole vom Browser aufrufen, um Werte zu sehen
form.on('valueChanged', value => {
  console.log('values', value);
});

// Manuelle Erstellung von Testdaten
// Wichtig ist, dass die Bezeichnungen wie number / description dem name der splitGrid-Elementen entspricht.
// Dadurch können die Werte den entsprechenden Spalten zugeordnet werden.
// Die Namensgebung ist frei und kann beliebig angepasst werden.
setImmediate(() => {
  form.set('splitGrid.value', [
    {
      number: '01',
      description: 'Position 1',
      quantity: 10,
      net_price: 100,
      net_amount: 1000,
    },
    {
      number: '02',
      description: 'Position 2',
      quantity: 20,
      net_price: 50,
      net_amount: 1000,
    },
  ]);
});

form;

Beispiel einer Oberfläche mit benutzerdefiniertem Editor

Dieses Beispiel zeigt ein splitGrid mit benutzerdefiniertem Editor-Popup. Per Doppelklick auf eine Zeile öffnet sich statt der Standard-Detailansicht ein list-Widget als Popup-Editor.

Aufbau:

• 6 Spalten: Nummer, Beschreibung (readOnly), Menge (split: 'sum'), Einzelpreis (readOnly), Gesamtpreis (split: 'sum'), Kostenstelle (split: 'diff')
• 2 Testzeilen mit Rechnungspositionen
• Geteiltes Template: TEMPLATE wird sowohl für das splitGrid als auch für den Editor verwendet (TEMPLATE.concat() erzeugt eine Kopie)

editor-Parameter:

editor: {
  type: 'agorum.composite.form.element.list',
  showAppend: true,
  showRowDelete: true,
  template: TEMPLATE.concat(),
},

Verhalten:

• Doppelklick auf eine Zeile → Editor öffnet als Popup mit den Zeilen als value
• Änderungen im Popup werden beim Schließen ins splitGrid zurückgeschrieben
• Split-Funktionalität (sum/diff) bleibt vollständig erhalten

Öffnen einer benutzerdefinierten Eingabe mit editor

Skript zur Oberfläche

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

// shared template for splitGrid and editor
let TEMPLATE = [
  {
    type: 'agorum.composite.form.element.text',
    label: 'Nummer',
    name: 'number',
    readOnly: true,
  },
  {
    type: 'agorum.composite.form.element.text',
    label: 'Beschreibung',
    name: 'description',
    readOnly: true,
  },
  {
    type: 'agorum.composite.form.element.number',
    label: 'Menge',
    name: 'quantity',
    // sum: total equals sum of all split rows
    split: 'sum',
  },
  {
    type: 'agorum.composite.form.element.number',
    label: 'Einzelpreis',
    name: 'net_price',
    readOnly: true,
  },
  {
    type: 'agorum.composite.form.element.number',
    label: 'Gesamtpreis',
    name: 'net_amount',
    readOnly: true,
    // sum: total equals sum of all split rows
    split: 'sum',
  },
  {
    type: 'agorum.composite.form.element.text',
    label: 'Kostenstelle',
    name: 'cost_center',
    // diff: each split row can have a different value
    split: 'diff',
    validation: [
      {
        required: true,
      },
    ],
  },
];

let form = aguila.create({
  type: 'agorum.composite.form.basic',
  name: 'form',
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.splitGrid',
      name: 'splitGrid',
      disableSplit: false,
      showRowDelete: true,
      showAppend: true,
      copyDiffValues: false,
      template: TEMPLATE,

      // editor: opens as popup on double-click, receives value (array of rows)
      editor: {
        type: 'agorum.composite.form.element.list',
        showAppend: true,
        showRowDelete: true,
        template: TEMPLATE.concat(),
      },
    },
  ],
});

// set test data
setImmediate(() => {
  form.set('splitGrid.value', [
    {
      number: '01',
      description: 'Position 1',
      quantity: 10,
      net_price: 100,
      net_amount: 1000,
    },
    {
      number: '02',
      description: 'Position 2',
      quantity: 20,
      net_price: 50,
      net_amount: 1000,
    },
  ]);
});

form;

splitGrid Parameter

Zusätzlich zu den Parametern von element können Sie folgende Parameter verwenden:

Parameter	Beschreibung	Mögliche Werte
copyDiffValues	Steuert das Verhalten beim Aufsplitten von Positionen für Spalten, für die der split Parameter mit dem Wert diff gesetzt ist. Dient dazu, den Wert der Spalte, für die diff gesetzt ist, beim Aufsplitten in alle aufgeteilten Zeilen zu übernehmen.	Boolescher Wert, Standardwert: false
disableSplit	Blendet die Schaltfläche zum Splitten aus.	Boolescher Wert, Standardwert: false
label	Angezeigter Name (Label) der Grid-Liste. Optional.	Zeichenkette
readOnly	Dient zur Anzeige der Split-Liste im Lesemodus, wodurch das Aufsplitten der Positionen verhindert wird.	Boolescher Wert, Standardwert: false
showAppend	Blendet das Symbol + zum Hinzufügen von Zeilen in der Listenansicht und im Header der jeweiligen Position ein.	Boolescher Wert, Standardwert: false
showRowDelete	Blendet das Symbol Zeile löschen in der Detailansicht ein, wodurch Benutzer komplette Positionen oder Aufteilungen löschen können.	Boolescher Wert, Standardwert: false
editor	Definiert ein benutzerdefiniertes Widget, das anstelle der Standard-Detailansicht zum Bearbeiten einer Position verwendet wird. Beim Doppelklick auf eine Zeile erstellt das System das angegebene Widget, setzt dessen value auf die zu bearbeitenden Zeilen und öffnet es als Popup. Beim Schließen des Popups werden die geänderten Werte zurück in die Grid-Liste übernommen.	Widget-Definition (Objekt), z. B. { type: 'agorum.composite.form.element.list' }
selection	Enthält die Indizes der aktuell selektierten Einträge in der Grid-Liste. Das Array kann einen oder mehrere Indizes enthalten, z. B. wenn ein Split-Header angeklickt wird (dann enthält es die Indizes aller Einträge des Blocks).	Array von Ganzzahlen (Indizes)
template	Definiert die Spalten einer Zeile. Darin enthalten sind form-Elemente oder aguila-Widgets.	Siehe template Parameter

Parameter von form-Elementen in template

validation: [
  {
    required: true
  }
]

splitGrid Events

Events aus agorum.composite.form.element.grid und element gelten. 

splitGrid Funktionen

Folgende Funktion steht speziell für die Split-Funktionalität zur Verfügung: