e5core-angular-ui in 1.3.3

Copyright 2019 e5 Workflow Inc

This package contains a collection of UI components for use with the e5 Workflow Inc e5 Anywhere system. This library requires the e5core-angular-services in order to communicate with the REST API. Please see e5core-angular-services for information and instructions on installing and configuring that library.

Quick Start

The following is a quick example of how to add the e5 Anywhere Components to your application.

1. Install the following NPM packages

npm install --save e5core-angular-services e5core-angular-ui
npm install --save @angular/material @angular/cdk @angular/animations
npm install --save highcharts highcharts-angular
npm install --save ngx-material-timepicker
npm install --save primeng primeicons

2. Setup the e5core-angular-services as described in https://www.npmjs.com/package/e5core-angular-services.
3. Add the following models to the app.module.ts

import { CommonModule } from '@angular/common';
import { E5coreAngularUiModule } from 'e5core-angular-ui' ;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ;

4. Add the following linked to the index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

5. Add the following to the styles.css.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/nova-light/theme.css";
@import "~primeng/resources/primeng.min.css";

Upgrade to Angular 7 [Added 1.3.0]

As of version 1.3.0 - e5core-angular-ui requires Angular 7 as a per dependency

Work Related Items [Added 1.2.4]

The work related items component can be inserted into a page using the <e5core-ui-work-related-items> tag as shown below. The component requires a work item observable as a parameter and will respond to changes in the work item. By default the Category 1, Category 2, Category 3 and Status of the child work item are displayed. The number of items on page can be changed by the “items per page” drop down in the bottom right corner, and the sort order can be changes by clicking on the column heading.

<e5core-ui-work-related-items [workItem$]='workItem$' [showDefinedChildrenOnly]="false" [findId]="3" [fieldsToShow]="workRelatedItemFields" (workItemSelectEvent)="onWorkItemSelect($event)" (attachmentSelectEvent)="onAttachmentSelect($event)" ></e5core-ui-work-related-items>

Component|Field|Description -|-|- e5core-ui-work-related-items|workItemSelectEvent|Method called when a child work item is selected. Event of type OpenWorkEvent is passed. -|attachmentSelectEvent|Method called when a child work item's attachment button is clicked. Event of type ViewerDisplayEvent is passed. -|categorisationChangeEvent|Method called when a category has been selected for new child creation. Event of type CategorizationChangeEvent is passed. -|createChildWorkItemEvent|Method called when a new child work item has been created. Event of type OpenWorkEvent is passed. -|workItem$|Observable so that the component knows which work item to display children for. -|showDefinedChildrenOnly|Either display only the pre-configured WorkClass Children categories (true) as specified in the e5 Taxonomy or the entire category hierarchy (false). -|findId|(optional) An e5 Find from which to select additional columns to display. -|fieldsToShow|(optional) List of columns to show from the e5 Find specified above, and/or to override the column name given in the e5 Taxonomy with one that may be more relavant for this instance of the work related items component. -|createButtonText|(optional) The text to show on the create button. Default Create -|showCreateChildButton|(optional) Show the "Create" child work item button. Default (true) -|pagesizes|(optional) An array of page size numbers to use. -|readonly|(optional) The component is in read only mode and the dropdowns are disabled.

Example code

  //define columns to pick from the e5 Find and rename them if required
  workRelatedItemFields: KeyValuePair[] = [
    {key: "Category1Name", value: "Product"},
    {key: "Category2Name", value: "Business Unit"},
    {key: "Category3Name", value: "Category"},
    {key: "StatusName", value: "Status"},
    {key: "Reference", value: ""},
    {key: "HealthFundNumber", value: ""},
    {key: "CreationDate", value: ""},
    {key: "AssignedUser", value: ""}
  ];

  //Get the attachment viewer control to view attachments with
  @ViewChildren(E5coreUiWorkAttachmentViewerComponent)
  public attachmentViewerComponents: QueryList<E5coreUiWorkAttachmentViewerComponent>;

  //Handle the onAttachmentSelect method call by loading the attachments in the attachment viewer
  onAttachmentSelect(event) : void {
    const viewerModel = CreateBlankViewer() ;
    viewerModel.id = event.attachmentId;
    viewerModel.workId = event.workId;

    this.attachmentViewerComponents.forEach(element => {
      if (element.viewerType == "0")
        element.showViewer(viewerModel);
    });
  }

  //Handle the onWorkItemSelect method call
  onWorkItemSelect(event) {
    alert("You are opening : "+ event.workId);
  }

  //Handle the onCategorizationChange method call
  onCategorizationChange(event) {
    alert("You have selected the category : "+ event.category3Id);
  }

Diarise Work [Added 1.2.2]

The work diarise component will diarise the work item associated with the current workItem$ observable. And also save a diarise reason text for the associated work item. The [periodOptions] parameter is used to display diarise options to the end user.

<e5core-ui-work-diarise #diarise
[workItem$]="workItem$"
[periodOptions]='[
{ label:"Tomorrow", diariseUnit:"Days", value:"1" },
{ label:"2 Days", diariseUnit:"Days", value:"2" },
{ label:"Next Week", diariseUnit:"Weeks", value:"1" }]'
[displayedDate] ='displayedDate'
[displayedTime] = 'displayedTime'
[diariseReasonPropertyId] ='"AssessmentExplanationcode"'
[diariseReasonPlaceHolder] ='"Enter the diarise reason here"'
[diariseReasonTextValue]='diariseReasonTextValue'
[showDiariseButton]=true
[showDiariseTime]=true
[showDiariseReasonDropdown] = false
(diariseClick)='onDiariseButtonClick($event)'
(dateChange)='onDateChange($event)'
(timeChange)='onTimeChange($event)'
(reasonTextChange)='onDiariseReasonTextChange($event)'>
</e5core-ui-work-diarise>

Component|Field|Description -|-|- e5core-ui-work-diarise|periodOptions|(optional) An array to configure user friendly clickable diarise options. -|displayedDate|(optional) A date value that is used to set a pre-defined date value when diarising a work item. It is set to current date by default. -|displayedTime|(optional) A time value that is used to set a pre-defined time value when diarising a work item. It is set to current time by default. -|diariseReasonPropertyId|e5 FieldDefinition Id, corresponding to the input type FieldDefinition, that will store the diarise reason value for a work item. When populated, the component displays a textarea for the user to key in the diarise reason. To hide the Diarise Reason text box, therefore, do not use this input parameter. -|diariseReasonPlaceHolder|Is a string value used to set a placeholder text in the diarise reaoson textarea for the end user. -|diariseReasonTextValue| (optional) Is a string value used to display the diarise reason for a work item that is in diarised state and is associated with the current workItem$ observable. -|showDiariseTime|Is a boolean value to show or hide the Time picker. If hidden the current time will be used when diarising the work item. -|showDiariseButton|Is a boolean used to display or hide the diarise button. -| DiariseWork()| Function to diarise the work item. -|dateChange |emits a DiariseWorkEvent, on selecting a date using the date picker. -|timeChange |emits a DiariseWorkEvent, on selecting time using the time picker. -|reasonTextChange | emits a DiariseWorkEvent, when the Diarise Reason text in the Diarise Reason text area changes. -|diariseWork| event is emitted when the Diarise button is clicked. -|DiariseWorkEvent| Event emitted when the diarise period is clicked, the diarise date changes, diarise text changes and on click of the diarise button . Event Structure contains: the diariseOption (if selected), the selected diariseUntilDate, diariseHours, diariseMinutes, diariseReasonText and the source of the event value, such as "button". -|DiariseWorkItem():void| Method to diarise work item if the developer wants to implement their own diarise handler or use the component as part of a larger transaction.

Example code for intialising the [periodOptions] parameter :

[periodOptions]='[
{ label:"Tomorrow", diariseUnit:"Days", value:"1" },
{ label:"2 Days",   diariseUnit:"Days", value:"2" },
{ label:"Next Week", diariseUnit:"Weeks", value:"1" }]'

In the above example :

label is the text to be displayed to the end user such as 1 Day 2 Days 3 Days diariseUnit can have the following possible values : Days, Weeks, Months, Year, Tomorrow value is a number to be used in conjuction with the diariseUnit . For eg: diariseUnits:"Days", value:"1" evaluates to diarise period of 1 day diariseUnits:"Weeks", value:"1" evaluates to diarise period of 1 week diariseUnits:"Months", value:"1" evaluates to diarise period of 1 month

@ViewChild("diarise") diarise!:E5coreUiWorkDiariseComponent
diariseData:DiariseWorkEvent ;
onDiariseReasonTextChange(diariseInfo:DiariseWorkEvent) {
    this.diariseData = diariseInfo
}
onMyDiarise() {
    this.diarise.DiariseWorkItem(this.diariseData) ;
}

In the module definition you will have to add the following code

import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
...
@NgModule({
    imports: [
        NgxMaterialTimepickerModule.forRoot()
    ]
})

SLA Monitor and find results (added 1.2.1)

An SLA monitor can be added to the page using the e5core-ui-monitor-sla directive. The SLA monitor emits a (categoryChange) event when drilling down into a lover level of the taxonomy and a (slaSelect) when an area of the SLA monitor is selected. These events can be linked to a e5core-ui-search-result directive using the code below to display the work items in the selected categorization and SLA status.

<e5core-ui-monitor-sla
    [slaInDays]="true"
    (slaSelect)="onSlaSelect($event)"
    (categoryChange)="onCategoryChange($event)">
</e5core-ui-monitor-sla>
<e5core-ui-search-results #searchResults
    [includeSla]='true'
    [searchDefinitionId]="1"
    (open)="onOpen($event)">
</e5core-ui-search-results>

Us the following code link the SLA monitor the a e5core-ui-search-result directive.

@ViewChild("searchResults") searchResultComponent!: E5coreUiSearchResultsComponent ;
onSlaSelect($event:MonitorSlaSelectEvent) {
    let query = CreateSlaQuery.fromMonitorSlaSelectEvent($event) ;
    console.log(query) ;
    this.searchResultComponent.search(query) ;
}

onCategoryChange($event:MonitorSlaChangeEvent) {
    let query = CreateSlaQuery.fromMonitorSlaChangeEvent($event) ;
    console.log(query) ;
    this.searchResultComponent.search(query) ;
}

onOpen($event) {
    var id = $event.Id ;
    this.router.navigate(['/work', id]);
}

Breaking Changes in 1.2.0

As part of release 1.2.0 release there are couple of breaking changes, that are designed to make the UI componets more consistent and easier to use.

1. The WorkItemModel "id" field has been renamed to "workId" or type string containing a GUID.
2. The FindResultsModel has been removed from the e5core-search-results and the communication between the components has been chnaged to use function calls instead of observables. See below.
3. The e5core-search-results now has a [autoSearch] directive that controlls if the search is performed automatcially when the component is displayed.
4. The search components searchId directive has been changes to searchDefinitionId.
5. The e5core-search-form and e5core-search-results components have been updated to use the standard angular data functions. The code below should be added to the app.module.ts in order to change the data format. The components now required the "moment" packages.

npm install --save moment @angular/material-moment-adapter

in app.module.ts

import { MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter'
import { registerLocaleData } from '@angular/common';
import localeAu from '@angular/common/locales/en-AU';
registerLocaleData(localeAu, 'en-AU');

@NgModule({
    ...
    providers: [
        { provide: LOCALE_ID, useValue: "en-AU" },
        {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
        {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}
    ]
})

Conversation viewer [Added 1.1.10]

The conversation viewer component is used as a place holder for a conversation view as a popup when [behaviourType]="0". The component can be placed anywhere on the page and is activated by calling the showViewer() function on the component.

Note: An inline version of the viewer which is meant to appear on the page when [behaviourType]="1" is currently not available. In the below html sample, the button is in place purely as a mechanism to run the typescript method required to pop the viewer.

<e5core-ui-conversation-viewer [behaviourType]="0" ></e5core-ui-conversation-viewer>
<button (click)="openConversationViewer()">Open</button>

Component|Field|Description -|-|- e5core-ui-conversation-viewer|viewerDisplayedEvent|Method called once the Conversation Viewer has been opened. Event of type ViewerDisplayEvent is passed. -|behaviourType|This must be 0 at this point in time to pop the viewer. -|popupWindowFeatures|(optional)A string containing the popup window features to use. Defaults to "top=0,left=0,width=500,height=700,directories=no,location=no,menubar=no,status=no,resizable=yes,titlebar=yes,toolbar=no"

The view can be opened by getting the component object view ViewChild() and then called the showViewer() function and passing in a ViewerModel with the id of the corresponding work item set.

@ViewChild(E5coreUiConversationViewerComponent) conversationView !: E5coreUiConversationViewerComponent;
openConversationViewer() {
    let vm = new ViewerModel() ;
    vm.workId = this.workId ;
    this.conversationView.showViewer(vm)
}

File Upload [Added 1.1.10]

The file upload component is used to add attachments to a work item. The component required a workItem$$ observable so that it knows which work item to attach the files to. The fileUpload$ is used to notify any other components on the page (e.g. the e5core-ui-work-attachment-viewer component) that an upload event has occured and the the corresponding component should be updated.

<e5core-ui-file-upload [workItem$]="workItem$" (fileUpload$)="fileUpload$" ></e5core-ui-file-upload>

Component|Field|Description -|-|- e5core-ui-file-upload|uploadEvent|Method called when a new attachment has been uploaded and attached to the work item. Event of type WorkAttachmentAddEvent is passed. -|uploadToUrl|(optional) The Url to send the upload file contents to. Default behaviour will upload to the e5 Anywhere api. -|acceptedFileExtensions|(optional)A comma concatnated list of file extensions that are allowed to be uplaoded. Default allowed extensions are ".pdf,.doc,.docx,.text,.txt,.jpg,.jpeg,.tif,.tiff,.png,.gif,.xls,.xslx,.ppt,.pptx,.vsd,.vsdx" -|maxFileSize|(optional) The maximum file size that will be uploaded. Default is 20971520 bytes (~20MB)

The observables to the componment can be initialized using the following code. Note that the component can share a workItem$ and fileUpload$ with other components on the page.

this.workItem$ = new BehaviorSubject<WorkItemModel>(CreateBlankWorkItem()) ;
this.fileUpload$ = new BehaviorSubject<FileUploadModel>(CreateBlankFileUpload()) ;

Generate Document [Added 1.1.10]

The generate document component is used to automatically create Word documents using a Word Template and data from the work item and attach the generated document to the current work item. The component can be used standalone with the create button or without the create button in which case the document generation can be externaly triggered using the generateDocument() function.

If there are any components listening to the fileUpload$ BehaviourSubject, then they will automatically refresh.

<e5core-ui-generate-document [workItem$]='workItem$' [fileUpload$]="fileUpload$" [showGenerateButton]="true" (generateDocumentEvent)="onGenerateDocument($event)"></e5core-ui-generate-document>

Component|Field|Description -|-|- e5core-ui-generate-documentd|generateDocumentEvent|Method called when a new document has been generated. Event of type WorkAttachmentAddEvent is passed. -|showGenerateButton|(optional) Show or hide the Generate button. Default is true for show. -|readonly|(optional) The component is in read only mode and the dropdowns are disabled.

@ViewChild(E5coreUiGenerateDocumentComponent) generateDocument !: E5coreUiGenerateDocumentComponent;
@ViewChild(E5coreUiWorkAttachmentViewerComponent) attachmentViewer !: E5coreUiWorkAttachmentViewerComponent;

//The parent is calling the generateDocument() method on the component to trigger the document generation
this.generateDocument.generateDocument();

//The onGenerateDocument() method calls the attachmentViewer to display the recently generated document in edit mode via the WebDav viewer (viewerType="2")
onGenerateDocument(event) : void {
    let viewerModel = CreateBlankViewer() ;
    viewerModel.fullUrl = event.fullUrl;
    viewerModel.workId = event.workId;

    if (attachmentViewer.viewerType == "2")
        attachmentViewer.showViewer(viewerModel);
    });
}

Assign Work To User [Added 1.1.10]

The assign user component will assign the work item associated with the current workItem$ observable to a user depending on the work item state and the users profiling. If the [showAssignButton] parameter is defined then the assign button will be shown on the control, otherwise the assignUser() function can be used to assign the work item.

<e5core-ui-work-assign-user
    [workItem$]="workItem$"
    [showAssignButton]="true"></e5core-ui-work-assign-user>

Component|Field|Description -|-|- e5core-ui-generate-documentd|assignUserEvent|Method called when the selected user has been assigned to the work item. Event of type WorkUserEvent is passed. -|selectUserEvent|Method called when a user from the dropdown has been selected. Event of type WorkUserEvent is passed. -|showAssignButton|(optional) Show or hide the Assign button. Default is true for show. -|readonly|(optional) The component is in read only mode and the dropdowns are disabled. -|readonly|(optional) The component is in read only mode and the dropdowns are disabled.

To manually assign the work item call the assignUser() function on the component.

@ViewChild(E5coreUiAssignUserComponent) assignUser !: E5coreUiAssignUserComponent;
onAssignUser() {
    this.assignUser.assignUser(null) ;
}

Attachments [Added 1.1.10]

The attachment viewer grid component lists all the attachments corresponding to the work item in the current workItem$ observable. A common fileUpload$ observable (i.e. the same one used with the e5core-ui-file-upload component) is used to notify the component that there may be a new attachment and the list should be updated.

<e5core-ui-work-attachments [workItem$]="workItem$" [fileUpload$]="fileUpload$"></e5core-ui-work-attachments>

Component|Field|Description -|-|- e5core-ui-work-attachments|attachmentSelectEvent|Method called once the attachment selection icon has been clicked. Event of type ViewerDisplayEvent is passed. -|attachmentDownloadEvent|Method called once the attachment download has been clicked. Event of type any is passed.

@ViewChild(E5coreUiWorkAttachmentViewerComponent) attachmentViewer !: e5coreUiWorkAttachmentViewerComponent;
openAttachmentViewer() {
    const viewerModel = CreateBlankViewer() ;
    viewerModel.id = this.attachmentId;
    viewerModel.workId = this.workId;
    this.attachmentViewer.showViewer(viewerModel) ;
}

Attachment Viewer [Added 1.1.10]

The attachment viewer component is used as a place holder for a attachment view as a popup when [behaviourType]="0". The component can be placed anywhere on the page and is activated by calling the showViewer() function on the component.

Note: An inline version of the viewer which is meant to appear on the page when [behaviourType]="1" is currently not available. In the below html sample, the button is in place purely as a mechanism to run the typescript method required to pop the viewer.

<e5core-ui-work-attachment-viewer  [behaviourType]="0" [viewerType]="0"></e5core-ui-work-attachment-viewer >
<button (click)="openAttachmentViewer()">Open</button>

Component|Field|Description -|-|- e5core-ui-work-attachment-viewer|viewerDisplayedEvent|Method called once the Conversation Viewer has been opened. Event of type ViewerDisplayEvent is passed. -|viewerType| 0 = E5Sharepoint, 1 = WebUri, 2 = WebDav -|viewerBehaviourType|(optional)This must be 0 at this point in time to pop the viewer. Defaults to 0. -|popupWindowFeatures|(optional)A string containing the popup window features to use. Defaults to "top=0,left=0,width=500,height=700,directories=no,location=no,menubar=no,status=no,resizable=yes,titlebar=yes,toolbar=no"

The view can be opened by getting the component object view ViewChild() and then called the showViewer() function and passing in a ViewerModel with the id of the corresponding work item and the attachment.

@ViewChild(E5coreUiWorkAttachmentViewerComponent) attachmentViewer !: e5coreUiWorkAttachmentViewerComponent;

//where the attachmentViewer viewerType=0 - a specific work item attachment using the attachmentId
openAttachmentViewer() {
    const viewerModel = CreateBlankViewer();
    viewerModel.id = this.attachmentId;
    viewerModel.workId = this.workId;
    this.attachmentViewer.showViewer(viewerModel);
}

//where the attachmentViewer viewerType=0 - all work item attachments
openAttachmentViewer() {
    const viewerModel = CreateBlankViewer();
    viewerModel.workId = this.workId;
    this.attachmentViewer.showViewer(viewerModel);
}

//where the attachmentViewer viewerType=1 - a document url in readonly view
openAttachmentViewer() {
    const viewerModel = CreateBlankViewer();
    viewerModel.fullUrl = this.fullUrl;
    this.attachmentViewer.showViewer(viewerModel);
}

//where the attachmentViewer viewerType=2 - a document url in editable view using WebDav
openAttachmentViewer() {
    const viewerModel = CreateBlankViewer();
    viewerModel.fullUrl = this.fullUrl;
    viewerModel.workId = this.workId;
    this.attachmentViewer.showViewer(viewerModel);
}

Categorization (added 1.1.9, last updated in 1.2.3) [ Requires e5core-angular-services 1.1.9+]

The categorization component is used to selection a work item allocation (category 1 id, category 2 id and Category 3 id) using 3 drop down boxes. The component exposes a callback event categorizationChange that provides a CategorizationChangeEvent object contains the category1Id, category2Id and category3Id or the selected categorization.

<e5core-ui-categorization
    (categorizationChange)="onCategorizationChange($event)"
    [hideToLevel]='0'
    [categorization]='[2,2,3]'
    [readonly]='true'
    [populationMode]='0'
    [labels]='["My Business","My Product","My Category"]'
    ></e5core-ui-categorization>

Component|Field|Description -|-|- e5core-ui-categorization|categorizationChange|Method called when selection changes. -|hideToLevel|(optional) Hide all the levels less of equal to this value. e.g. 1 will hide the business area. -|categorization|(optional) The default display categorization. -|readonly|(optional) The component is in read only mode and the dropdowns are disabled. -|populationMode|(optional) By default, populates category levels based on selection. When set to 1 (PopulateAllLevel2) hides Category1 and populates Category2 with all active entries for all Category1s. -|labels|(optional) Override the category labels

Example event code

catOut = [undefined, undefined, undefined] ;
onCategorizationChange($event:CategorizationChangeEvent) {
    this.catOut = [$event.category1Id, $event.category2Id, $event.category3Id] ;
}

The optional [categorization] attribute can be used to set the initial selection in the component. The optional [hideToLevel] attribute can be used to hide the Business Area and/or the Product in the case where the component selection need to be restricted to a predefined area. If the [hideToLevel] attribute is used then the [categorization] MUST contain a value default category 1, 2 and 3. The optional [populationMode] attribute can be used to hide the Category1 and populate all active Category2 entries for all Category1s, in the case where the component's Category1 selection needs to be hidden and categorization needs to be selected using Category2 and Category3 only.

Search (added in 1.1.8, Updated 1.2.0)

The search component can be inserted into a page using the <e5core-ui-search-form>, <e5core-ui-search-menu> and <e5core-ui-search-results>tag as shown below. The <e5core-ui-search-form> component requires a "searchDefinitionId" which can be determined with the e5 find class admin the e5 studio or the admin web part. The import parameters to the search and the columns displayed in the results are all defined in the corresponding find class.

As of version (1.2.0) the components no longer use observables to communicate and not use outputs and functions as shown below.

<e5core-ui-search-menu (search)="onSearch()" (reset)="onSearchReset()" (refresh)="onSearchRefresh()"></e5core-ui-search-menu>
<e5core-ui-search-form #searchForm
    [searchDefinitionId]="1"
    [searchForm$]="searchForm$"
    (queryChange)="onQueryChange($event)"
    [defaultValues]='{"Reference":"26"}'
    ></e5core-ui-search-form>
<e5core-ui-search-results #searchResults
    [searchDefinitionId]="1"
    [autoSearch]="false"
    [query]="{Expressions:[{'Field':'AssignedUser','Value':'me'}]}"
    [includeSla]='true'
    [includeNextDueTask]='true'
    (open)="onOpen($event)" (link)="onLink($event)"
    ></e5core-ui-search-results>

Component|Field|Description -|-|- e5core-ui-search-menu|(search)|(optional) event fired when search button pressed. -|(reset)|(optional) event fired when search button pressed. -|(refresh)|(optional) event fired when search button pressed. e5core-ui-search-form | [searchDefinitionId] | (required) The e5 find class id. -|[searchForm$]|The current state of the form. -|[queryChange]|An event containing a DataSourceQuery, fired when the form data changes. -|(defaultValues)|(optional) An default values for the search form. e5core-ui-search-results | [searchDefinitionId] | (required) The e5 find class id. -|[autoSearch]|(optional)Perform a default query when the component loads. -|[query]|(optional)The default query used by the search results, needs to be of type DataSourceQuery. -|[includeSla]|(Optional) Include SLA icon in results. -|[includeNextDueTask]|(Optional) Include next due task information in results. -|(open)|(optional) An event called when the user clicks on the folder icon. The contents of the row will be passed to the event. -|(link)|(optiona) An event when the user clicks on a hypelink field in the results.

Example initilization code.

const blankForm = CreateBlankSearchForm() ;
this.searchForm$ = new BehaviorSubject<SearchFormModel>(blankForm) ;

In order to implement interaction between the components, the following "boiler plate" code should be used. This is provided in order to give the devloper more control over the components.

1. When the fields in the 5core-ui-search-form change the component issues a (queryChange) event contains the new field values. These should be stored for later.
2. When then user clicks on the menu "search" button the e5core-ui-search-menu calls the onSearch() function.
3. The developers code then calls the search() function on the results component and passes in the query from the search form.

The developer can implement their own menu using this method. If they want to manually inject a query into the search results, then constrcut a DataSourceQuery object and call search().

  @ViewChild("searchResults") searchResultComponent!: E5coreUiSearchResultsComponent ;
  @ViewChild("searchForm") searchFormComponent!: E5coreUiSearchFormComponent ;
  searchForm$: BehaviorSubject<SearchFormModel> ;
  dsQuery : DataSourceQuery;

  // trigger by searchFormComponent when query changes
  onQueryChange(query:DataSourceQuery) {
    this.dsQuery = query ;
  }

  onSearch() {
    this.searchResultComponent.search(this.dsQuery) ;
  }

  onSearchReset() {
    this.dsQuery = null ;
    this.searchResultComponent.reset() ;
    this.searchFormComponent.reset() ;
  }

  onSearchRefresh() {
    this.searchResultComponent.refresh() ;
  }

The following is an example of an open event handler. When the user clicks on the open icon to at the left of the search results the e5core-ui-search-results fires a (open) event that can be handled by the parent application. The information passed to the handler are all the details in the row of the table, most importantly, the id of the work item.

onOpen($event) {
    var id = $event.Id ;
    this.router.navigate(['/work', id]);
}

History (added in 1.1.7)

This component requires that the e5 Anywhere API have the UI and OData routes enabled.

The history component can be inserted into a page using the <e5core-ui-work-history> tag as shown below. The component requires a work item observable as a parameter and will respond to changes in the work item. The Date, User Event, Status and Details of the work item history are displayed, the number of items on page can be changed by the “items per page” drop down in the bottom right corner, and the sort order can be changes by clicking on the column heading.

<e5core-ui-work-history [workItem$]="workItem$"></e5core-ui-work-history>

Components

Casenotes (added in 1.1.7)

This component requires that the e5 Anywhere API have the UI and OData routes enabled.

The case notes component can be inserted into a page using the <e5core-ui-work-casenotes> tag as shown below. The component requires a work item observable as a parameter and will respond to changes in the work item. The Date, User, Type and Details of the case note are displayed, the number of items on page can be changed by the “items per page” drop down in the bottom right corner, and the sort order can be changes by clicking on the column heading.

<e5core-ui-work-casenotes [workItem$]="workItem$"></e5core-ui-work-casenotes>

Change Log

Version|Changes -|- 1.3.1|Bug fix to prevent multiple server calls when typing or tabbing from one search criteria field to another 1.3.0|Upgraded to use Angular 7.0. Removed button styling. Bugfixes. 1.2.9|Add spinner to assign user component and related work items component configurable create button text 1.2.8|Fix problem when changing pagesize when autosearch is off shows all results. 1.2.7|Fix to diarise events and categorization 1.2.6|View Related Work items modified to display hierarchy including parent 1.2.5|Modified Work Diarise component's DiariseWorkItem() method 1.2.4|Added Work Related Items 1.2.3|WorkDeliveryService responds with null workId when there is no work available. Added readonly, and labels directives to e5core-ui-categorization component. 1.2.2|Diarise Component 1.2.1|Addition of SLA monitor and link to Search Results Component 1.2.0| Breaking change to WorkItemModel and enhancements to Searhc Work components 1.1.12|Fixed bug in Categorization component that clears category 1 and 2 when category 3 is selected. 1.1.11|Fixed bug in search dropdown lists 1.1.10|Added Conversaion viewer, file uploader, generate document, assign work to user, work attachments and attachment viewer components. 1.1.9|Added Categorization Component 1.1.8|Added Search Menu, forms and results ,Attachment and SLA monitor (WIP) 1.1.7|Added Casenotes and History UI Components. 1.1.6|Made the "lock" parameter optional on LegacyWorkDeliveryService. 1.1.5|Fixed typo in LegacyWorkDeliveryService, added "lock" option to getNextWorkItem() method and formatted current output field. 1.1.4|Exposed LegacyWorkDeliveryService 1.1.3|Added Read only list field. 1.1.2|Removed BrowserModule. You now have to import that into your main app module. 1.1.1|Exported classes. 1.1.0|Added work item comnponents.