About some mobile display issues

General
1

Question / Problem

I made a customization for record list view.
I put a button in the header space. When the user clicks the button, it sums up a number field (expense) of all the records in the current list and shows the total.

Here are the details:

  • It works fine on Desktop browser.
  • I uploaded the same file also to the "Upload JavaScript for Mobile" setting.
  • But on the smartphone app, nothing appears and no any errors.

I don't understand why the same code works on PC but not on mobile. The app is the same, the field is the same. Can I not use the same customization for both?
:backhand_index_pointing_down:Here is my code!

Code / Attempts

(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    const spaceElement = kintone.app.getHeaderMenuSpaceElement();
    const button = document.createElement('button');
    button.textContent = 'Calculate Total';

    button.onclick = () => {
      kintone.api('/k/v1/records', 'GET', {
        app: kintone.app.getId(),
        query: kintone.app.getQueryCondition()
      }, (resp) => {
        let total = 0;
        resp.records.forEach((record) => {
          total += Number(record.expense.value);
        });
        alert('Total: ' + total);
      });
    };

    spaceElement.appendChild(button);
    return event;
  });
})();

Any help is appreciated. Thank you!

2

Hello @kokonuts

Uploading the same JavaScript file to the mobile customization settings does not automatically make the Desktop APIs and events work on mobile.

In your code, the following are Desktop-specific:

app.record.index.show
kintone.app.getHeaderMenuSpaceElement()
kintone.app.getQueryCondition()
kintone.app.getId()

For mobile, you will need to use their mobile counterparts, such as:

mobile.app.record.index.show
kintone.mobile.app.getHeaderSpaceElement()
kintone.mobile.app.getQueryCondition()
kintone.mobile.app.getId()

You can use the same customization file for both Desktop and Mobile, but you need to use the appropriate event and APIs for each environment.

Also, please keep in mind that the Get Records API retrieves a maximum of 500 records per request. If the current list can contain more than 500 matching records, additional handling would be necessary to calculate the total for all records.

I hope this helps.