【Bonita BPM】UI Designer - 有選項的元件 Select, CheckList, Radio Buttons

tags: Bonita BPM UI Designer

Common 基本介紹

• 有選項的元件

  1. Select
     

  2. CheckList
     

  3. Radio Buttons
     

• 共通的4個主要欄位

  

Available values

Can be a list of objects. Use ‘Displayed key’ to refine suggestions and ‘Returned key’ to refine selection

1. JSON 是什麼?
   • 物件(object)用大括號 { }
   • 陣列(array)用中括號 [ ]
   • object 用 key-value的方式儲存
   • 1個 key (鍵值)，對應1個 value (值)
2. Available values是在說選項有哪些，接受的格式為
   • 直接輸入：e.g. green, red, blue
   • JSON格式：e.g. [{“display”:“北京”,“value”:“北京”}, {“display”:“上海”,“value”:“上海”}, {“display”:“广州”,“value”:“广州”}]
3. 通常的做法是塞一個JSON格式的變數給Available values
4. 資料如果從後端來的，可能會遇到資料不符合JSON格式的問題，發生這個問題的原因，是因為在前端透過API (../API/bpm/caseVariable/{{caseId}}/example) 呼叫Process variables (example.value) 時，Bonita會自動將該資料的型態全部轉成String
5. 解決方法1：因此在後端必須先自行刻成JSON格式的String，到前端的String資料再透過 JSON.parse() 轉型成JSON格式
   • 後端

   def list = []
   
   list.add('{"display":"北京","value":"北京"}')
   list.add('{"display":"上海","value":"上海"}')
   list.add('{"display":"广州","value":"广州"}')
   
   return list
   

   • 前端

   return JSON.parse($data.region.value);
   

6. 解決方法2：將資料存在Business variables，而非Process variables，如此一來就不會遇到 “Bonita會自動將該資料的型態全部轉成String” 的問題，在前端透過API (../{{context.Business variables名稱_ref.link}}/applyInfo) 呼叫Business variables時，資料會直接是JSON格式

Displayed key

Object key to display

1. Displayed key就是選擇 “要呈現在選項中的資料” 的key
2. 在Available values中選擇你要呈現的key

Returned key

The name of the key to use as value. Leave it empty for whole object.

1. Returned key就是選擇 “要儲存在Value的資料” 的key
2. 在Available values中選擇你要儲存的key

Value

Read-write binding, initialized or updated by users’ input (bi-directional bond)

1. 通常是用來儲存使用者選到了哪個選項，儲存的資料為指定的Returned key
2. Value除了可以在前端作運用，也可以透過Submit Data傳到後端做運用，或資料儲存

Reference 參考資料

1. JSON格式：http://j796160836.pixnet.net/blog/post/30530326-瞭解json格式