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

tags: Bonita BPM UI Designer

Common 基礎知識

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

IframeWidget

Properties 屬性

• hostnameValue
  • Label: Hostname
  • Treat as Dynamic value
  • Type: text
• invoiceId
  • Label: InvoiceId
  • Treat as Dynamic value
  • Type: text
• height
  • Label: Height
  • Treat as Dynamic value
  • Type: integer

Assets 外加檔案

• iframWidget.css

Template 視圖

<iframe id="iframe" ng-src="{{url}}" class="fullWidth" style="height:{{properties.height}}px"></iframe>

Controller 控制器

function ($scope, $sce) {
    var invoiceId = $scope.properties.invoiceId;
    var hostnameValue = $scope.properties.hostnameValue;
    $scope.url = $sce.trustAsResourceUrl(hostnameValue+"example"+invoiceId+"example");
}

Reference 參考資料

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

Part3：ImageWidget

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