agorum.composite.form-element - Interner Aufbau

Diese Dokumentation beschreibt den Rumpf eines Elements.

Sie müssen das Element als Widget registrieren, um es innerhalb einer form verwenden zu können.

/* global parameters, jshint unused: true */

let aguila = require('common/aguila');
let acfFactory = require('/agorum/roi/customers/agorum.composite.form/js/aguila/Libraries/form-factory-input');

let field;

// factory definition
let factoryData = acfFactory.elementInput({
  
  // pass parameters from widget to the factory
  parameters: parameters,

  // add custom properties
  properties: [
    'myProperty'
  ],

  // builder function for the edit-widget
  build: build,

  // optional builder function for the view-widget
  // if not defined, a normal textDisplay is used
  buildView: buildView,
  
  // view function for displaying the value as text (for readOnly mode)
  viewStringify: viewStringify,
  
  // optional handle for value conversions, before passing as value to the edit 
  // widget of this element
  valueHandler: valueHandler
});

// get created widget
let formWidget = factoryData.widget;

// Add custom event listener: own properties + value
formWidget.on('myPropertyChanged', myProperty => {  
  // do something ...
});

// view function for displaying the value as text (for readOnly mode)
// convert the value to a string, that should be used for displaying
// this function may also return a promise, that resolves with the value as 
// parameter, if the value transformation is taking longer
function viewStringify(value) {
  return '' + value;
}

// build the edit field.
// has to return a widget
function build(properties) {
  // return a widget. This widget needs a property value
  // you can also create a widget containing multiple fields, but the 
  // main widget itself
  // has to handle the value: e.g. a date time field, consisting of different 
  // input fields should return and accept a date as value
  field = aguila.create({
    type: 'agorum.textInput',
    label: properties.label,
    value: properties.value
  });

  // if you have a flexible element, that has no own height, you have to 
  // define flexible = true in the widget definition above

  return field;
}

// optional builder for the view widget
// if not defined, a normal textDisplay is used
function buildView(properties) {
  field = aguila.create({
    type: 'agorum.htmlDisplay',
    value: properties.value,
    flexible: true
  });

  return field;
}

// optional handler for value conversions, before passing as value to the edit 
// widget of this element it returns either the converted value or a promise, 
// that resolves with the value as parameter
let valueHandlerRun;
function valueHandler(value) {
  valueHandlerRun = {};
  let myRun = valueHandlerRun;
  
  return new Promise((resolve) => {
    aguila.fork(() => {
      // do something that takes long time
      return 'newValue...' + value;
    }).then(newvalue => {
      // resolve only the latest call to valueHandler, cause this is 
      // threaded, it could be,
      // that this resolve is called multiple times
      if (myRun === valueHandlerRun) { 
        resolve(newvalue);
      }
    });
  });
}

formWidget;