agorum.composite.form.edit

Dieses Element bietet dieselben Steuerungselemente für Oberflächen wie metadataEdit, mit dem Unterschied, dass Sie das Speichern und Laden selbst implementieren und somit steuern können, was beim Speichern und Laden passiert. Dies ist etwa für Bearbeitungsoberflächen von Objekten geeignet, die nicht auf Metadaten basieren.

Damit können Sie etwa Oberflächen umsetzen, um Benutzer anzulegen oder andere Objekte zu steuern.

Verhalten

---

Das System zeigt eine Oberfläche mit den definierten Metadaten an. Abhängig davon, ob die Oberfläche im Bearbeitungs- oder Ansichtsmodus ist (über den Parameter readOnly einstellbar), steuern Sie in einer Toolbar die Zustände der Schaltflächen:

Zustand	Beschreibung
Bearbeiten	Aktiv, wenn die Oberfläche im Ansichtsmodus ist und der Benutzer Schreibrechte auf das Objekt besitzt.
Speichern	Aktiv, wenn die Oberfläche im Bearbeitungsmodus ist.
Abbrechen	Aktiv, wenn die Oberfläche im Bearbeitungsmodus ist.

Ändert ein Benutzer Daten und klickt auf die Schaltfläche Abbrechen, so erhält der Benutzer einen Hinweis, dass sich Daten geändert haben. Er muss dann das Abbrechen nochmals bestätigen.

Grundgerüst

---

Dieses Beispiel zeigt das Grundgerüst für die eigene Bearbeitungsoberfläche. Für ein vollständiges Beispiel zur Bearbeitung / Erstellung eines Benutzers siehe Beispiel: Benutzer erstellen/ändern.

Skript zum Grundgerüst

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

let form = aguila.create({
  type: 'agorum.composite.form.edit',
  properties: [
    'id'
  ],
  width: 500,
  height: 500,
  toolbar: 'top',
  validation: [
    {
      required: true
    }
  ],

  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'userName',
      label: 'Name'
    } 
  ]
});

form.on('idChanged', () => {
  if (form.id !== null) {
    // load information and set to form.value ...
    
    // ....
  }
  
  // tell that the load is finished
  form.fire('loaded');
});

form.on('save', () => {
  // save event, save the data
  // ....
  
  // tell, that the save has finished
  form.fire('saved');
});


form;

Parameter

---

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

type

Der type ist immer agorum.composite.form.edit.

value

Setzt die Werte des jeweils definierten Elements form.

• Das System übernimmt nur die Werte, für die ein entsprechendes Element existiert.
• Lädt es etwa die Werte über metadata.load, filtert es alle undefinierten Werte raus.

id

Definiert die Id als Property, sodass das System über das Event idChanged auf die Änderung der id hört und dort dann die Lade-Funktion implementiert.

Events

---

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

idChanged

Löst aus, sobald Sie den Parameter id setzen. Das eigene Widget reagiert dann und lädt alle notwendigen Daten.

Beispiel

form.on('idChanged', () => {
  if (form.id !== null) {
    // load information and set to form.value ...
    
    // ....
  }
  
  // tell that the load is finished
  form.fire('loaded'); // zwingend notwendig
});

save

Löst aus, sobald ein Benutzer auf der Oberfläche auf Speichern klickt und alle Daten valide sind. Hiermit implementieren Sie das eigene Speichern.

Beispiel

form.on('save', () => {
  // save event, save the data
  // ....
  
  // tell, that the save has finished
  form.fire('saved'); //zwingend notwendig
});

canceled

Löst aus, sobald ein Benutzer auf der Oberfläche auf Abbrechen klickt.

Verwenden Sie dieses Event, um das umliegende Fenster zu schließen, wenn es sich um eine Neuanlage handelt.

Beispiel

form.on('canceled', () => {
  if (!form.id) {
    form.form.close();
  }
});

Beispiel: Benutzer erstellen /ändern

---

 

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

/**
 * sample for creating a custom edit form for a user, simplified, but functional, for demonstrating
 */
let form = aguila.create({
  type: 'agorum.composite.form.edit',
  properties: [
    'id'
  ],
  width: 500,
  height: 500,
  toolbar: 'top',
  readOnly: true,
  validation: [
    {
      required: true
    }
  ],

  elements: [
    {
      type: 'agorum.composite.form.element.text',
      name: 'userName',
      label: 'Name'
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'givenName',
      label: 'Vorname'
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'familyName',
      label: 'Nachname'
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'mail',
      label: 'E-Mail',
      validation: [
        {
          regex: '/^.*@.*\\..*',
          errorText: 'E-Mail Adresse falsch'
        }
      ]
    },
    {
      type: 'agorum.composite.form.element.text',
      name: 'password',
      label: 'Passwort',
      password: true
    }        
  ]
});

let userName = form.down('userName');
let password = form.down('password');

form.on('idChanged', () => {
  if (form.id !== null) {
    // load information

    aguila.fork(() => {
      let user = objects.find(form.id);
      let iup = user.infoUserProfile;
      
      return {
        userName: user.name,
        givenName: iup.givenName,
        familyName: iup.familyName,
        mail: user.emailAddresses ? user.emailAddresses.join(';') : ''
      };
    }).then(data => {
      // set values to the form
      form.value = data;
      
      // tell, that load has finished
      form.fire('loaded');
    });
  }
  else {
    // tell, that load has finished
    form.fire('loaded');
  }
  
  prepareForm();
});

function prepareForm() {
  if (form.id) {
    // id, so in update mode, password is optional
    password.validation = [
      {
        required: false
      }
    ];
  }
  else {
    // no id, so in create mode, password is require
    password.validation = [
      {
        required: true
      }
    ];
    form.readOnly = false;
  }
}

// Ab agorum core 9.2.3
form.on('canceled', () => {
  // close form, on abort, when no ID is given
  if (!form.id) {
    form.form.close();
  }
});

form.on('save', () => {
  aguila.fork(() => {
    if (form.id !== null) {
      // update
      let otherUser = objects.tryFind('user:' + form.value.userName);
      if (otherUser && otherUser.ID !== form.id) {
        throw new Error('Es existiert bereits ein anderer Benutzer mit demselben Namen');
      }

      let data = {
        name: form.value.userName,
        password: form.value.password,
        admin: false,
        givenName: form.value.givenName,
        familyName: form.value.familyName,
        language: 'de',
        emailAddresses: form.value.mail.split(';').map(v => v.trim())
      };
      
      // filter out, values, that are not set, cause update of user, does not like empty values
      for (let k in data) {
        if (data[k] === null || data[k] === undefined) delete data[k];
      }
      
      let user = objects.update('user', objects.find(form.id), data);
      
      return user.ID;
    }
    else {
      // create
      if (objects.tryFind('user:' + form.value.userName)) {
        throw new Error('user ist bereits vorhanden');
      }
      
      let user = objects.create('user', {
        name: form.value.userName,
        password: form.value.password,
        path: '',
        admin: false,
        givenName: form.value.givenName,
        familyName: form.value.familyName,
        language: 'de',
        emailAddresses: form.value.mail.split(';').map(v => v.trim())
      });
      
      return user.ID;
    }
  }).then(id => {
    // set the id to the form (for newly created user)
    form.id = id;
    
    // tell, that the save has finished
    form.fire('saved');
  }).catch(err => {
    // something went wrong, tell that the save has failed
    form.fire('failed', '' + err);
    
    // throw the error further for displaying
    throw err;
  });
});

setImmediate(() => {
  // test: load data of demo user, if a new user should be created, just comment out the next line.
  
  form.id = objects.find('user:demo').ID;
  
  prepareForm();
});

form;