Classic forms code migrated to modern forms

Forms SharePoint Online
1

Im trying to convert a classic form built using Forms Designer to Plumsail Forms 3. One key piece of code from the original form does the following:

Multiple pieces of Equipment and Components can be added to a record. A Component belongs to a piece of Equipment. If the user chooses a component, the associated piece of equipment is added to the Equipment field. When that piece of equipment is removed from the selection, the associated components would also be removed.

var equipUserAdded = fd.field('Equipment').control('data');
fd.field('Equipment').change(function(ev){
	if (ev.added) {
		equipUserAdded.push(ev.added);
	}
	else if (ev.removed) {
		equipUserAdded = equipUserAdded.filter(function(e) {
			return e.Id && e.Id != ev.removed.Id;
		});
	}
});

fd.field('Component').change(function(){
	var components = fd.field('Component').control('data');
	var equipmentPieces = equipUserAdded.slice();
	for (var i = 0; i < components.length; i++){
		if (fd.field('Component').control('data')[i].Equipment) {
			var title = fd.field('Component').control('data')[i].Equipment.Title;
			var id = fd.field('Component').control('data')[i].Equipment.Id;
			equipmentPieces.push({Id: id, Title: title});
		}
	}

	fd.field('Equipment').value(equipmentPieces);
});

What do I need to change to have this run on the new Plumsail Forms 3?

2

Hello @Jaydius,

The API for Modern Forms is a bit different.

To get the field value:

fd.field('Field1').value;

To set field value:

fd.field('Field1').value = 'New value';

Execute a function when a field value has been changed:

fd.field('Field1').$on('change', function(value) {
    //log new value to browser's console
    console.log(value);
});

Please find more information in our documentation:

3

Thanks for your reply. I've updated the code as you suggested but doesn't seem to be working as intended. Can you take a look and see if I've missed anything?

var equipUserAdded = fd.field('Equipment').control('data');

fd.field('Equipment').$on('change', function(ev) {
	if (ev.added) {
		equipUserAdded.push(ev.added);
	}
	else if (ev.removed) {
		equipUserAdded = equipUserAdded.filter(function(e) {
			return e.Id && e.Id != ev.removed.Id;
		});
	}
});

fd.field('Component').$on('change', function(value) {
	var components = fd.field('Component').control('data');
	var equipmentPieces = equipUserAdded.slice();
	for (var i = 0; i < components.length; i++){
		if (fd.field('Component').control('data')[i].Equipment) {
			var title = fd.field('Component').control('data')[i].Equipment.Title;
			var id = fd.field('Component').control('data')[i].Equipment.Id;
			equipmentPieces.push({Id: id, Title: title});
		}
	}
	fd.field('Equipment').value = equipmentPieces;
});
4

For lookup fields, use this code to get field value:

// returns the selected option as an object
 fd.field('Equipment').value

Please see code examples for a single and multiple choice Lookup fields in our documentation: