🚀 HCL Domino XPages 進階實務：PickList 視圖挑選、TokenInput 多選與 REST 服務整合 (Lesson 10-4)

Описание: 在本集教學中，我們將學習如何實作類比傳統 Notes Client PickList 的網頁功能。您將學會利用 Bootstrap Dialog 嵌入 XPages 視圖，並透過 JavaScript 與父視窗連動 實現單選人員帶值。同時，我們也將引入 jQuery TokenInput 插件，教您如何建立 REST 服務 或自定義 JSON 接口，打造具備自動完成（Auto-complete）功能的人員多選標籤系統，大幅提升企業系統的填單效率與視覺美感。

💡 核心學習重點
XPages 版 PickList 實作：

視圖嵌入：在對話框中呈現 XPages View，並利用視圖內搜尋功能進行快速過濾。

跨視窗連動：撰寫 window.parent 函數，實作選取明細後自動塞回母單主欄位（包含隱藏的 ID 與中文名）。

jQuery TokenInput 標籤多選：

多維搜尋：不限於開頭匹配，支援輸入工號、姓名或英文名進行模糊檢索。

標籤化 UI：實現如 Facebook 風格的人員選擇標籤，支援動態新增與刪除。

JSON 與 REST 資料整合：

資料接口開發：學習利用 beforeRenderResponse 階段手動組出標準 JSON 格式字串。

REST 服務應用：示範利用 XPages 原生 REST 服務組件快速產出視圖資料供外部套件調用。

模組化設計技巧：

通用對話框：透過傳入參數（Parameter）區分觸發者（如業務人員 vs 會簽人員），實現同一組 Code 重複利用。

預設值回填：解決對話框重新開啟時，原本已選的人員標籤無法自動帶入的技術難題。

⏰ 影片章節 (Timestamps)
[00:00] 課程導覽：模擬傳統 Notes PickList 的 XPages 實作方案
[00:48] PickList 實作：利用 Bootstrap Dialog 彈出視圖選擇視窗
[01:58] 搜尋回顧：複習在對話框 View 中實作 FTSearch 關鍵字檢索
[03:45] 前端傳值術：在 View 直欄撰寫 HTML 與 JS 將選定值塞回父視窗
[05:44] 程式碼解析：Dialog 視窗的 URL 參數組成與 Parent 函數呼叫邏輯
[07:02] 欄位設計：同時處理畫面的顯示值與後台的隱藏 ID 存取
[08:43] 選單進化：引入 jQuery TokenInput 實現人員多選標籤系統
[09:47] 體驗優勢：支援空值載入、工號與姓名模糊搜尋的優點分析
[11:47] 實機演練：演示 TokenInput 選擇流程與標籤新增/刪除效果
[12:57] 技術準備：引入 TokenInput 的 CSS、JS 資源與主題樣式
[14:42] 資料引擎：實作 JSON 網頁接口，將人員組織庫轉為 API 格式
[16:52] 深度解析：利用 StringBuilder 與 JavaScript 迴圈手動組建 JSON Array
[19:00] REST 選項：介紹 XPages 原生 REST 服務組件及其 PathInfo 設定
[21:12] TokenInput 邏輯：撰寫 add 與 delete 事件處理隱藏欄位的資料同步
[25:35] 模組化參數：透過 switch 判斷帶回值的目標欄位（會簽人 1 vs 2）
[28:18] 生命週期優化：實作 afterPageLoad 邏輯，確保再次開啟時標籤自動回填
[31:46] 課程總結：回顧發票申請單實戰案例與專案移植建議

關於 先宏資訊 (XRed Information) 我們專精於 HCL Notes/Domino 技術開發、系統升級與 AI 整合應用。若您的企業需要專業的技術支援或開發培訓協助，歡迎與我們聯繫。
#HCLDomino #XPages #PickList #TokenInput #RESTService #JSON #Domino教學 #先宏資訊 #XRedInformation #發票系統實戰 #jQuery套件 #網頁開發實戰