Try ERPNext Buy Support Partners Foundation

Multiple Selection in Dialog Box

I have created a dialog box and in its first field that is “rec id” i have created its fieldtype as link as i wanted the list of ids. But the problem is by default it selects one at a time. Any way to use multiple ones

Screenshot_2018-08-17%20New%20R%20App%201

That didn’t seems to be helping. I need to send message to bunch of people and for that i need to select bunch of persons. The list I am fetching is a link type and creating a childtable for the same doesn’t seems to be a way. Is there any other way to get all the fields of data (the same mechanism as that of link) in jquery or anyother way ??

You could use Select2 library to make field as multi select. Find below sample code which creates normal data field as multiselect using select2.

setup_multiselect_s2: function(frm, field, multiple, allowClear, datasrc, separator=",") {

if (!frm || !field || !datasrc || !separator) {
	frappe.throw('Missing parameters for initializing Multiselect.');
}
if (!frm.multiselect_fields) {
	frm.multiselect_fields = [];
}
if (frm.multiselect_fields.indexOf(field) == -1) {
	frm.multiselect_fields.push(field);
}
var propname = frm.doc.doctype + "-" + field + "-array";

if (datasrc.hasOwnProperty('array')) {
	window[propname] = $.map(datasrc.array, function (itm) {
		return { id: itm, text: itm};
	});
} else {
	frappe.throw('Invalid datasource.');
}

frm.fields_dict[field].$wrapper.html('<div><label class="control-label">'+frm.fields_dict[field].df.label +'\
	</label><br/><select id="'+field+'-s2" '+multiple+' style="left: 321.5px; width: 100%; "></select></div>');

if ($(`#${field}-s2`).data('select2')) {
	$(`#${field}-s2`).select2("destroy");
}

$(`#${field}-s2`).select2({
	placeholder: "",
	allowClear: allowClear,
	data: window[propname],
	formatSelection: format,
	formatResult: format,
	disabled: frm.fields_dict[field].df.read_only
});

if(multiple) {
	$(`#${field}-s2`).val(frm.doc[`${field}`] ? frm.doc[`${field}`].split(separator) : '').trigger("change");
} else {
	$(`#${field}-s2`).val(frm.doc[`${field}`]).trigger("change");
}

$(`#${field}-s2`).on('select2:select', function (e) {
	let field_val = $(`#${field}-s2`).val();

	if(multiple) {
		field_val = field_val ? field_val.join(separator) : '';
	}
	frm.set_value(`${field}`, field_val);
});

$(`#${field}-s2`).on('select2:unselect', function (e) {
	let field_val = $(`#${field}-s2`).val();
	
	if(multiple) {
		field_val = field_val ? field_val.join(separator) : '';
	}
	frm.set_value(`${field}`, field_val);
});
}


var content_list;
content_list = [];
frappe.call({
	method: "frappe.client.get_list",
	args: {
		doctype: "DocType Name",
		filters: [],
		fields: ['fields'],
		limit_page_length: 9999
	},
	callback: function (r) {
		if (r.message) {
			$.each(r.message, function (i, d) {
				content_list.push(d.field_name);
			});
		}
	}
});
frappe.after_ajax(() => {
	frm.events.setup_multiselect_s2(frm, 'custom_field_name', 'multiple', false, datasrc = {
		array: content_list.sort()
	}, ',');
});
1 Like

i am using this code inside a dialog box’s script in custom script but its giving error “error in custom script”

Above code is working for me. Could share your code to debug?

cur_frm.cscript.bulk_followups=function(frm,cdt,cdn){
var d = new frappe.ui.Dialog({

'fields': [
{'fieldname': 'ht', 'fieldtype': 'HTML'},
{'fieldname': 'rec' , 'fieldtype': 'HTML'},

    {'fieldname':'message','label': 'Message', 'fieldtype': 'Small Text',"reqd": 1},
{'fieldname':'send_button','label': 'Send', 'fieldtype':'Button'}    

],

});
d.fields_dict.ht.$wrapper.html('Bulk ‘MSG’);
d.show();
setup_multiselect_s2: function(frm, field, multiple, allowClear, datasrc, separator=",") {

if (!frm || !field || !datasrc || !separator) {
frappe.throw(‘Missing parameters for initializing Multiselect.’);
}
if (!frm.multiselect_fields) {
frm.multiselect_fields = [];
}
if (frm.multiselect_fields.indexOf(field) == -1) {
frm.multiselect_fields.push(field);
}
var propname = d.doc.doctype + “-” + field + “-array”;

if (datasrc.hasOwnProperty(‘array’)) {
window[propname] = $.map(datasrc.array, function (itm) {
return { id: itm, text: itm};
});
} else {
frappe.throw(‘Invalid datasource.’);
}

frm.fields_dict.rec.$wrapper.html(’

’+d.fields_dict.rec.df.label +’

<select id="’+rec+’-s2" ‘+multiple+’ style="left: 321.5px; width: 100%; ">
’);

if ($(#$rec-s2).data(‘select2’)) {
$(#$rec-s2).select2(“destroy”);
}

$(#$rec-s2).select2({
placeholder: “”,
allowClear: allowClear,
data: window[propname],
formatSelection: format,
formatResult: format
});

if(multiple) {
$(#$rec-s2).val(frm.doc[$rec] ? frm.doc[$rec].split(separator) : ‘’).trigger(“change”);
} else {
$(#$rec-s2).val(frm.doc[$rec]).trigger(“change”);
}

$(#$rec-s2).on(‘select2:select’, function (e) {
let field_val = $(#$rec-s2).val();

if(multiple) {
	field_val = field_val ? field_val.join(separator) : '';
}
frm.set_value(`$rec`, field_val);

});

$(#$rec-s2).on(‘select2:unselect’, function (e) {
let field_val = $(#$rec-s2).val();

if(multiple) {
	field_val = field_val ? field_val.join(separator) : '';
}
frm.set_value(`$rec`, field_val);

});
}

var content_list;
content_list = [];
frappe.call({
method: “frappe.client.get_list”,
args: {
doctype: “abc”,
fields: [‘data1’],
limit_page_length: 9999
},
callback: function ® {
if (r.message) {
$.each(r.message, function (i, d) {
content_list.push(d.rec);
});
}
}
});
frappe.after_ajax(() => {
frm.events.setup_multiselect_s2(frm, ‘rec’, ‘multiple’, false, datasrc = {
array: content_list.sort()
}, ‘,’);
});
}

dialog instance doesn’t have doc.doctype property.

What i would recommend is try to test this example in form field and then add it in dialog.

$(#$rec-s2)

what is rec ?? name of a html field or link field (fieldtype ??)

If you’re using your fieldname as rec then you should use it in ES6 format in js ${rec}.

One more query, it is working only one time untill I refresh the page again. Like i opened it and pressed the close button of dialog box. So on next time it doesn’t open untill I refresh the page.

Getting Error ‘Select2’ is not a function

select2 is js library. You would have to include it. https://select2.org/

How to use select2 for child table field?

Hello Jparikh,

When i create new item and select the company r8 now only one company will be select,i want multiple company selection here so how this happened? can u please help me

@nikzz You can try Datatype Table-MultiSelect.

But Table-Multiselect isn’t working as reported here: V12.1.8: Table Multiselect field was erased/cleared after Save & https://github.com/frappe/erpnext/issues/19673