为了让使用者在不同装置上享有更好的使用体验，kintone 支援电脑版与行动版两种介面。透过 JavaScript/CSS 的自订设定，开发者可以针对这两种介面进行客制化，实现功能与界面的最佳化。

电脑版与行动版的 kintone 事件差异

kintone 的电脑版与行动版在事件触发时有所不同，以下列出几个常用事件的比较：

事件触发时机
电脑版事件
行动版事件
显示记录详情画面后 app.record.detail.show mobile.app.record.detail.show
显示新增记画面后 app.record.create.show mobile.app.record.create.show
显示记录编辑画面后 app.record.edit.show mobile.app.record.edit.show
显示清单画面后 app.record.index.show mobile.app.record.index.show
在清单画面开始编辑记录时 app.record.index.edit.show 无

可以看到，行动版的事件名称多了一个「mobile.」前缀。如果要针对行动版介面进行客制化，需注册对应的事件。此外，某些功能仅支援电脑版，例如「清单画面中的记录编辑」不适用于行动版。

此外，电脑版和行动版可支援的事件也不完全相同，例如「在清单画面开始编辑记录时」的事件仅对应电脑版，因为行动版画面中并不能在清单画面中直接编辑记录。

kintone JavaScript API 的电脑版与行动版差异

kintone JavaScript API 在电脑版与行动版中也有所不同，特别是在画面相关的功能上。以下是常见 API 的比较：

API
电脑版
行动版
显示/隐藏栏位 kintone.app.record.setFieldShown() kintone.mobile.app.record.setFieldShown()
取得栏位元素 kintone.app.record.getFieldElement() kintone.mobile.app.record.getFieldElement()
取得空白栏元素 kintone.app.record.getSpaceElement() kintone.mobile.app.record.getSpaceElement()
获取选单的上部元素 kintone.app.record.getHeaderMenuSpaceElement() 无
获取页首的下部元素 无 kintone.mobile.app.getHeaderSpaceElement()
取得记录ID kintone.app.record.getId() kintone.mobile.app.record.getId()
取得记录值 kintone.app.record.get() kintone.mobile.app.record.get()
设置记录值 kintone.app.record.set() kintone.mobile.app.record.set()
取得应用程式ID kintone.app.getId() kintone.mobile.app.getId()

完整的 API 资讯可参考官方文件：kintone JavaScript API

合併电脑版与行动版的客制化程式码

由于 kintone 的电脑版与行动版画面结构不同，针对画面呈现相关的功能，可能需要分别开发。然而，如果功能与逻辑相同，将程式码分开开发与维护并不高效。我们可以使用以下技巧将两者整合在一起：

  • 利用事件物件的 type 属性来判断介面类型

    • 例如，event.type 若包含 "mobile"，则为行动版。
  • 动态选择对应的 kintone API 物件

    • 根据判断结果，使用 kintone 或 kintone.mobile。

    • 以下是范例程式码：

    kintone.events.on([
    \'app.record.detail.show\',
    \'mobile.app.record.detail.show\'
    ], event => {
    const { type } = event
    const k = type.includes(\'mobile\') ? kintone.mobile : kintone
    const loginUser = kintone.getLoginUser()

    if (loginUser.isGuest) {
    k.app.record.setFieldShown(\'fieldA\', false)
    k.app.record.setGroupFieldOpen(\'groupA\', false)
    }

    return event
    })

    以上范例在访客空间的应用程式中，进入记录详情页面时，根据登入使用者是否为访客帐号来隐藏栏位「fieldA」以及收合群组「groupA」。

    说明：

    • 因为我们希望在电脑版和行动版页面上都实现相同的效果，所以在注册事件处理器（event handler）时，必须同时加入两个事件：app.record.detail.show 和 mobile.app.record.detail.show。
    • event.type：代表触发事件的类型。在电脑版页面触发时，其值为 \'app.record.detail.show\'；而在行动版页面触发时，则为 \'mobile.app.record.detail.show\'。
    • 使用变数 k 统一操作对应的 kintone API：透过 type.includes(\'mobile\') 判断是否为行动版页面。如果是行动版，则选择 kintone.mobile；如果是电脑版，则选择 kintone。
    • 利用 kintone.getLoginUser() 获取登入使用者的资讯，并使用 loginUser.isGuest 判断该使用者是否为访客帐号。需要注意的是，kintone.getLoginUser() API 的用法在电脑版与行动版是一致的，因此这里仍直接使用 kintone，而不是使用我们定义的变数 k。

    结语

    kintone 提供了电脑版与行动版的多元 API 支援，使开发者可以针对不同装置进行客制化。然而，开发过程中应特别注意两者的差异，避免使用不支援的事件或 API。透过整合程式码的方式，不仅能提升维护效率，也能确保功能的一致性与稳定性。

    善用 event.type 与动态选择 API 的技巧，能有效减少重复的程式码撰写，让开发工作更为简洁高效。希望本文提供的资讯能帮助您在 kintone 的客制化开发中更得心应手！