【Bonita BPM】UI Designer - 如何使Select元件彼此有關聯

tags: Bonita BPM UI Designer

Common 概念

• 何謂使Select元件彼此有關聯?
  假設現在有SelectA, SelectB
  當SelectA選擇了A1，會使得SelectB的選單調整成對應到A1的選單
  當SelectA選擇了A2，會使得SelectB的選單調整成對應到A2的選單
  …以此類推

Example 範例

SelectA

• Available values：selectAList

[{"id":1, "display":"外部","value":"外部"},
 {"id":2, "display":"内部","value":"内部"}]

• Displayed key：display
• Returned key：value
• Value：selectAValue

SelectB

• selectBList

[{"selectA_id":1, "display":"软件","value":"软件"}, 
 {"selectA_id":2, "display":"设备1","value":"设备1"},
 {"selectA_id":1, "display":"设备2","value":"设备2"},
 {"selectA_id":1, "display":"扫描","value":"扫描"},
 {"selectA_id":2, "display":"租机","value":"租机"},
 {"selectA_id":2, "display":"设备3","value":"设备3"})

• Available values：relateSelectBList

var selectAList = JSON.parse($data.selectAList.value);
var selectAValue = $data.selectAValue;
var selectBList = JSON.parse($data.selectBList.value);

// filter selectAValue
var selectAId = selectAList.filter(function(temp){
    return temp.value == selectAValue;
})[0].id;

// filter level4Value
return selectBList.filter(function(temp){
    return temp.selectA_id == selectAId;
});

• Displayed key：display
• Returned key：value
• Value：selectB

Reference 參考資料

1. JavaScript filter：https://stackoverflow.com/questions/7364150/find-object-by-id-in-an-array-of-javascript-objects