Modify User form fields

[Timo]

Hi,

In the user form there are text input objects like "Team" and "Organisation" which allow any arbitrary input strings.
Now I'd like to replace the text objects with a select objects so that only predefined values can be chosen. As I understand it, changes to the core forms are overwritten with an update.

Is there nevertheless a possibility? Because I would like to prevent invalid entries from being made in some fields.

[kev1n]

Hi Timo,

You are right. Changes to nuBuilder's core forms are overwritten whenever you run an update.
To prevent this from happening, you can execute JavaScript code in the (Setup->) header.

This example shows how to turn the Team and Department Text objects into Select object.

user_select.jpg

Code: Select all

function nuOnLoad() {

 if(nuFormType() == 'edit'){
 
     // Edit Form loaded
     if (nuGetProperty('form_id') == 'nuuser') {
        nuReplaceWithSelectObject('sus_team', ["","Team 1", "Team 2", "Team 3"]);
        nuReplaceWithSelectObject('sus_department', ["","Department 1", "Department 2"]);
     }

 } else
 if(nuFormType() == 'browse'){
     // Browse Form loaded
 }
 
}

function nuReplaceWithSelectObject(i, options) {

	let obj = $('#' + i);

	let p = obj.position();
	let h = obj.height();
	let w = obj.width()+2;
	let id = obj.data('nu-object-id');
	let field = obj.data('nu-field');
	let tab = obj.data('nu-tab');
	let placeholder = obj.attr('placeholder');
	let title = obj.attr('title');
	let value = obj.val();
	
	obj.replaceWith('<select id="' + i + '" onchange="nuChange(event)"></select>');  

    let optionList = document.getElementById(i).options;

    options.forEach(option =>
      optionList.add(
        new Option(option, option, false, option == value)
      )
    );

    let objNew = $('#' + i); 

	objNew.css({top: p.top, left: p.left, height: h, width: w, position: 'absolute'});
	objNew.attr('data-nu-object-id', id)
		  .attr('data-nu-field', field)
		  .attr('data-nu-form', '')
		  .attr('data-nu-tab', tab)
		  .attr('data-nu-format', '')
		  .attr('data-nu-prefix', '')
		  .attr('data-nu-type', 'input')
		  .attr('data-nu-data', '')
		  .attr('data-nu-access', '0')
		  .attr('placeholder', placeholder)
		  .attr('title', title)
}


</script>
<script>

[Timo]

Awesome - works like a charm!