Ressources

yuuvis® RAD - Client-side Form Scripting (parts will be taken over and be available with the next version 2.3

Remarks

Martin B. is working on it together with Manuel and Stevan ...

/**
 * Example script: Manipulating table data based on index data change.
 */
// Add change listener to field 'myTenant:number'
scope.model.['myTenant:number'].onchange=function() {
     
    // The current user input on field with the internal name 'myTenant:number'
    var num = scope.model.['myTenant:number'].value;
     
    // Shortcut to access the table
    var table = scope.model.['myTenant:changes'];
     
    if(num>0 ) {
        // If 'myTenant:number' is set (greater than 0) we automatically fill the table
        if( !table.readonly ) {
            // The user may not modify the table
            table.readonly=true;
            // Copy the current values to a property using lodash
            table.old_value=_.map(table.value, _.clone);
        }
    } else {
        // If 'myTenant:number' is not set (less than 0) we let the user fill the table
        if( table.readonly ) {
            // Copy the old values back to values using lodash
            table.value=_.map(table.old_value, _.clone);
            // The user may modify the table
            table.readonly=false;
            // Cleanup
            delete table.old_value;
        }
    }
    // automatically fills the table if 'myTenant:number' is greater than 0
    // and add num rows to the table
    if(num>0) {
        // Clean up the table by setting a empty array
		table.value.length=0;   // changes of a single cell must be done in an array variable first, 
								// and then this array has to be pushed back to the table.
        for( i=0; i<num; i++ ) {
            // For each 'myTenant:number' add a row
            // Each row is an object defined by the internal names of the column elements.
            table.value.push(
                {
                    ['myTenant:accepted']: i%2,                              // Boolean
                    ['myTenant:created']: moment().add(i,'day').toDate(),        // Date
                    ['myTenant:activedate']: moment().add(i,'day').toDate(),     // Another date
                    ['myTenant:author']: 'Marie Curie '+i,                       // String: Author name with i postfix
                    ['myTenant:prio']: i+.42,                                    // Decimal
                    ['myTenant:company'] : 'OSVH'                                // Codesystem - the 'data' values must be used.
                }
            )
        } // end for num
    } // end if num>0
}

// Example for row edit
// The 'scope.model.['myTenant:notices']' element is a table type with a few columns.
// This example script tries to achieve that only new rows can be edited. New rows are rows that the user has not saved yet.
scope.model.['myTenant:notices'].onrowedit=function(table,row) {
    // 'table' is the element, the callback event was triggered.
    // In this case the same as scope.model.notices. 'row' is the row object.
 
    // Show some information as a toast notification - just for demonstration
    scope.api.util.notifier.info("Editing table row","A row at index "+row.index+" is being edited.");
 
    // First we check whether the row is a new, not yet persisted, row, or an existing row
    if(!row.persisted) {
        // This is a row created by the user.
        // He is allowed to change it. So all table columns are set to be editable
        // by setting all row fields' readonly property (the column elements) to false.
        Object.keys(row.model).forEach( function(e) { e.readonly=false });
         
        // Delete/save is enabled by default, but the user is not allowed to copy the existing row as a new one.
        // So we switch off the copy function.
        row.copyEnabled = false;
    } else {
        // This is an already-saved row, so cell values are no longer editable, we have set them all to read only.
        Object.keys(row.model).forEach( function(e) { e.readonly=true });
         
        // Copy/delete/save are all disabled. The user can only 'cancel' the row editing. Nothing else.
        row.copyEnabled = false;
        row.deleteEnabled = false;
        row.saveEnabled = false;
    }
}

scope.model.['myTenant:mytable'].onrowedit = function(table, row){
	// On this element we register a value change handler
	row.model.number.onchange = function(el, rowmodel) {	
		// The rowmodel provides access to the other elements
		// '['myTenant:number2']' is another element of type 'NUMBER' that is contained in the table element
		// For the sake of example this field is set to readonly, if the user inputs a special number in 'elementNumber'

		rowmodel.['myTenant:number2'].readonly = ( el.value == 42 );
	}
}

var countries = scope.model.['myTenant:addresslist'].onrowedit=function(table,row){
	row.model.['myTenant:country'].onchange=function() {
		if(row.model.['myTenant:country'].value === 'Germany'){
			row.model.['myTenant:zip'].required=true;		// depending on value of country set a zip code as mandatory
		} else {
			row.model.['myTenant:zip'].required=false;
		}
	}
}

// see Manipulating table data
...
let tableCopy = JSON.parse(JSON.stringify(['myTenant:mytable'].value)); //create a copy
for ( i = 0; i < num; i++ ) {
	if (i === 0) {
			tableCopy[i].['myTenant:accepted'] = !i%2,                               // Boolean
            tableCopy[i].['myTenant:created'] = moment().add(i+5,'day').toDate(),    // Date
            tableCopy[i].['myTenant:activedate'] = moment().add(i+5,'day').toDate(), // Another date
			tableCopy[i].['myTenant:author'] = 'Pierre Curie '+i,                    // String: Author name with i postfix
            tableCopy[i].['myTenant:prio'] = i+.00,                                  // Decimal
            tableCopy[i].['myTenant:company'] = 'OSVH'                               // Codesystem - the 'data' values must be used.
	} else {
    	// For each number add a row
	    // Each row is an object defined by the internal names of the column elements.
    	tableCopy.push({
            	['myTenant:accepted']: i%2,                              // Boolean
	            ['myTenant:created']: moment().add(i,'day').toDate(),    // Date
            	['myTenant:activedate']: moment().add(i,'day').toDate(), // Another date
        	    ['myTenant:author']: 'Marie Curie '+i,                   // String: Author name with i postfix
    	        ['myTenant:prio']: i+.42,                                // Decimal
	            ['myTenant:company']: 'OSVH'                             // String: Element of a catalog
    	    });
	}
	// do even more fancy data manipulations
} // end for num
table.value = tableCopy;
...
// see Manipulating table data