【Bonita BPM】UI Designer 客製化元件 實際範例 - Part1：TableWithCheckbox

tags: Bonita BPM UI Designer

Common 基礎知識

【Bonita BPM】UI Designer 客製化元件 - Part1：基礎知識

TableWithCheckbox

Properties 屬性

• availableValues
  • Label: Available values
  • Treat as Dynamic value
  • Type: text
• returnedKey
  • Label: Returned key
  • Treat as Dynamic value
  • Type: text
• selectedValues
  • Label: Selected values
  • Treat as Bidirectional bond

Assets 外加檔案

• tableWidget.css

Template 視圖

<table border="1" class="widthFull blueTable">
    <thead>
        <tr>
            <th class="widthChecked"></th>
            <th class="widthId alignCenter">No.</th>
            <th class="widthNumber alignCenter">发票号码</th>
            <th class="widthMoney alignCenter">金额</th>
            <th class="widthMoney alignCenter">状态</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="invoice in ctrl.init()">
            <td><input type="checkbox" ng-model="invoice.checked" style="{{invoice.disabled}}"></td>
            <td>{{$index+1}}</td>
            <td>{{invoice.number}}</td>
            <td class="alignRight">{{invoice.money}}</td>
            <td>{{invoice.status}}</td>
        </tr>
    </tbody>
</table>

Controller 控制器

function ($scope) {
    this.init = function(){
        $scope.invoices = $scope.properties.availableValues;
        var returnedKey = $scope.properties.returnedKey;
        var list = [];
        
         for (var i=0; i<$scope.invoices.length; i++){
            if ($scope.invoices[i].status !== "已开出"){
               $scope.invoices[i].disabled = "display:none;";
            }
        }
        
        for (var i=0; i<$scope.invoices.length; i++){
            if ($scope.invoices[i].checked === true){
                var obj=$scope.invoices[i];
                list.push(obj);
            }
        }
        $scope.properties.selectedValues = list;
        return $scope.invoices;
    };
}

Reference 參考資料

1. Bonita UI，CUSTOM WIDGET EDITOR上的範例及解說

Part2：IframeWidget

連結：【Bonita BPM】UI Designer 客製化元件 實際範例 - Part2：IframeWidget