City and Area Names Not Switching to Arabic in Web Form When Language Changed from English

Dear Community,

Area Names Not Displaying in Arabic When Language Changed

Description

When changing the language from English to Arabic in the web form, the area names continue to display in English instead of showing their Arabic translations.

Current Behavior

  • City and Area names display in English regardless of selected language
  • Language switching does not affect the display of area names
  • Province/City names remain in English when language is changed to Arabic

Expected Behavior

  • When language is set to Arabic,city and area names should display in Arabic (from arabic_name field)
  • When language is set to English, area names should display in English (from area_name field)
  • Changes should happen automatically when language is switched

Technical Details

DocType Structure

Province DocType:

  • Province (data) as province
  • Arabic Name (data) as arabic_name
  • Area Name (Table) as area_name (Child table: Customer Area Table)

Customer Area Table (Child DocType):

  • Area Name (Data) as area_name
  • Arabic Name (data) as arabic_name
  • Latitude (Data) as latitude
  • Longitude (data) as longitude

in English:

In Arabic:

Based on City Area Name Filtered, Already Imported Area names in Translation need to pick arabic name from there, also need for City.

Current Code

frappe.web_form.on('custom_city', function(field, value) {
    if (value) {
        frappe.web_form.set_value('custom_province', value);
        
        frappe.call({
            method: "dpapi",
            args: { city: value },
            callback: function(r) {
                if (r.message) {
                    let language = frappe.boot.lang || 'en';
                    let areas = r.message.map(area => {
                        // For Arabic, use the translated name directly
                        let displayName = language === 'ar' ? 
                            __(area.area_name) :  // Use client-side translation
                            area.area_name;       // Use original name for English
                            
                        return {
                            value: area.area_name,
                            label: displayName
                        };
                    });
                    
                    let options = areas.map(area => `${area.value}|${area.label}`).join('\n');
                    frappe.web_form.set_df_property('custom_area', 'options', options);
                    frappe.web_form.refresh_field('custom_area');
                }
            }
        });
    } else {
        frappe.web_form.set_value('custom_province', '');
        frappe.web_form.set_df_property('custom_area', 'options', '');
        frappe.web_form.refresh_field('custom_area');
    }
});

def get_areas_for_city(city):
    try:
        province = frappe.get_doc('Province', city)
        if not province or not province.area_name:
            return []
            
        # Get the current user language
        language = frappe.local.lang or 'en'
        
        areas = []
        for area in province.area_name:
            if language == 'ar':
                # Use frappe's translate function
                translated_name = frappe._("{0}").format(area.area_name)
            else:
                translated_name = area.area_name
                
            areas.append({
                'area_name': area.area_name,
                'translated_name': translated_name
            })
            
        return areas
        
    except Exception as e:
        frappe.log_error(f"Error fetching areas for {city}: {str(e)}")
        return []


Kindly Help to Solve the Issue

You can customize Area field.

image

If translation available it will translate.

in web form that option is not available

Do you have translation of this? because some translation are not available directly.

It means in ar.csv of your custom doctype.

image

Or you can add this to translation doctype.

You can also contribute to frappe if you wish!

Thanks for your response, even though am already added in Translation doctype, but it not pick from it any possible way to sort out

Try bench build or restart bench once.