什麼是 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 欄位,或以分號分割後逐筆寫入資料表(每個標籤一列)。

原文:https://4js.com/ask-reuben/ig-312/  ·  有任何 Genero 技術問題或翻譯疑問,歡迎來信 support@t100.app