Frappe framework auto calcualte age and fullname

Question

Good day,

I need help in solving this problem

Problem :

I am trying to set up a custom script that calculates the age of the user base on the year it's chosen, Also when the user inputs the first_name , last_name , middle_name it should reflect on full_name.

I tried my best to code it but it's not working, to anyone who is reading this with a golden heart, please help me correct my code.

Addition note: I am using a Frappe framework and running on Ubuntu 18.04.5 LTS

For additional info on where I create custom code and the doctype (client_details)

Screenshots: https://drive.google.com/drive/folders/1556W7AeeLfaJuC2Fu8RbnI7sSZc4hXQZ?usp=sharing

Thank you so much <3

//my custom code using I'm writing on .js

    frappe.ui.form.on('client_details', {

    refresh: function(frm) {
      var today = new Date(); 
      var birthDate = new Date(brith_day); 
      var age = today.getFullYear() - birthDate.getFullYear(); var m = today.getMonth() - birthDate.getMonth(); 
      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { 
      age--; 
            } return age;
    }
    
    refresh: function(frm){
      var first_name = first_name
      var last_name = last_name
      var full_name = first_name.concat(last_name)  
      return full_name;
        }       
        
});

score 3 · Answer 1 · answered Jul 24 '21 at 15:00

Two issues in your code

Using return instead of set_value for output
Using multiple refresh events. Since the keys are same, the last one will take effect.

Use this code to set the values for fullname and age on refresh event

frappe.ui.form.on('client_details', {
  refresh: function(frm) {
    var today = new Date(); 

    // this is how you get data from form
    var birthDate = new Date(frm.doc.brithday); 

    var age = today.getFullYear() - birthDate.getFullYear(); var m = today.getMonth() - birthDate.getMonth(); 
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { 
      age--; 
    } 

    // use frm.set_value to set value of a field
    frm.set_value('age', age);

    // getting data from form
    var first_name = frm.doc.firstname
    var last_name = frm.doc.lastname
    var full_name = firstname.concat(lastname)  
    
    // setting fullname in form
    frm.set_value('fullname', full_name);
  }        
});

Above code will make changes in fullname and age fields on refresh event. If you need the changes realtime, you can use the following code. Setting up events on brithdate to change age and on firstname and lastname to change fullname.

frappe.ui.form.on('client_details', {
  brithday: function(frm) {
    var today = new Date(); 

    // this is how you get data from form
    var birthDate = new Date(frm.doc.brithday); 

    var age = today.getFullYear() - birthDate.getFullYear(); var m = today.getMonth() - birthDate.getMonth(); 
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { 
      age--; 
    } 

    // use frm.set_value to set value of a field
    frm.set_value('age', age);
  },
  firstname: function(frm) {
    // getting data from form
    var first_name = frm.doc.firstname
    var last_name = frm.doc.lastname
    var full_name = firstname.concat(lastname)  
    
    // setting fullname in form
    frm.set_value('fullname', full_name);
  },
  lastname: function(frm) {
    // getting data from form
    var first_name = frm.doc.firstname
    var last_name = frm.doc.lastname
    var full_name = firstname.concat(lastname)  
    
    // setting fullname in form
    frm.set_value('fullname', full_name);
  }        
});

It is good practice to keep age and fullname fields as readonly since they are computed and wont be user inputs.

Frappe framework auto calcualte age and fullname

1 Answers1