Invoking a Business Component Service Operation From Your Application

The HTML document from which you want to invoke the component service operation must:
  • include the following libraries. The tcf.nocache.js library 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.3.1.js"></script>
    <script src="/apps/app-cdn/angular/1.7.5/angular.min.js"></script>
    <script src="/apps/app-cdn/angular-ui-grid/ui-grid.min.js"></script>
    Note: A lightweight version of the TIBCO Component Framework library is available, which can be used to improve resource load times. For more information, see Using the Lightweight TIBCO Component Framework.
  • include any additional JavaScript or CSS files that need to be loaded in the application. They must be loaded using the collectDependencies() method inside a script tag in the HTML HEAD section. For example:
    function collectDependencies() {
    	  // any addional CSS or JS files that need to be downloaded can be provided here as a key, url map
    	  cap.depend("MyWorkCtrl", "MyWorkCtrl.js", false, false);
    }
  • include the angular module to be loaded by the application. It is specified using the onOCFAppLoad() method inside a script tag in the HTML HEAD section. For example:
    function onOCFAppLoad(moduleName) {
    	  // which module to be used for bootstrapping
    	  return ["MyWork"];
    }
  • attach an application controller to the DOM.
  • provide a UI element to invoke the required operation.

The associated application controller must:

  • specify a dependency on the required component service, that is, a dependency on the Angular module 'TibcoFramework'.
  • define and set the parameters required by the operation.
  • invoke the operation, passing in any required parameters, including a callback function to handle the operation response.

Example - Opening a Work Item

The OPEN WORK ITEM menu option in the Component Showcase application demonstrates how to invoke the BPMWorklistService.openWorkItem operation.

OPEN WORK ITEM provides a two-pane user interface:

  • In the left-hand pane, you can enter the ID and, optionally, version number of a work item, then OPEN it.
  • The right-hand pane provides a tabbed display in which you can view each opened work item's form, and Cancel, Close or Submit it.

The component_showcase/component-demos/open-workitem/OpenWorkItem.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.3.1.js"></script>
    <script src="/apps/app-cdn/angular/1.7.5/angular.min.js"></script>
    <script src="/apps/app-cdn/angular-ui-grid/ui-grid.min.js"></script>
    <script src="js/OpenWorkItemSample.js"></script>
  • attaches the OpenWorkItemSampleCtrl controller to the DOM.
    <body layout="column" ng-controller="OpenWorkItemSampleCtrl" ng-cloak >
  • provides an OPEN button that will be used to invoke the BPMWorklistService openWorkItem operation.
    <md-button ng-disabled="sampleForm.$invalid" type="submit" class="md-raised md-primary">Open</md-button>

The component_showcase/component-demos/open-workitem/js/OpenWorkItemSample.js file defines the OpenWorkItemSampleCtrl controller, which has dependencies on the BPMWorklistService and BPMLoginService service.

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

The OpenWorkItemSampleCtrl controller defines an open function that is invoked when the user clicks the OPEN button.

$scope.open = function() {
    for (var i = 0; i < $scope.workItemFormTabs.length; i++) {
        if ($scope.workItemFormTabs[i].id == $scope.id)
            return;

The open function:

  • defines a config object to set the parameters required by the openWorkItem operation.
    }
        var config = {};
        config.id = $scope.id;
        config.version = $scope.version;
    
        config.guid = $rootScope.guid;
    
        config.formDiv = "formWorkDiv#" + $scope.id;
    
        $scope.workItemFormTabs.push(config);
  • invokes the openWorkItem operation, passing in the config object and a callback function that displays the work item form.
    if (BPMWorklistService) {
            BPMWorklistService.openWorkItem(config, {
                onSuccess : function() {
                    $scope.workItemFormTabs.splice($scope.workItemFormTabs.indexOf(config), 1);
                    $scope.$apply("");
                },
                onFailure : function() {
                    $scope.workItemFormTabs.splice($scope.workItemFormTabs.indexOf(config), 1);
                    $scope.$apply("");
                }
            });
        }
    }
Note: The GUID of the currently logged in user is one of the required parameters for openWorkItem. The controller obtains this GUID by using a separate invocation of the BPMLoginService.getExtendedUserInfo operation. This is why the controller also has a dependency on the BPMLoginService.
BPMLoginService.getExtendedUserInfo({
    onSuccess : function(userInfo) {

        $rootScope.guid = userInfo.guid;

    }
});