為了讓使用者在不同裝置上享有更好的使用體驗,kintone 支援電腦版與行動版兩種介面。透過 JavaScript/CSS 的自訂設定,開發者可以針對這兩種介面進行客製化,實現功能與界面的最佳化。
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 在電腦版與行動版中也有所不同,特別是在畫面相關的功能上。以下是常見 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
或 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」。
說明:
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 的客製化開發中更得心應手!