什麼是 TagEdit?
TagEdit 是 Genero Browser Client 5.01.06 引入的自訂 widget,提供多值輸入介面——類似電子郵件的收件人欄位或 JIRA 的標籤輸入框。使用者可以在單一欄位中輸入並管理多個值,每個值以獨立的圖形化標籤(tag/chip)呈現。
「核心特性是在同一個 widget 中輸入一個或多個值,UI 提供新增、移除,以及直接在 widget 中輸入的方式。」
其他框架可能將這種功能稱為 Multi-Select,而標籤本身可能被稱為 tag、brick 或 chip。
透過 Presentation Styles 實作
TagEdit 透過 Presentation Styles 的 customWidget 屬性套用到 EDIT 或 BUTTONEDIT widget 上:
<Style name="Edit.multiselect">
<StyleAttribute name="customWidget" value="tagEdit" />
</Style>
目前需透過 Presentation Styles 設定,未來版本可能支援在 Genero Studio 中直接指定 widget 類型。
資料格式
TagEdit 的值存放在單一 STRING 或 CHAR 變數中(非陣列),以分號分隔:
"value1;value2;"
注意事項:
- 分隔符號固定為分號,無法變更
- 值本身不能包含分號(無跳脫機制)
- 每個值後面都有分號,包含最後一個值
程式實作要點
在 .4st 樣式檔中設定
<Style name="Edit.multiselect">
<StyleAttribute name="customWidget" value="tagEdit" />
</Style>
在 .per 表單檔中設定
為欄位加上 STYLE 屬性,以及需要 COMPLETER 屬性用於自動完成功能:
EDIT countries STYLE="multiselect" COMPLETER="countries_completer"
在 .4gl 程式中處理
關鍵邏輯在 ON CHANGE 事件中,以「國家」欄位為例,需要三個核心操作:
1. 分割前綴與目前輸入值
CALL split_on_last_semi_colon(filter) RETURNING prefix, filter
此函式將欄位的當前值在最後一個分號處分為兩部分:前綴(已選取的值)和目前正在輸入的值。
2. 查詢資料庫取得候選清單
OPEN country_curs USING filter
使用目前輸入的部分字串來查詢符合的選項。
3. 在 COMPLETER 清單中加入前綴
LET completer_list[i] = SFMT("%1;%2;", prefix, country_name CLIPPED)
「如果使用者已選取 foo 並輸入 b 開始新增值,COMPLETER 清單中的項目應為 'foo;bar;',而非只有 'bar'。」
使用者操作體驗
使用者可以:
- 點擊標籤上的 X 移除已選取的值
- 從自動完成清單中選取項目
- 直接輸入新值
allowTagCreation 設定
allowTagCreation 這個 Presentation Style 屬性控制使用者是否能自行輸入新值,或只能從預先定義的清單中選取。
資料儲存
開發人員須自行決定如何將值存回資料庫:可以直接存入足夠大的 CHAR/VARCHAR 欄位,或以分號分割後逐筆寫入資料表(每個標籤一列)。