ERPNext Conference 2019* ERPNext.com Blog

How to toggle FOLD field type using JS


#1

Hi,

I’ve 4 fold field types in a form, i want to open and close those fields using js on some conditions.


#2

select the element (fold (section)), and use the js standard function click(); to open/close it.

for e.g.:
var sections = document.getElementsByClassName("row form-section visible-section"); sections[2].childNodes[0].childNodes[0].click();


#3

here is what i’ve tried, but its not working. and one thing more where are we defining that which fold will be opened? i’ve multiple folds on a doctype, i need to open one fold at a time according to some conditions.

frappe.ui.form.on("Test", {
	refresh: function(frm){
		show_fold(frm);
	}
});

var show_fold = function(frm) {
    var sections = document.getElementsByClassName("row form-section visible-section");
    console.log(sections);
    sections[2].childNodes[0].childNodes[0].click();
}

#4

the variable sections from sections[2].childNodes[0].childNodes[0].click(); is a list of all fold elements.
so if you want to click on the first element, you have to write sections [0] , for the second sections [1] and so on…

what does your console print out at console.log(sections);?


#5

i tried with

sections[0].childNodes[0].childNodes[0].click();

but its not opening fold, currently i’ve just one fold on my test doctype.

console.log prints

HTMLCollection(4) [div.row.form-section.form-dashboard.hidden.visible-section, div.row.form-section.visible-section.shaded-section, div.row.form-section.visible-section, div.row.form-section.visible-section.shaded-section]
0: div.row.form-section.form-dashboard.hidden.visible-section
1: div.row.form-section.visible-section.shaded-section
2: div.row.form-section.visible-section
3: div.row.form-section.visible-section.shaded-section
length: 4
__proto__: HTMLCollection

#6

ouuuuw!:persevere:
sorry my bad! i thought you mean a “fold (collabsed) section”, but you mean a “fold field”!

how is the name of your fold field?


#7

yes i am talking about fold field, :stuck_out_tongue:
field name is fold_10


#8

Try this (have it tested on a test vm of me and it works :wink: ):

frappe.ui.form.on("Anfrage", {
	refresh: function(frm){
		show_fold(frm);
	}
});

var show_fold = function(frm) {
    var sections = document.getElementsByClassName("form-clickable-section text-center");
    console.log(sections);
    sections[0].childNodes[1].click();
}

#9

Thank you so much @joelios :+1: