agorum.composite.form.element.list

Dieses Element stellt eine Liste von Werten dar. Sie können damit:

jede andere Art von Element innerhalb der Liste verwenden
Positionen der Liste verschieben
Positionen der Liste löschen
beliebig lange Listen mit Blätter-Funktion darstellen
Aktions-Schaltflächen innerhalb der Listenpositionen verwenden
das Element im Zusammenhang mit Metadaten-Definitionen verwenden

Sie können das list-Element ebenfalls mit metadata-edit verwenden, wenn es ein Metadatum vom Typ list ist.

agorum.composite.form.element.list erbt alle Grundeigenschaften von element.

Zum Suchen nach einem list-Metadatum siehe Suchsyntax in Solr verwenden.

Beispiel einer Oberfläche

Skript zur Oberfläche

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

// fill test values
let testValue = [];
for (let i=0;i<100;i++) {
  testValue.push({
    col1: {
      type: 'custom',
      value: 'Value1_' + i,
      hidden: false
    },
    user_ag_tags: null,
    col2: 'Value2_' + i,
    col3: {
      type: 'custom',
      value: new Date()
    },
    col4: 'value1',
    col5: 'This is a sample text',
    col6: {
      type: 'custom',
      icon: 'aguila-icon local_airport'
    },
    col7: {
      type: 'custom',
      value: '+'
    }
  });
}

let form = aguila.create({
  width: 1200,
  height: 600,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField',
      // showError: 'always',
      // readOnly: true,
      maxItems: 5,
      label: 'Test',
      // hideNavigation: true,
      // showAppend: true,
      // showRowDelete: true,
      // showRowMove: true,
      // hideHeader: true,
      // tableWidth: 2000,

      // actions is ab agorum core 9.5.0 verfügbar
      actions: {
        duplicate: true,
        setColumnValues: true
      },
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Spalte 1',
          flexible: true,
          hidden: false,

          // actions is ab agorum core 9.5.0 verfügbar
          actions: {
            setColumnValues: false
          },

          validation: [
            {
              required: true
            }
          ]
        },
        {
          // use of metadata
          name: 'user_ag_tags',
          width: 100
        },
        {
          type: 'agorum.composite.form.element.text',
          name: 'col2',
          label: 'Spalte 2',
          width: 100
        },
        {
          type: 'agorum.composite.form.element.date',
          name: 'col3',
          label: 'Spalte 3',
          width: 200
        },
        {
          type: 'agorum.composite.form.element.select',
          name: 'col4',
          label: 'Spalte 4',
          restricted: true,
          data: [
            {
              value: 'value1',
              text: 'Wert 1'
            },
            {
              value: 'value2',
              text: 'Wert 2'
            }
          ],
          width: 200
        },
        {
          type: 'agorum.textDisplay',
          name: 'col5',
          width: 100
        },
        {
          type: 'agorum.composite.form.element.button',
          name: 'col6',
          icon: 'aguila-icon drive_eta',
          readOnlyHidden: true,
          width: 34
        },
        {
          type: 'agorum.composite.form.element.button',
          name: 'col7',
          value: 'Y',
          readOnlyHidden: true, 
          width: 34
        }
        
      ],
      value: testValue
    }
  ]
});

form.down('listField').
on('focused', data => {
  console.log('focused', data);
}).
on('blurred', data => {
  console.log('blurred', data);
}).
on('action', data => {
  console.log('action', data);
}).
on('itemDeleted', data => {
  console.log('deleted', data);
}).
on('itemMoved', data => {
  console.log('moved', data);
});

form;

Parameter

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

maxItems

Definiert die maximale Anzahl gleichzeitig dargestellter Zeilen (Standard: 5).

Verwenden Sie einen kleinen Wert für diesen Parameter, da das System ansonsten zu viele Informationen gleichzeitig darstellt und die Performance negativ beeinflusst.
Sie können den Wert 0 setzen, damit die Liste dynamisch wächst und ein Benutzer sie nicht blättern muss, etwa bei kleineren Listen, bei denen ein Benutzer nicht mehr als 10 Werte erwartet (schnelle initiale Darstellung bei kleinen Mengen und Entfall der Navigationsbuttons und Positions-Anzeige, was Platz einspart).

Beispiel

form.down('listField').maxItems = 10;

hideHeader

Wert	Beschreibung
true	Blendet den Header der Liste aus.
false (Standard)	Blendet den Header der Liste ein.

Beispiel

form.down('listField').hideHeader = true;

Sie können diesen Parameter nachträglich ändern.

compactHeader

Wert	Beschreibung
true	Stellt den Header in einer kompakten Form dar. Nur die Symbole für Vor und Zurück sowie die Anzeige der angezeigten Elemente auf der rechten Seite existieren, um Platz zu sparen.
false (Standard)	Stellt den Header NICHT kompakt dar.

Beispiel

form.down('listField').compactHeader = true;

Sie können diesen Parameter nachträglich ändern.

hideNavigation

Wert	Beschreibung
true	Blendet die Navigation der Liste aus. Benutzer können dann nicht mehr zu Werten navigieren, die nicht sichtbar sind.
false (Standard)	Blendet die Navigation der Liste ein.

Beispiel

form.down('listField').hideNavigation = true;

Sie können diesen Parameter nachträglich ändern.

showAppend

Wert	Beschreibung
true	Blendet das Symbol + zum Hinzufügen von neuen Elementen ein.
false (Standard)	Blendet das Symbol + zum Hinzufügen von neuen Elementen aus.

Beispiel

form.down('listField').showAppend = true;

Einträge programmatisch hinzufügen

form.down('listField').value = form.down('listField').value.concat([
  {
    col1: 'Wert 1',
    col2: 'Wert 2',
    // ...
  },
  {
    // ...
  }
]);

Sie können diesen Parameter nachträglich ändern.

showRowDelete

Wert	Beschreibung
true	Blendet das Symbol Löschen bei den jeweiligen Listeneinträgen ein, wodurch Benutzer Elemente aus der Liste löschen können.
false (Standard)	Blendet das Symbol Löschen bei den jeweiligen Listeneinträgen aus.

Beispiel

form.down('listField').showRowDelete = true;

Sie können diesen Parameter nachträglich ändern.

showRowMove

Wert	Beschreibung
true	Blendet die Symbole zum Verschieben von Einträgen der Liste ein, wodurch Benutzer Elemente in der Liste verschieben können.
false (Standard)	Blendet die Symbole zum Verschieben von Einträgen der Liste aus.

Beispiel

form.down('listField').showRowMove = true;

Sie können diesen Parameter nachträglich ändern.

label

Stellt das Label (Bezeichnung) vorn an der Liste dar, sodass das System das list-Element genauso eingerückt darstellt wie andere Elemente in einer form.

Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('listField').label = 'Liste';

tableWidth

Definiert die innere Breite der Tabelle in der Liste.

Die Liste verwendet im Standard die volle Breite des Fensters (Standard: null).
Eine Scrollbar entsteht, wenn Sie eine Breite definieren, die größer ist als die Listenbreite, um viele Spalten in der Tabelle sinnvoll darzustellen.
Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('listField').tableWidth = 2000;

page

Springt zur jeweiligen Listenposition.

Enthält die Liste etwa zehn Werte und maxItems=5, dann bedeutet page=1, dass das System auf die Seite 2 springt und die Elemente 6–10 darstellt.
Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('listField').page = 1;

actions

Definiert Aktionen auf Zeilenebene, die ein Benutzer per rechter Maustaste aufrufen kann.

Wert	Beschreibung
duplicate=true/false (Standard: false)	Aktiviert die Aktion Duplizieren, mit der Benutzer die aktuelle Zeile in der Liste kopieren können. Das System übernimmt die Zustände der Zellen, etwa disabled, readOnly, hidden.
setColumnValues=true/false (Standard: false)	Aktiviert das Vererben von Werten einer Spalte nach oben, unten oder in beide Richtungen. Das System übernimmt nur die Werte, nicht die Zustände wie disabled, readOnly, hidden.

Sie können beide Werte auf template-Ebene pro Spalte definieren.
Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('listField').actions = {
  duplicate: true,
  setColumnValues: true
};

template

Definiert die Darstellung der jeweiligen Spalten einer Zeile in der Tabelle. Darin enthalten sind normale form-Elemente oder aguila-widgets.

Beispiel

...
{
  // use of metadata
  name: 'user_ag_tags',
  width: 100,               // Wenn Sie keine width oder kein flexible definieren, steht width im Standard auf 80
  label: 'Tags',            // Überschreibt das Label des Metadatums user_ag_tags
  hidden: false,            // Mit hidden=true blenden Sie die Spalte aus
  readOnlyHidden: false,    // Mit readOnlyHidden=true blenden Sie die Spalte im readonly-Modus aus
                            
  actions: {                
    setColumnValues: false
  }
}
...

Hinweis: Die Spalte name darf nicht mit einem _ beginnen. Diese Schreibweise ist ausschließlich für interne Zwecke reserviert.

Das System lädt alle Angaben für die Darstellung aus der Metadaten-Definition, wenn name ein definiertes Metadatum ist.
Sie können weitere Parameter definieren, die dann die Parameter aus der Metadaten-Definition überschreiben oder ergänzen.
Sie können alle Parameter von Element oder widget verwenden.
Sie können durch die Angabe von actions die Standardeinstellungen von actions der Liste pro Spalte überschreiben.
Sie können zu Spalten, die sich automatisch aus einer metadata-list-Definition ergeben, noch weitere eigene Spalten hinzuzufügen.
Definieren Sie mindestens eine Spalte als flexible=true und andere Spalten mit einer festen width, sodass die Liste sinnvoll die gesamte Breite verwendet.

Parameter nachträglich ändern

form.down('listField').template: [
  {
    type: 'agorum.composite.form.element.text',
    name: 'col1',
    label: 'Spalte 1',
    flexible: true,
    validation: [
      {
        required: true
      }
    ]
  },
  {
    // use of metadata
    name: 'user_ag_tags',
    width: 100
  }
];

Die Reihenfolge der Spalten aus der Metadaten-Definition steuern

Das System übernimmt die Spalten aus der Metadaten-Definition, wenn Sie das list-Element mit einem Metadatum vom type=list initialisieren, in einer willkürlichen Reihenfolge.

Sie können die Reihenfolgen aller definierten Spalten mit einem zusätzlichen Parameter steuern. Alle nicht definierten fügt das System in unbestimmter Reihenfolge hinten an:

Das Metadatum tst_rechnungsposition enthält etwa die Felder number, description und net.

Sie definieren die yml-Datei:

-tst_rechnungsposition:
  displayName: Rechnungspositionen
  list:
    number:
      displayName: Nummer
      type: long

    description:
      displayName: Bezeichnung
      type: string

    net:
      displayName: Nettobetrag
      type: double

Sie initialisieren das list-Element:

let form = aguila.create({
  width: 1200,
  height: 600,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      name: 'tst_rechnungsposition'
    }
  ]
});

Ergebnis: Eine Liste mit den Spalten number, description und net in willkürlicher Reihenfolge entsteht.

Beeinflussen Sie die Reihenfolge etwa so:

Sie müssen nicht alle Spalten angeben, sondern nur diejenigen, deren Reihenfolge Ihnen wichtig ist.

let form = aguila.create({
  width: 1200,
  height: 600,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      name: 'tst_rechnungsposition',
      template: [
        {
          name: 'number'
        },
        {
          name: 'description'
        },
        {
          name: 'net'
        }
      ]
    }
  ]
});

value

Übergibt die Werte für die Liste als Array mit map-Einträgen, die zu der Definition in template passen müssen.

Hinweise: Alle Werte befinden sich im Speicher und verbrauchen somit RAM.

Beispiel

form.down('listField').value = [{
  col1: {
    type: 'custom',
    value: 'Value1_' + i,
    hidden: false
  },
  user_ag_tags: null,
  col2: 'Value2_' + i,
  col3: {
    type: 'custom',
    value: new Date()
  },
  col4: 'value1',
  col5: 'This is a sample text',
  col6: {
    type: 'custom',
    icon: 'aguila-icon local_airport'
  },
  col7: {
    type: 'custom',
    value: '+'
  }
}];

Ein Widget in der Spalte steuern

Im Standard übergeben Sie nur Spaltenname=Wert, sodass das System die Spalte mit dem Namen col1 mit Wert 1 belegt, etwa:

// ...
{
  col1: 'Wert 1'
}
// ...

Sie können die jeweiligen Widgets in der Spalte steuern, indem Sie eine map mit dem type=custom übergeben. Dadurch können Sie jede Art von Parameter an das dahinterliegende Widget übertragen. So können Sie etwa die Icons von buttons verändern oder einen Wert in der jeweiligen Zeile ausblenden. Der Parameter value enthält dann den eigentlichen Wert:

// ...
col6: {
  type: 'custom',
  icon: 'aguila-icon local_airport',
  readOnly: true,
  // oder alle weiteren Propertys des dahinterliegenden Widgets
}
// ...

Hinweis: Sie erhalten bei allen Rückgaben der Werte (valueChanged, input, get/set) den eigentlichen value. Das bedeutet, Sie müssen in den verarbeitenden Programmen nicht mehr darauf achten.

Spezielle Werte für die Symbole

Für die Symbole zum Verschieben und Löschen von Einträgen existieren spezielle vordefinierte Spaltennamen. Dadurch können Sie die Symbole auf Positionsebene ebenfalls ausblenden.

Spaltenname	Beschreibung
_up	Eintrag nach oben verschieben
_down	Eintrag nach unten verschieben
_delete	Eintrag löschen

Das Symbol „Löschen“ für eine Zeile ausblenden

form.down('listField').value = [{
  // ....
  _delete: {
    type: 'custom',
    hidden: true
  }
}];

Events

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

pageChanged

Löst aus, wenn ein Benutzer innerhalb der Liste navigiert.

Das System übergibt als Parameter den neuen Wert von page.

valueChanged

Löst aus, wenn sich mindestens ein Wert innerhalb der Listen-Werte ändert.

Das System übergibt als Parameter den neuen Wert von value, d. h. das gesamte Array der Liste.

Hinweis: Innerhalb von valueChanged können Sie die value der form oder des Elements nicht ändern, da ansonsten eine Endlosschleife die Folge wäre. Sofern dies dennoch notwendig ist, ändern Sie den Wert über setImmediate. Ignorieren Sie dann zwingend das darauffolgende valueChanged-Event, etwa mit einem Flag oder durch Prüfung des Values auf Änderung.

Tipp: Sie können mit dem Event input gezieltere Informationen darüber erhalten, was sich vom Benutzer in der Liste geändert hat. Zudem können Sie direkt mit set und get Werte setzen und lesen.

focused

Löst aus, wenn ein Benutzer ein Element innerhalb der Liste fokussiert.

Beispiel

Das System übergibt als Parameter diese Struktur:

{
  name: 'col1',        // Name der Spalte
  index: 0,            // Position in der Liste (bezogen auf alle Werte)
  path: [ 0, 'col1' ]  // Pfad zum auslösenden Element
}

blurred

Löst aus, wenn ein Benutzer ein Element innerhalb der Liste nicht mehr fokussiert.

Beispiel

Das System übergibt als Parameter diese Struktur:

{
  name: 'col1',        // Name der Spalte
  index: 0,            // Position in der Liste (bezogen auf alle Werte)
  path: [ 0, 'col1' ]  // Pfad zum auslösenden Element
}

input

Löst aus, wenn ein Benutzer einen Wert in einem Feld ändert.

Dieses Event ist einfacher zu verwenden als valueChanged.

Bei list löst das input-Event unterschiedlich aus:

Für die Spalte selbst. Hier enthalten value und oldValue den Wert der geänderten Spalte.
Für die ganze Zeile. Hier enthalten value und oldValue den Wert der gesamten Zeile, in der die Änderung stattfand.
Für die ganze list. Hier enthalten value und oldValue den Wert der gesamten Liste.

Details zu input siehe agorum.composite.form - element - Grundlegende Eigenschaften.

Beispiel

Das System übergibt als Parameter diese Struktur:

{
  value: 'current value',      // aktueller Wert des Felds
  oldValue: 'previous value',  // Wert vor der Änderung
  index: 0,                    // Index der Zeile, in der die Änderung stattfand
  name: 'col1',                // Name des auslösenden Elements
                               // ist nicht belegt beim input-Event für die Zeile oder ganze list
  path: [ 0, 'col1' ]          // Pfad zum auslösenden Element
}

changed

Löst aus, wenn ein Benutzer einen Wert in einem Feld ändert und das Feld verlässt.

Dieses Event löst erst aus, sobald der Benutzer mit seiner Eingabe fertig ist.

Bei list löst das changed-Event unterschiedlich aus:

Für das jeweils geändert Feld in einer Spalte und Zeile.
Für die ganze list, wenn ein Benutzer eine neue row zur Liste hinzufügt oder löscht.

Details zu changed siehe agorum.composite.form - element - Grundlegende Eigenschaften

Beispiel

Das System übergibt als Parameter diese Struktur:

{
  value: 'current value',      // aktueller Wert des Felds
  index: 0,                    // Index der Zeile, in der die Änderung stattfand
  name: 'col1',                // Name des auslösenden Elements
                               // ist nicht belegt beim input-Event für die Zeile oder ganze list
  path: [ 0, 'col1' ]          // Pfad zum auslösenden Element
}

action

Löst aus, wenn ein Benutzer auf ein Symbol innerhalb der Liste klickt.

Beispiel

Das System übergibt als Parameter diese Struktur:

{   
  name: 'col1',        // Name der Spalte
  index: 0,            // Position in der Liste (bezogen auf alle Werte)
  path: [ 0, 'col1' ]  // Pfad zum auslösenden Element
}

itemDeleted

Löst aus, wenn ein Benutzer ein Element der Liste löscht.

Beispiel

Das System übergibt als Parameter diese Struktur:

{
  item: [ ... ],  // der Wert dieser Zeile
  index: 0        // Position in der Liste (bezogen auf alle Werte der Liste), in der das Element zuvor war
}

itemMoved

Löst aus, wenn ein Benutzer ein Element der Liste verschiebt.

Beispiel

Das System übergibt als Parameter diese Struktur:

{
  item: [ ... ],   // der Wert dieser Zeile
  fromIndex: 0,    // Position in der Liste (bezogen auf alle Werte der Liste), bevor das Element verschoben wurde
  toIndex: 1       // Position nach dem Verschieben
}

itemAppended

Löst aus, wenn ein Benutzer ein Element der Liste hinzufügt.

Beispiel

Das System übergibt als Parameter diese Struktur:

{
  item: [ ... ],   // der Wert der neuen Zeile
  index: 99,       // Position in der Liste (bezogen auf alle Werte der Liste), zu der das Element hinzugefügt wurde
}

Werte nach dem Hinzufügen anreichern

let listField = form.down('listField');

listField.on('itemAppended', data => {
  let value = listField.value;
  value[data.index] = {
    col3: {
      type: 'custom',
      value: new Date()
    },
    col6: {
      type: 'custom',
      icon: 'aguila-icon local_airport'
    },
    col7: {
      type: 'custom',
      value: '+'
    }
  };
  listField.value = listField.value.concat([]);  
});

Funktionen

Tipp: Verwenden Sie set, get und input anstelle von value=, valueChanged oder .value.

set

Setzt Parameter und Werte.

Beispiel

let listField = form.down('listField');

// Beispiel einen Wert setzen
listField.set('[0].col1.value', 'Ein Wert');

// Beispiel Feld disablen
listField.set('[0].col1.disabled', true);

Beispiel bei Listen

Bei Listen legt das System die Zeile, wenn sie noch nicht existiert, automatisch an und füllt alle bis dahin noch nicht vorhandenen auf.

Wenn eine Liste etwa noch keine Werte besitzt, belegt das System mit set die 10. Zeile. In diesem Falle füllt es alle 9 davor liegenden mit leeren Zellen auf und setzt entsprechend die 10. Zeile:

let listField = form.down('listField');

listField.set('[10].col1.value', 'Ein Wert');

Eine komplette Zeile setzen

let listField = form.down('listField');

listField.set('[0].value', {
  col1: 'Wert 1',
  col2: 'Wert 2'
});

Eine komplette Liste setzen

let listField = form.down('listField');

listField.set('value', [
  {
    col1: 'Wert 1.1',
    col2: 'Wert 1.2'
  },
  {
    col1: 'Wert 2.1',
    col2: 'Wert 2.2'
  }
]);

get

Liest Parameter und Werte direkt.

Beispiel

let listField = form.down('listField');

// einen Wert aus der ersten Zeile und Spalte col1 lesen
let value = listField.get('[0].col1.value');

// disabled-Status eines Felds lesen
let disabled = listField.get('[0].col1.disabled');

Das System wirft einen Fehler, wenn es eine nicht existierende Zeile ausliest.

Eine komplette Zeile lesen

let listField = form.down('listField');

let row = listField.get('[0].value');

Eine komplette Liste lesen

let listField = form.down('listField');

let list = listField.get('value');

Weitere Beispiele

Eine Spalte in Abhängigkeit einer anderen Spalte ändern

Dieses Beispiel stellt eine Liste mit 3 Spalten dar. Ändern sich die ersten beiden Spalten, so berechnet das System in der letzten Spalte die Summe und stellt diese dar.

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

// create a basic form with a list, with 3 columns
let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField',
      showAppend: true,
      showRowMove: true,
      showRowDelete: true,
      template: [
        {
          type: 'agorum.composite.form.element.number',
          name: 'number1',
          label: 'Number 1',
          width: 60,
        },
        {
          type: 'agorum.composite.form.element.number',
          name: 'number2',
          label: 'Number 2',
          width: 60,
        },
        {
          type: 'agorum.composite.form.element.number',
          name: 'result',
          disabled: true,
          label: 'Sum',
          flexible: true
        }
      ],
      // add empty row
      value: [{}]
    }
  ]
});

// get event on user change
form.on('input', data => {
  // when either number1 or number2 is changed, build sum
  // path will look like this: [ 'listField', row, column ]: for example: [ 'listField', 0, 'number1' ]
  
  if (data.name === 'number1' || data.name === 'number2') {
    // row is second part in path
    let row = data.path[1];
    
    // get number 1
    let number1 = form.get([ 'listField', row, 'number1', 'value' ]);
    let number2 = form.get([ 'listField', row, 'number2', 'value' ]);
    
    // build sum and set to result column
    if (number1 !== undefined && number2 !== undefined) {
      let sum = number1 + number2;
      form.set([ 'listField', row, 'result', 'value' ], sum);
    }
  }
});

form;

Eine Zeile hinzufügen

Dieses Beispiel fügt eine Zeile am Ende der Liste hinzu.

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

// create a basic form with a list, with 3 columns
let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      type: 'agorum.composite.form.element.button',
      name: 'append',
      value: 'Append a row'
    },
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField',
      showAppend: true,
      showRowMove: true,
      showRowDelete: true,
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Column 1',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.text',
          name: 'col2',
          label: 'Column 2',
          flexible: true
        }
      ]
    }
  ]
});

form.on('action', data => {
  // append button is clicked
  if (data.name === 'append') {
    // append a row
    let rows = form.get('listField.value') || [];
    let index = rows.length;
    
    let newRow = {
      col1: 'This is row: ' + index,
      col2: 'it has been appended'
    };
    
    form.set([ 'listField', index, 'value' ], newRow);
  }
});

form;

Eine Zeile löschen

Dieses Beispiel löscht eine Zeile. Der Benutzer kann über ein Symbol immer die erste Zeile löschen.

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

// create a basic form with a list, with 3 columns
let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      type: 'agorum.composite.form.element.button',
      name: 'delete',
      value: 'Delete first row'
    },
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField',
      showAppend: true,
      showRowMove: true,
      showRowDelete: true,
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Column 1',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.text',
          name: 'col2',
          label: 'Column 2',
          flexible: true
        }
      ],
      value: [
        {
          col1: {
            type: 'custom',
            value: 'Value 1',
            disabled: true
          },
          col2: {
            type: 'custom',
            value: 'Value 2'
          }
        }
      ]
    }
  ]
});

let listField = form.down('listField');

form.on('action', data => {
  // delete button is clicked
  if (data.name === 'delete') {
    // delete first row
    let rows = form.get('listField.value') || [];
    
    if (rows.length > 0) {
      // remove first row
      rows.shift();
    }
    
    // set new rows to the list
    form.set([ 'listField', 'value' ], rows);
  }
});

listField.on('valueChanged', () => {
  // check, amount of rows, if no row is present, 
  // disable the delete button, otherwise enable it
  let rows = form.get('listField.value') || [];
  form.set('delete.disabled', rows.length === 0);
});

form;

Eine Zeile kopieren

Dieses Beispiel fügt zwischen 2 Zeilen eine neue Zeile ein, wenn der Benutzer ein Symbol anklickt, und übernimmt die Werte aus der geklickten Zeile.

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

// create a basic form with a list, with 3 columns
let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField',
      showAppend: true,
      showRowMove: true,
      showRowDelete: true,
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Column 1',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.text',
          name: 'col2',
          label: 'Column 2',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.button',
          name: 'copy',
          label: 'Copy',
          value: 'Copy row'
        }
      ],
      value: [
        {
          col1: {
            type: 'custom',
            value: 'Value 1',
            disabled: true
          },
          col2: {
            type: 'custom',
            value: 'Value 2'
          }
        }
      ]
    }
  ]
});

let listField = form.down('listField');

form.on('action', data => {
  // copy button is clicked
  if (data.name === 'copy') {
    let rows = form.get('listField.value') || [];
    
    // path will look like this: [ 'listField', row, column ]: 
    // for example: [ 'listField', 0, 'number1' ]
    // row is second part in path
    let row = data.path[1];
    
    // clone this row and add it behind
    let newRow = rows[row];
    rows.splice(row + 1, 0, newRow);

    // set new rows to the list
    form.set([ 'listField', 'value' ], rows);
  }
});

form;

Eine Zeile zwischen 2 Listen transferieren

Dieses Beispiel stellt 2 Listen dar. Per Symbol kann der Benutzer eine Zeile von der einen in die andere Liste verschieben.

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

// create a basic form with a list, with 3 columns
let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',
  elements: [
    // list 1
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField1',
      showAppend: true,
      showRowMove: true,
      showRowDelete: true,
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Column 1',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.text',
          name: 'col2',
          label: 'Column 2',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.button',
          name: 'move',
          label: 'Move',
          value: 'Move to other list'
        }
      ]
    },
    
    // list 2
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField2',
      showAppend: true,
      showRowMove: true,
      showRowDelete: true,
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Column 1',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.text',
          name: 'col2',
          label: 'Column 2',
          flexible: true
        },
        {
          type: 'agorum.composite.form.element.button',
          name: 'move',
          label: 'Move',
          value: 'Move to other list'
        }
      ]
    }
  ]
});

form.on('action', data => {
  // move button is clicked
  if (data.name === 'move') {
    // path will look like this: [ 'listField', row, column ]: 
    // for example: [ 'listField', 0, 'number1' ]

    // find out what the source list is an what the target list
    let listName = data.path[0];
    
    let srcList;
    let dstList;
    
    if (listName === 'listField1') {
      srcList = 'listField1';
      dstList = 'listField2';
    }
    else {
      srcList = 'listField2';
      dstList = 'listField1';
    }
    
    // get rows from source and destination list
    let rowsSrc = form.get([ srcList, 'value' ]) || [];
    let rowsDst = form.get([ dstList, 'value' ]) || [];
    
    // row is second part in path
    let srcRow = data.path[1];
    
    // remove it from the srcList
    let removedRow = rowsSrc.splice(srcRow, 1);
    
    // append it to the destinatino list
    rowsDst = rowsDst.concat(removedRow);
    
    // set back the new rows to the source and destination lists
    form.set([ srcList, 'value' ], rowsSrc);
    form.set([ dstList, 'value' ], rowsDst);
  }
});

form;

Werte in Zeilen trimmen

Dieses Beispiel iteriert über Listen-Elemente und liest Werte darin aus, sodass Sie diese verändern können.

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

// create a basic form with a list, with 3 columns
let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      type: 'agorum.composite.form.element.button',
      name: 'trim',
      value: 'Trim values in list'
    },
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField',
      showAppend: true,
      showRowMove: true,
      showRowDelete: true,
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Column 1',
          flexible: true
        }
      ],
      value: [
        {
          col1: '   Value 1   '
        }
      ]
    }
  ]
});

form.on('action', data => {
  // trim button is clicked
  if (data.name === 'trim') {
    // iterate through all values and trim them
    // (remove spaces before an after the string)

    // get rows
    let rows = form.get('listField.value') || [];
    
    // we need to iterate through all row-items and get
    // each value directly, cause in list, the value
    // can be substructured with information like disabled, etc ...
    
    rows.forEach((row, index) => {
      // get value and trim it
      let value = form.get([ 'listField', index, 'col1', 'value' ]).trim();
      
      // set value back
      form.set([ 'listField', index, 'col1', 'value' ], value);
    });
  }
});

form;