How can we update child table field label after render?

Frappe Framework Customization
,
1

Hello,

Is it possible to update a child table field label after the form has rendered?

I have a child table (Detail) that has week day fields (ex: monday, tuesday…).

I want to choose a date (week) in the parent record and for each day of the week, in the child table form, update the label to display the week day, month and day. (ex: Mon (May 15), Tuesday (May 16)).

I am able to update the field labels on the list and on the form using the onload event.

onload(frm) {
    if (frm.is_new()) {
      frm.trigger('week');
    } else {
      frm.set_df_property('week', 'label', `Week ${moment(frm.doc.week).week()}`);
      update_week_day_labels(frm)
    }
},
week(frm) {
    const startOfWeek = moment(frm.doc.week).startOf("week").format()
    frm.set_value("week", startOfWeek);
    frm.set_df_property('week', 'label', `Week ${moment(frm.doc.week).week()}`);
    update_week_day_labels(frm)
    frm.refresh()
},

Bellow is the helper function that updates the labels

const update_week_day_labels = function (frm) {

  const fieldNames = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"]
  const startOfWeek = moment(frm.doc.week).startOf("week").format()
  const fieldsMap = frappe.meta.docfield_map['Detail']

  fieldNames.forEach((fieldName, index) => {
    const date = moment(startOfWeek).add(index, 'days')
    // Format: WeekDay (Month Day)
    const label = `${date.format("ddd")} (${date.format("MMM D")})`
    // Updates field labels in form
    let field = frappe.meta.get_docfield("Detail", fieldName, frm.doc.name)
    field.label = label
    // Updates field labels in the grid
    fieldsMap[fieldName].label = label
  })
}

This works well when the form loads for the first time.
The problem is that when I change the week field value, I want to update the labels again. With this code the labels in the grid are updated, but the labels inside the child record form are not.

If we log the values in the code they are updated but it seems like the form does not rerender when we edit a record. Is it possible to trigger a rerender or am I missing something?

Thanks, João

2

Hi @joao.correia,

Please create custom fields in the child table for each week day. (e.g., monday_label, tuesday_label, etc.)

update_week_day_labels function to update the values of the custom fields based on the selected week in the parent record. the function sets the value of each custom field to the updated label.

As per the scenario, we just analyze it and modified the syntax.
Please set the field you’re according to.

onload(frm) {
  if (frm.is_new()) {
    frm.trigger('week');
  } else {
    frm.set_df_property('week', 'label', `Week ${moment(frm.doc.week).week()}`);
    update_week_day_labels(frm);
    frm.refresh();
  }
},
week(frm) {
  const startOfWeek = moment(frm.doc.week).startOf("week").format();
  frm.set_value("week", startOfWeek);
  frm.set_df_property('week', 'label', `Week ${moment(frm.doc.week).week()}`);
  update_week_day_labels(frm);
  frm.refresh();

  frm.toggle_display(["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"], false);
  frm.toggle_display(["monday_label", "tuesday_label", "wednesday_label", "thursday_label", "friday_label", "saturday_label", "sunday_label"], true);
}

const update_week_day_labels = function(frm) {
  const fieldNames = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];
  const startOfWeek = moment(frm.doc.week).startOf("week").format();

  fieldNames.forEach((fieldName, index) => {
    const date = moment(startOfWeek).add(index, 'days');
    const label = `${date.format("ddd")} (${date.format("MMM D")})`;
    const customFieldName = `${fieldName}_label`;

    frm.set_value(customFieldName, label);
  });
};

You’ll be able to update the labels dynamically based on the selected week in the parent record. The original weekday fields will be hidden, and the custom fields will be displayed with the updated labels.

I hope this helps.
Thank You!