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()
方法,取得目前登入者的語言代碼(例如 en
、ja
、zh-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
物件中定義了各選項(如 sample1
、sample2
)在不同語言環境下的顯示文字,作為對照表。kintone.getLoginUser().language
取得目前使用者的語言代碼。除了「下拉式選單」之外,像是「選項按鈕(Radio Button)」、「核取方塊(Check Box)」、「流程狀態(Status)」與「流程動作(Action)」等,也都會受到 kintone 多語言設定的影響。在這些情境下,若有額外的客製化介面(UI)或條件判斷邏輯,也同樣建議以「變數集中管理」的方式,定義各語系對應的顯示文字或選項值。
即使應用本身未啟用多語言設定,只要某些欄位的選項名稱有可能在未來變動,或是被多段邏輯重複使用,也很適合用此方法來統一管理。將選項內容抽離至獨立物件變數,不僅提升程式碼的可讀性與一致性,當選項名稱需要調整時,也只需修改定義區塊即可,大幅降低維護成本,避免散落在程式中的硬編碼造成錯誤或疏漏。
善用這樣的寫法,不只能對應多語言的顯示需求,也能建立起一套更穩定、易於擴充與維護的客製化程式架構!