Adding a Business Component to Your Application

The HTML document to which you want to add the business component must:
  • include the following libraries. (tcf.nocache.js contains the controllers and underlying framework logic used by each component service. The other libraries provide additional core functions used by component services) 
    <script type="text/javascript" src="/apps/app-cdn/tcf/tcf.nocache.js"></script>
<script type="text/javascript" src="/apps/app-cdn/jquery/jquery-3.1.1.js"></script>
<script src="/apps/app-cdn/angular/1.6.0/angular.min.js"></script>
<script src="/apps/app-cdn/angular-ui-grid/ui-grid.min.js"></script>
  • attach an application controller to the DOM.
  • add the HTML element for the business component you want to include.

The associated application controller must:

  • specify a dependency on any required component services.
  • define and set the required component data to be passed in the HTML element attributes.

Example - Adding the <bpm-business-actions-drop-down> Business Component to a Page

The BUSINESS ACTIONS menu option in the Component Showcase application demonstrates how to add the bpm-business-actions-drop-down business component to a page.

The componentShowcase/componentDemos/bizActions/BusinessActions.html file:

  • includes the required libraries and the source for the application controller. 
    <script type="text/javascript" src="/apps/app-cdn/tcf/tcf.nocache.js"></script>
<script type="text/javascript" src="/apps/app-cdn/jquery/jquery-3.1.1.js"></script>
<script src="/apps/app-cdn/angular/1.6.0/angular.min.js"></script>
<script src="/apps/app-cdn/angular-ui-grid/ui-grid.min.js"></script>

<script src="js/BizActionSample.js"></script>
  • attaches the BizActionSampleCtrl controller to the DOM. 
    <body layout="column" ng-controller="BizActionSampleCtrl" ng-cloak>
  • adds the <bpm-business-actions-drop-down> element to the page's sidebar. 
    <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="appTraySideNav md-whiteframe-z2" md-component-id="left" layout="row">
    <bpm-business-actions-drop-down actions-count="currActionsCount" set-main-content="setMainContent" form-div="formDiv" action-groups="actionGroups" expand-actions="expandActions"></bpm-business-actions-drop-down>
</md-sidenav>

The componentShowcase/componentDemos/bizActions/js/BizActionSample.js file defines the BizActionSampleCtrl controller, which has dependencies on the BPMWorklistService and BPMLoginServiceservice. 

(function() {
    var componentShowcase = angular.module("componentShowcase", ['TibcoFramework']);
    componentShowcase.controller("BizActionSampleCtrl", function ($scope, $rootScope, BPMBusinessActionsService) {

The BizActionSampleCtrl controller sets the attribute data required by the <bpm-business-actions-drop-down> element. 

$scope.currActionsCount = 0;
$scope.actionGroups = [];
$scope.expandActions = true;
$scope.setMainContent = function(content) {
    $scope.main_content = content;
};
$scope.isMainContentShowingForm = function() {
    return ($scope.main_content == "form");
};

$scope.formDiv = "formAddDiv";