How to change kintone table column headers at run-time?

1

In my detail edit page, I have a date field for “Service Start Date” and a table for summarizing the total hours worked starting from the “Service Start Date”.

The table has the column headers of “Day 1”, “Day 2”, …“Day 14” when the detail edit page is initially loaded.

When the “Service Start Date” date field is changed, I want to change the “Day 1” …“Day 14” column headings to actual dates such as “04/26”.

Is it possible to do this?

The table has a field code of “hours_table”.
The “Service Start Date” has a field code of “service_start_date”

2

Hi annaylee,

DOM manipulation is required to change table column names on the record edit screen.
In addition, date calculations can be performed flexibly by utilizing libraries such as “Luxon” for date manipulation.

Customize Date Formats

moment/luxon

The “kintone” API provides events that can execute processing at the timing when a record is added, edited, a detail screen is opened, or when any field value is changed.

Record Create Events

Record Edit Event

Record Details Event

Field Change Event - app.record.edit.change.<>

Field Change Event - app.record.create.change.<>

In each event, after obtaining the value of the “service_start_date” field, use “Luxon” to calculate each date. After that, the table column names can be retrieved and changed using DOM manipulation to achieve the desired behavior.

The following processing was executed as a trial, and it was possible to change the table column names within each event.

<< Ex >>
Suppose that Text fields such as “Day 1” and “Day 2” are placed in the table.

   (function() {
     "use strict";
     
     var wEvents = [
       "app.record.create.show",
       "app.record.edit.show",
       "app.record.detail.show",
       "app.record.create.change.service_start_date",
       "app.record.edit.change.service_start_date"
     ];
     
     kintone.events.on(wEvents, function(event) {

       let record = event.record;
       let wDate = record["service_start_date"].value;
       if(!wDate){
         return;
       }

       let sDate = ""; 

       wDate= luxon.DateTime.fromISO(wDate);

       var wEle = document.getElementsByClassName("subtable-label-inner-gaia");
       for (let i = 0; i < wEle.length; i++) {
         sDate = wDate.plus({days: i});
         wEle[i].innerText = sDate.toFormat('MM/dd');
       }

     });

   })();


※The following library must also be added at the top of the "App Settings > Customize with JavaScript / CSS" screen.

・https://js.cybozu.com/luxon/2.3.2/luxon.min.js

Hopefully, this helps.
1 Like