Cannot override value for the calculated field with JavaScript

General
1

Question / Problem

I cannot override the calculated field using JavaScript.

Current Situation

I created a Sales app that manages deals. The calculated field "total" calculates "unit_price*quantity". This works fine.

The app has these fields:

  • Number field (unit_price)
  • Number field (quantity)
  • Calculated (total, formula is unit_price * quantity)
  • Blank space (discount_space)

I want to add a discount feature with JavaScript. On the record add/edit screen, I placed two buttons, "10% discount" and "25% discount". When the user clicks a button, I get the record data with kintone.app.record.get(). I calculate the new "total" value, and set it back with kintone.app.record.set().

But nothing changes on the screen when the button is clicked.

Code / Attempts

(function() {
  'use strict';

  const events = ['app.record.create.show', 'app.record.edit.show'];

  kintone.events.on(events, function(event) {
    let spaceElement = kintone.app.record.getSpaceElement('discount_space');

    let btn10 = document.createElement('button');
    btn10.textContent = '10% discount';
    btn10.onclick = function() {
      let record = kintone.app.record.get();
      let currentTotal = Number(record.record.total.value);
      record.record.total.value = currentTotal * 0.9;
      kintone.app.record.set(record);
    };

    let btn25 = document.createElement('button');
    btn25.textContent = '25% discount';
    btn25.onclick = function() {
      let record = kintone.app.record.get();
      let currentTotal = Number(record.record.total.value);
      record.record.total.value = currentTotal * 0.75;
      kintone.app.record.set(record);
    };

    spaceElement.appendChild(btn10);
    spaceElement.appendChild(btn25);

    return event;
  });
})();

Error Message

No error message

Desired Outcome / Expected Behavior

The discount is applied to the Calculated value.

2

Hello @rain

The reason your code isn't working is that Calculated fields are read-only and their values cannot be overwritten using JavaScript customization, including kintone.app.record.set(), which is documented in the Event Object Actions documentation under the "Fields that cannot be overwritten" section.

Instead of modifying the Calculated field directly, one approach would be to add a separate Number field to manage the discount rate and include it in the calculation formula.

For example, you can try the following:

1. Add a new Number field

  • Field code: discount_rate

  • Default value: 0

2. Update the formula of your Calculated field (total)

unit_price * quantity * (100 - discount_rate) / 100

3. Modify your JavaScript to update the discount rate instead

(function() {
  'use strict';

  const events = ['app.record.create.show', 'app.record.edit.show'];

  kintone.events.on(events, function(event) {
    const spaceElement = kintone.app.record.getSpaceElement('discount_space');

    function addDiscountButton(label, rate) {
      const button = document.createElement('button');
      button.type = 'button';
      button.textContent = label;

      button.onclick = function() {
        const record = kintone.app.record.get();

        record.record.discount_rate.value = String(rate);

        kintone.app.record.set(record);
      };

      spaceElement.appendChild(button);
    }

    addDiscountButton('10% discount', 10);
    addDiscountButton('25% discount', 25);

    return event;
  });
})();

With this approach, clicking either button updates the discount_rate field, and Kintone automatically recalculates the total field based on the selected discount.

For example, if the unit price is 100 and the quantity is 5, clicking the 10% discount button changes the total from 500 to 450, while clicking the 25% discount button changes it to 375.

I hope this helps!