🚀 HCL Domino XPages 進階實務：PickList 視圖挑選、TokenInput 多選與 REST 服務整合 (Lesson 10-4) скачать в хорошем качестве

🚀 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套件 #網頁開發實戰