[Drupal] Webform tweak: 只顯示「必須填寫」 的欄位

Jiajun Xu 發表於 三, 07/24/2019 - 01:59

最近的專案裡,有項功能是「課程報名」。要在 Drupal 底下製作高度自訂性的表單,相信大家第一個想到的模組就是 Webform

為了讓用戶方便使用,我們先建立一個包含各類所需欄位的表單,例如姓名電話Email所屬單位性別葷素等等全部包進去,再到將 webform 設定成 "template",之後就可以輕鬆重製新的表單了。
(詳細說明可參見這篇 issue

但並不是每個課程,報名都要填那麼多的資料,例如公司的內部訓練,也許名字單位Email 這三項填一填就好了。
我原本想到的解法是,在 webform 裡頭設一個 fieldset,叫做「隱藏區」之類的,然後在前台用 CSS 把「隱藏區」藏起來;而用 webform template 新建表單的時候,把用不到的欄位拖曳到隱藏區就行了。
(當然直接刪除也可以啦)

但客戶覺得這樣還是太麻煩,希望使它成為「勾選要顯示的欄位」,而不是像上面說的那樣,「隱藏不需要的欄位」。
然而 Webform 的表單編輯頁面上,只有「必填 (required)」的欄位選項,而顯示/隱藏在頁面上看不到,必須進入各欄位的細項設定才能處理。

後來我的解法是,讓頁面只顯示「必填」 的欄位。
不過這跟最初想到的,用 CSS 隱藏的笨思維(XD) 不一樣 ,是直接從 theme template 去處理:


首先,我們可以從 twig debug 看到,webform 各個表單欄位的共用 template 是 "form-element.html.twig",這個 template 裡頭有一個變數叫做required,我們很簡單地用「required為真」的條件判斷把 template 的內容包起來就好了,寫成這樣:

{% if required %}
    …
    …
{% endif %}

(更多if的用法,可參考 twig 文件

但我寫完之後,發現前台沒反應!一查之下才知道這是個 bug,趕緊補上 patch,終於成功運作。

標籤 (Tags)