WORK ITEM DETAILS

The WORK ITEM DETAILS tab of the Component Showcase application demonstrates the use of the <work-item-detail-nav> business component.

To view or edit the source files for this example, open the Component Showcase application and browse to the componentDemos/workitemDetails folder.

DetailsViews.html

The page displays:

  • a form in which you can enter and submit a work item ID. 
    <div flex="30" layout="column">
<form name="sampleForm" ng-submit="show()">
    <md-input-container>
        <label>Id:</label>
        <input required name="id" ng-model="id">
        <div ng-messages="sampleForm.id.$error">
          <div ng-message="required">This is required.</div>
        </div>
    </md-input-container>
    <md-input-container>
        <label>Version:</label>
        <input name="version" ng-model="version">
    </md-input-container>
    <md-button ng-disabled="sampleForm.$invalid" type="submit" class="md-raised md-primary">Show Details</md-button>
</form>
</div>
  • the work-item-detail-nav Business component, which is then used to display the appropriate data for the selected work item. 
    <div flex="60">
      <md-content flex layout-padding>
           <work-item-detail-nav tabs="tabs" selected-work-item="selectedWorkItem"></work-item-detail-nav>
      </md-content>
 </div>
    Note: work-item-detail-nav invokes further business components and component services to display the appropriate data for each tab.

js/DetailsViewsSample.js

The DetailsViewSampleCtrl controller defines:

  • a tabs object containing the tab titles to be passed to the work-item-detail-nav business component. 
    $scope.tabs = [ {
    title : 'Summary',
    content : ""
}, {
    title : 'Data',
    content : ""
}, {
    title : 'Attributes',
    content : ""
}, {
    title : 'Processes',
    content : ""
}, {
    title : 'Documents',
    content : ""
} ];
  • a show function that is invoked when you click SHOW DETAILS. The function calls the BPMWorkItemDetailsService.fetchWorkItem operation to pass details of the selected work item to the work-item-detail-nav business component. 
    $scope.show = function() {
    BPMLoginService.getExtendedUserInfo({
        onSuccess : function(userInfo) {
            $scope.guid = userInfo.guid;
            if (BPMWorkItemDetailsService) {
        $scope.wi = BPMWorkItemDetailsService.fetchWorkItem($scope, $scope.id, $scope.version, {
                    onSuccess : function() {
                $scope.$apply("");
                    },
                    onFailure : function() {
                        $scope.$apply("");
                    }
                });
            }
        }
    });
};