agorum.composite.form.element.select

Dieses Element stell eine Auswahlbox zur Verfügung und unterstützt sowohl Einzel- als auch Mehrfachwerte.

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

Beispiel

---

 

Skript zur Oberfläche

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

let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',

  elements: [
    {
      type: 'agorum.composite.form.element.select',
      name: 'select1',
      label: 'Select 1',
      restricted: true,
      data: [
        {
          value: 'value1',
          text: 'Wert 1'
        },
        {
          value: 'value2',
          text: 'Wert 2'
        }
      ]
    },
    {
      type: 'agorum.composite.form.element.select',
      name: 'select2',
      label: 'Select 2',
      dataSource: 'MAIN_MODULE_MANAGEMENT/customers/D4wAddress/Data/d4w_address_data_country'
    }
  ]
});

form;

Dieses Beispiel verwendet am Ende die Standard-Datenquelle aus dem Address-Modul, um eine Länderauswahl (d4w_address_data_country) anzuzeigen:

MAIN_MODULE_MANAGEMENT/customers/D4wAddress/Data/d4w_address_data_country 

Parameter

---

Alle Parameter in element gelten. Zusätzlich gelten folgende Parameter.

placeholder

Definiert einen Platzhalter-Text für das select-Element mit einem einzelnen Wert (multi=false), den das System anzeigt, wenn das Element leer ist.

• Sie können diesen Parameter nicht für die Auswahl mehrerer Felder (multi=true) verwenden.
• Sie können diesen Parameter nachträglich ändern.

restricted

Wert	Beschreibung
true	Erlaubt nur Werte aus der Datenquelle.
false (Standard)	Erlaubt das Eingeben von eigenen Werten, die nicht in der Datenquelle enthalten sind.

Beispiel

form.down('select1').restricted = true;

multi

Wert	Beschreibung
true	Ermöglicht die Auswahl mehrerer Werte (tokenbox).
false (Standard)	Ermöglicht die Auswahl eines einzelnen Werts.

Beispiel

form.down('select1').multi = true;

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

minChars

Definiert die Mindestanzahl einzugebender Zeichen, bevor das System in der Datenquelle sucht (Standard: 0).

• Das System verwendet den Wert der hinterlegten Datenquelle (dataSource), sofern vorhanden.
• Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('select1').minChars = 2;

data

Definiert am Element eine Datenquelle.

• Der Aufbau besteht aus einem Array aus Einträgen, bestehend aus value und text, wobei value der Wert ist, der als Wert am Element sitzt und text zur Darstellung dient.
• Sie müssen entweder den Parameter data oder den Parameter dataSource setzen.
• Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('select1').data = [
  {
    value: 'value1',
    text: 'Wert 1'
  },
  {
    value: 'value2',
    text: 'Wert 2'
  }
];

dataSource

Definiert eine in der MetaDB angelegte Datenquelle.

• Das System übernimmt bei Metadaten-Feldern die Datenquelle automatisch aus der Metadaten-Definition.
• Informationen zu Datenquellen siehe Metadaten mit YML definieren (metadata.yml) und Beispiel-Datenquellen für DataHandler.

Die Datenquelle dient dazu, dem Benutzer aus einer Liste die richtigen Werte wählen zu lassen. Dabei ist der gewählte Wert (value) im Normalfall anders als der dem Benutzer angezeigte Wert (text). Das System zeigt etwa bei der Auswahl eines Benutzers den Benutzernamen an, aber der gewählte (hinterlegte) Wert ist die ID des Benutzers.

Das Element select ist in der Lage, passend zum Wert den Text anzuzeigen. Dazu ist es notwendig, dass das System den Wert wieder zurückübersetzen kann, also vom Wert zum Text gelangt.

Für die folgenden Standard-Datenquellen funktioniert dieser Vorgang automatisch:

• user-group (Auswahl für user, group oder beides: usergroup)
• csv
• search
• facet
   
• Ausnahmen bilden die Parameter JavaScript und jdbc.
• Sie müssen entweder den Parameter data oder den Parameter dataSource setzen.
• Sie können diesen Parameter nachträglich ändern.

Beispiel 1 – eigene dataSource verwenden

form.down('select1').dataSource = 'MAIN_MODULE_MANAGEMENT/customers/TESTPLUGIN/Data/test_datasource'

Beispiel 2 – dataSource für user, group oder usergroup

Die Einstellung, ob Sie Benutzer, Benutzergruppen oder beides wählen können, wird durch die dataSourceParameter bestimmt (siehe DataHandler „user-group“).

let objects = require('common/objects');
let groupname = 'GRP_myCompanyprefix_awesomeGroupname';

{
  type: 'agorum.composite.form.element.select',
  name: 'user',
  label: 'Select your User',
  dataSource: 'MAIN_MODULE_MANAGEMENT/customers/Standard/Data/user-group',
  dataSourceParameter: {
    searchUsers: true,   // default: false
    searchGroups: true,  // default: false 
    //groupId: objects.find('group://' + groupname),  // only members within this group will be shown
  },
},

dataSourceParameter

Übergibt optional Parameter an den Datenquellen-Handler.

• Die Parameter kommen etwa bei einem JSHandler als parameters an.
• Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('select1').dataSourceParameter = {
  param1: 'Wert 1',
  param2: 'Wert 2'
};

Im JavaScript-Handler können Sie folgendermaßen auf die Parameter zugreifen.

Beispiel, wenn ein agorum core smart assistant-Handler vorhanden ist

acbasicarchive_aktearea.dataSourceParameter = {
  filter: {
    acbasicarchive_aktesection: value
  }
};

textIsValue

Wert	Beschreibung
true	Text entspricht Wert, somit ist kein lookup-Handler notwendig.
false	Text ist ungleich Wert, somit ist ein lookup-Handler notwendig.

Beispiel

form.down('select1').textIsValue = true;

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

displayType

Wert	Beschreibung
combo (Standard)	Erzeugt ein Auswahlmenü.
check	Stellt entweder Radiobuttons (multi=false) oder Checkboxen (multi=true) dar. Die Daten sind direkt wählbar, der Benutzer muss kein Auswahlmenü geöffnet haben.  Sie können hierdurch etwa durch einen DataHandler die Checkboxen definieren und müssen diese nicht einzeln bauen. Verwenden Sie check nur, wenn die Daten nicht durch Eingabe von Text gefiltert werden müssen oder die Datenmenge zu groß ist.

Beispiel

let aon = {
  type: 'agorum.vbox',
  width: 300,
  items: [
    {
      type: 'agorum.composite.form.element.select',
      name: 'select2a',
      displayType: 'check',
      multi: true,
      // orientation: 'vertical',
      orientation: 'horizontal',
      data: [
        {
          text: 'text 1',
          value: 'value_1'
        },        
        {
          text: 'text 2',
          value: 'value_2'
        }        
      ]
    }
  ]
};

orientation

Steuert, wie das System die Checkboxen des Parameters displayType darstellt.

Dieser Parameter funktioniert nur in Verbindung mit dem displayType check.

Wert	Beschreibung
vertical (Standard)	Stellt die Checkboxen untereinander dar.
horizontal	Stellt die Checkboxen nebeneinander dar.

textIsHtml

Wert	Beschreibung
true	Stellt Texte aus der Datenquelle als HTML dar. Sie können dadurch Styles verwenden.
false (Standard)	Stellt Texte als Text dar und etwaige HTML Codes encodiert.

Beispiel

form.down('select1').textIsHtml = true;

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

dataSource: JavaScript

Für JavaScript-Datenquellen existiert eine spezielle Möglichkeit. Im Falle von lookup ruft das System diesen JavaScript-Handler auf, es lässt sich also nicht mit einer anderen Art von DataHandler für den lookup kombinieren.

Hier ruft das System den JS-Datahandler mit parameters.lookup = true auf. Das bedeutet, dass das System innerhalb des Skripts reagiert und den lookup durchführt.

Beispiel

/* global sc, query: true, parameters, command */

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

// only 'read' is supported
if (command !== 'read') {
  throw new Error('This data handler does not support the command "' + command + '"');
}

let parts = [
  'isfolder:true ${FOLDERPATH:/agorum/roi/Files}'
];

if (query && query.trim().length > 0) {
  if (parameters.lookup) {
    // lookup mode, search for uuid
    query = 'uuid:' + query;
  }
  else {  
    // normal mode filter name by query
    query = '(name:(' + query.trim().split(' ').filter(f => f.trim().length > 0).join('* ') + '*))';
  }
}
else {
  query = '*';
}

parts.push(query);

objects
.query(parts.join(' '))
.limit(100)
.sort('name')
.search('name', 'uuid')
.rows
.map(function(row) {
  return {
    value: row.uuid,
    text: row.name
  };
});

• In dem obigen Beispiel führt das System eine Suche nach dem Ordnernamen ab /agorum/roi/Files (Dateien) durch.
• Wählt ein Benutzer einen Ordner, speichert das System die UUID.
• Für ein lookup liefert das System als query die UUID und gibt den Namen des Ordners zurück.
• Das System liefert den text zu dem entsprechenden value (gegeben durch query) zurück, wenn parameters.lookup = true ist.
• Das System verwendet den DataHandler wie zuvor, wenn lookup = false ist.

jdbc

Sie müssen einen lookup-Handler definieren (siehe Beispiel-Datenquellen für DataHandler).

Events

---

Alle Events in element gelten. Zusätzlich gelten folgende Events.

restrictedChanged

Löst aus, wenn sich die Eigenschaft ändert.

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

multiChanged

Löst aus, wenn sich die Eigenschaft ändert.

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

minCharsChanged

Löst aus, wenn sich die Eigenschaft ändert.

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

dataChanged

Löst aus, wenn sich die Eigenschaft ändert.

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

dataSourceChanged

Löst aus, wenn sich die Eigenschaft ändert.

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

dataSourceParameterChanged

Löst aus, wenn sich die Eigenschaft ändert.

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

textIsValueChanged

Löst aus, wenn sich die Eigenschaft ändert.

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