JIRA自定義一個優雅的可多選下拉列表
- 2019 年 12 月 16 日
- 筆記
公司PMO最新發布的規範，需要在每個JIRA故事裡輸入涉及上線的應用系統名稱，最開始就是自定義了一個最簡單的文本框，讓Owner自己填寫，多個系統逗號分隔。後來在數據統計的過程中發現系統應用名每個人寫的千奇百怪，難於對齊。所以考慮將所有的系統應用名稱導入到JIRA中，讓Owner直接選擇減少出錯概率。但是JIRA內嵌的幾個標準自定義控制項，實在是不好用。
自定義欄位的路徑是：右上角的「JIRA管理」 ->「問題」->「自定義欄位」->"添加"，可多選的欄位類型如下。
- 多個checkbox的複選框，對於我們上百個的微服務系統，全部陳列到一個頁面，那簡直沒法看，故而放棄。
- Select List(多選)是個帶垂直滾動條的多選框，這個控制項也有問題，若上百個系統在裡面滾動，多選需要按住Ctrl來多選，而且在滾動過程中，如果不小心沒按住Ctrl，之前其他人選擇的系統名稱，可能就丟了，不直觀。
- Select List(級聯) 場景不合適，忽略。
checkbox 和 多選列表效果如下圖所示。
那麼有沒有一種更優雅的方式，可以在下拉列表中多選，而且每次選擇後可以有直觀的提示我選擇了哪些呢？當然有！而且只需要簡單的幾行程式碼。步驟如下：
1.繼續之前的路徑，在自定義欄位介面，仍然選擇Select List(多選)；
2.名稱隨便輸入一個你想要在Issue編輯頁上顯示的名字，比如我這裡是叫"Related Applications"；
3. 描述文本框留空，本文最關鍵的幾行程式碼就是要存到這個「描述」里；選項先隨便填入一個，確定即可；
4. 進入JIRA的資料庫中，運行如下SQL，找到這個ID，比如是12000；
select id from customfield where cfname='Related Applications'; //cfname就是剛才你自定義欄位的名稱
5.複製如下的程式碼，將裡面的<cf-id>替換為上一步從資料庫里查詢到的ID，比如customfield_<cf-id>
替換後變為(注意不要不小心加入空格啥的)
customfield_12000
<script type="text/javascript"> (function($) { AJS.$("#customfield_<cf-id> option[value='-1']").remove(); //Removes the default value "None" function convertMulti(id){ if (AJS.$('#'+id+"-textarea").length == 0){ new AJS.MultiSelect({ element: $("#"+id), itemAttrDisplayed: "label", errorMessage: AJS.params.multiselectComponentsError }); } } AJS.toInit(function(){ convertMulti("customfield_<cf-id>"); }) JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) { AJS.$("#customfield_<cf-id> option[value='-1']").remove(); convertMulti("customfield_<cf-id>"); });})(AJS.$); </script>
6. 從JIRA管理重新進入"自定義欄位"，選擇"編輯"，將上一步全局替換完畢的程式碼黏貼到「描述」中，保存；
7. 退出繼續對自定義欄位「配置」多個可選項，手動一個一個添加吧…
我曾經試過直接在資料庫表 customfieldoption中插入，後來會引起ID衝突，全部回滾了。如果真的太多選項，你可以網頁抓一下network找到那個jspa介面，自己寫程式碼調用介面也可以。反正盡量不要直接操作資料庫。
大功告成！！！
