iT邦幫忙

0

【kintone】客製化入門 - kintone 電腦版/行動版 API 的差異與使用小訣竅

  • 分享至 

  • xImage
  •  

為了讓使用者在不同裝置上享有更好的使用體驗,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 的電腦版與行動版畫面結構不同,針對畫面呈現相關的功能,可能需要分別開發。然而,如果功能與邏輯相同,將程式碼分開開發與維護並不高效。我們可以使用以下技巧將兩者整合在一起:

  1. 利用事件物件的 type 屬性來判斷介面類型
    • 例如,event.type 若包含 "mobile",則為行動版。
  2. 動態選擇對應的 kintone API 物件
    • 根據判斷結果,使用 kintonekintone.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.showmobile.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 的客製化開發中更得心應手!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言