iT邦幫忙

0

【kintone】客製化小訣竅-多語言對應:用物件變數管理下拉選單選項文字

  • 分享至 

  • xImage
  •  

kintone 提供了「下拉式選單」欄位元件,可在應用程式設定中自訂選項內容,並支援多語言對應。每個選項皆可針對不同語言設定顯示文字,讓使用者根據自身語言環境看到對應翻譯。

除了畫面上顯示的選項文字外,透過 event.record 物件或 REST API 取得的欄位值,也會根據登入者的語言設定,自動回傳對應語言的內容。

以下範例為在「繁體中文」環境下建立的應用程式,其中的「下拉式選單」欄位已設定英文與日文的多語言對應文字:

加入以下客製化程式碼後,可以即時將下拉選單的值顯示在另一個單行文字方塊中:

(() => {
  'use strict'

  const dropdownCode = '下拉式選單'

  kintone.events.on([
    'app.record.create.show', 'app.record.edit.show',
    `app.record.create.change.${dropdownCode}`,
    `app.record.edit.change.${dropdownCode}`
  ], event => {
    const { record } = event
    const dropdownValue = record[dropdownCode]?.value || ''
    record['單行文字方塊'].value = dropdownValue
    return event
  })
})()

當使用者操作下拉選單時,程式會透過 event.record 取得該欄位的目前值,並寫入至單行文字方塊中。


可以觀察到:
當使用者語言為「繁體中文」時,record.下拉式選單.value 會取得繁體中文設定的選項;
當語言切換為「日文」時,則會取得對應的日文文字。
這代表 kintone 會根據登入者語言自動轉換選項值,而不是使用固定值。

這個行為在使用 kintone REST API 取得資料時同樣適用。API 回傳的欄位值,會依照執行該 API 時所使用的身份之語言設定,自動對應並回傳該語言的選項文字。
(如以 API Token 進行驗證,則取決於 Administrator 的語言設定)

換句話說,不論是透過畫面操作還是透過程式呼叫,kintone 都會根據「使用者語系」來決定下拉選單的顯示內容與實際值。因此,當客製化程式中需要根據下拉選單的值進行條件判斷時,就必須特別留意多語言設定所帶來的差異,否則可能會因語系不同而導致邏輯錯誤。

若希望程式碼中的判斷邏輯也能因應使用者語言取得相對應的結果,可以透過 kintone JavaScript API 提供的 kintone.getLoginUser() 方法,取得目前登入者的語言代碼(例如 enjazh-TW),並配合物件變數統一管理多語言對應的選項值。

(() => {
  'use strict'

  const dropdownCode = '下拉式選單'

  // 定義下拉選單選項在各語言下的顯示文字
  const options = {
    sample1: {
      'en': 'sample1',
      'ja': 'サンプル1',
      'zh-TW': '範例1'
    },
    sample2: {
      'en': 'sample2',
      'ja': 'サンプル2',
      'zh-TW': '範例2'
    }
  }

  kintone.events.on([
    'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show',
    `app.record.create.change.${dropdownCode}`,
    `app.record.edit.change.${dropdownCode}`
  ], event => {
    const { record } = event
    const dropdownValue = record[dropdownCode]?.value || ''
    
    // 取得目前登入使用者的語言代碼
    const lang = kintone.getLoginUser().language

    // 根據語言代碼判斷目前選到的是不是 sample2
    if (dropdownValue === options.sample2[lang]) {
      // 若選到 sample2,顯示「單行文字方塊」欄位
      kintone.app.record.setFieldShown('單行文字方塊', true)
    } else {
      // 其他選項則隱藏該欄位
      kintone.app.record.setFieldShown('單行文字方塊', false)
    }

    return event
  })
})()

程式碼說明

  • options 物件中定義了各選項(如 sample1sample2)在不同語言環境下的顯示文字,作為對照表。
  • 使用 kintone.getLoginUser().language 取得目前使用者的語言代碼。
  • 根據目前下拉選單的值與該語言所對應的選項文字做比對,來決定是否顯示指定欄位。
  • 這種寫法能夠避免硬編碼選項值,提高未來的維護彈性,也讓多語言應用更穩定可靠。

結語

除了「下拉式選單」之外,像是「選項按鈕(Radio Button)」、「核取方塊(Check Box)」、「流程狀態(Status)」與「流程動作(Action)」等,也都會受到 kintone 多語言設定的影響。在這些情境下,若有額外的客製化介面(UI)或條件判斷邏輯,也同樣建議以「變數集中管理」的方式,定義各語系對應的顯示文字或選項值。

即使應用本身未啟用多語言設定,只要某些欄位的選項名稱有可能在未來變動,或是被多段邏輯重複使用,也很適合用此方法來統一管理。將選項內容抽離至獨立物件變數,不僅提升程式碼的可讀性與一致性,當選項名稱需要調整時,也只需修改定義區塊即可,大幅降低維護成本,避免散落在程式中的硬編碼造成錯誤或疏漏。

善用這樣的寫法,不只能對應多語言的顯示需求,也能建立起一套更穩定、易於擴充與維護的客製化程式架構!


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言