[Tutorial] web forms tricks

Hi
web forms sometimes complex to work with especially when it’s changing and development added to it as it became better and better every version …
here is some of the things i learned after research you can find them here to follow :

1- for the listing page in portal here is how to add the headers of the list and the list content template html and the query to get them :

inside the controller you add this function like task.py for exampe inside doctype task, i also created folder called template to add my template html inside it you can put it any where but is see it more organized this way :

def get_list_context(context):
context.get_list = get_encounter_list #  query return the data to be render in lest 
context.row_template = "yourcusutomapp/module/doctype/doctypename/templates/task_row_template.html"
context.result_heading_template = "yourcusutomapp/module/doctype/doctypename/templateresult_heading_template.html"


def get_encounter_list(doctype, txt, filters, limit_start, limit_page_length = 20, order_by='modified desc'):
#what every sql or orm query  you get data  as_dict = True

2- how to write your permission if the current user have what every … then he can see this else redirect

class DoctypeName(Document):

	def has_webform_permission(self):

     """ this function return true or false  :
       true he can see the docname in portal , false no """

i use this function in case of no

   frappe.local.flags.redirect_location = '/me'
    raise frappe.Redirect

3- if you want to create your own view for portal to show data for task for example
you create HTML field and only show it and hide all other fields …
put html field as Empty Div , and use client script on event after_load to append element to Dom
before save you update the frappe.web_form.values [ they are hidden but you you populate them and the frappe controller see them now ]
the same case if you want to show already entered data in webform … you check if it contains values then render them to HTML field …

11 Likes

if you have any useful information add it here so everybody can find them too

How to fillter link field based on other field value in this case area field linked to doctype City

frappe.web_form.on(‘area’, (field, value) => {
filterCity(area);
}

function filterCity(area) {
$.ajax({
url: api/resource/City?filters=[["City","area","=","${area}"]],
success: function(result) {
var options =
for (var i = 0; i < result.data.length; i++) {
options.push({
‘label’: result.data[i].name,
‘value’: result.data[i].name
})

  }
  var field = frappe.web_form.field_group.get_field('city');
  field._data = options;
  field.refresh();

}

});
};

5 Likes

For filter link field, here is a much easier way.

frm.set_query('city', function() {
    return {
        'filters': {
			'area': frm.doc.area,
        },
    };
});

this works on Desk , but not on web forms as far as i know have you test it ?

Sorry, I misunderstood I thought you meant on desk form. :sweat_smile:

Hi i want to fire an ajax call to my backend oy file on save of webform but not getting any event can you help me in that?

Hello ahmadRagheb,

I have create a webform for sales order,in that i am not able to fetch the all information that are fetch in normal sales order form . what can i do? in my case
i have to set_value to a filed so i write a code for that
frappe.web_from.set_value([‘customer’],r.message[‘customer’])
but nothing is happen i write this code in web_form==>sales_order==>sales_order.js file

as a normal user create sales order so this functionality i have to given by the website user that’s why i am doing this but i am not able to fetch all the require information in the website user when he create the sales order.

Help

Thanks

Same issue with me, did you have any solution!

Thanks in advance

no facing same issue …

Hello, try putting up your code under Client Script.

Regards,

Ivan

What is the structure of the doctype for this code (the relationship between City and area)?

What if I have the doctype of Province and having a child table for the Cities in that Provinces? How to make a webform with 2 select field: 1 for Province, and 1 for City.
The City field only populated in related to the Province selected. In short, the City field only display the child table contained in the Province doctype.

Modifying/Tweaking ERPNext Web Form DOM via JavaScript

Inside frappe.ready(), add callback using frappe.web_form.events.on('after_load', your_callback_here). Example:

function reloadCurrentStateOptions() {
	const countrySubdivisions = {{ country_subdivisions|tojson|safe }};
	// console.log('countrySubdivisions', countrySubdivisions);
	const currentStateSelect = $('select[data-fieldname="current_state"]');
	// console.log(currentStateSelect);
	currentStateSelect.html('<option></option>');
	for (const countrySubdivision of countrySubdivisions) {
		// console.log({value: countrySubdivision.name, text: countrySubdivision.title});
		currentStateSelect.append($('<option>', {value: countrySubdivision.name, text: countrySubdivision.title}));
	}
	// currentStateSelect.append($('<option>', {value: 'halo', text: 'yes'}));
	// console.log("");
}

frappe.ready(function() {
	// bind events here
	frappe.web_form.events.on('after_load', reloadCurrentStateOptions);
});

From: Web Forms | About Lovia

May I ask, for the web forms, how do I get data from python file to js file?
for example, I set some values in context, in python file. How do I call it in js file under the web form?

thanks

Hello, how to prompt a message and choices or options after saving the form

Hi @ahmadRagheb,
Would you show the code for doing this?
I’m not a programmer so got confused by how to pass values from webform to the other html page. I want to use this as confirmation page of the filled-in form.

Thanks a lot