【Bonita BPM】UI Designer - 加入CSS修改validate的樣式

tags: Bonita BPM UI Designer CSS

COMMON 概念解說

1. 目的：使欄位在valid、invalid、dirty不同的狀態下，透過不同的CSS樣式來凸顯不同狀態

2. 原圖：沒有修改CSS的樣式，欄位狀態在外觀上並沒有明顯差異
   

3. 加入CSS後：

   • 藍色為選取到正要填入資料的欄位
   • 綠色是資料填入格式正確
   • 紅色是資料填入"格式錯誤"、“資料填入後清除，又未填入資料”、“資料輸入錯誤”
   
   

CSS加入表單的位置：
在UI Designer的表單下方創建變數的位置，點選另一個tab：ASSETS，於此加入寫好的CSS檔案

程式碼

valid

.ng-valid {
   border-color: green;
   outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 4px rgba(102,233,102,.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 4px rgba(102,233,102,.6);
 }

invalid、dirty

可能出現兩種提示字樣：

1. This field is required：資料填入後清除，又未填入資料
2. This is not a valid date：格式錯誤，或 資料輸入錯誤

.ng-invalid.ng-dirty {
   border-color: red;
   outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233,175,102,.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233,175,102,.6);
}

Reference 參考資料

官方文件：https://documentation.bonitasoft.com/bonita/7.5/manage-control-in-forms#toc3