sc-roster
This document is a user guide for the sc-roster component release version 7.6.2.
1 Purpose
The sc-roster
component places an interactive gantt chart field on a form, displaying a list of Resources and the Tasks (if any) assigned to them, where:
-
Resource data (e.g. Resource name) is retrieved from Resource documents.
-
Task data (e.g. start date/time, end date/time, assigned Resource(s)) is retrieved from Task documents.
-
Resources are listed vertically down the left side of the gantt chart.
-
A timeline runs horizontally across the top of the gantt chart.
- Tasks are represented by Task bars below the timeline, each adjacent to the resource it is assigned to. The start date/time, end date/time and duration of a Task determine the length of a Task bar and its position under the timeline .
- A red vertical dateline highlights the current date/time.
The sc-roster
gantt chart provides or can be defined with the following functions:
-
The ability to scroll vertically up and down the list of resources.
-
The ability to scroll horizontally across the timeline.
-
The ability to drag and drop a Task bar allowing a Task to be rescheduled to an earlier of later time leaving its duration unchanged OR to reassign the Task to a different Resource. When a Task bar is moved, its Task document will be automatically updated to reflect any changes to the its start date, end date and assigned Resource(s).
-
The ability to drag the end point of a Task bar in order to change the Task start date and/or end date OR to lengthen/shorten the Task duration. When an end point of a Task bar representing is dragged, its Task document will be automatically updated to reflect any changes to its start date and end date.
-
Right click on a Task bar will display open and delete (if enabled) drop down
-
Clicking the "Now" button positions the gantt chart at the current date/time.
-
Using the slider allows the zoom scale to change between 15 min, 30 min, 1 hour, day, month zoom modes
-
Clicking a Task bar opens the document for that Task.
-
Clicking a Resource opens the document for that Resource.
The sc-roster
definition provides fields for setting the properties of sc-roster
gantt chart and is fully described below.
The function ft3.refreshComponentData('componentName') can also be used to trigger an update on the component from the rulesets.
2 Definition
The sc-roster
component is defined by a set of name/value pair fields consisting of:
- Required system fields
- Required customizable fields
- Optional customizable fields
Note:
- Default values for fields described in the tables below are shown in bold text.
2.1 Required System Fields
Field | Valid Values | Description |
---|---|---|
componentName | sc-roster | The component name. Example: "componentName": "sc-roster" |
2.2 Required Customizable Fields
Field | Valid Values | Description |
---|---|---|
assignmentField | A "Task" document field name | The name of a sc-related-document field in a Task document that is used to search for, select and save one of more Resource documents as a related documents to the Task document. Each related Resource document represents a Resource assigned to the Task.Example: "assignmentField": "rosterResource" |
assignmentId | Elastic Query | An elastic query that returns the list of Resources to be displayed vertically down the left side of the gantt chart. Example: "assignmentId": "{'query':{'bool':{'must':[{'match':{'businessType':{'query':'Resource'}}},{'match':{'systemHeader.systemType':{'query':'document'}}}]}}}" |
endDateField | A Task document field name | The name of the sc-date-time field in a Task document that stores the end date/time of a Task.Example: "endDateField": "expectedResolution" |
filter | An elastic query that returns the Tasks to be shown as Task bars below the timeline on the right side of the gantt chart. Example: "filter": "{'query':{'bool':{'must':[{'match':{'businessType':{'query':'Appointment'}}},{'match':{'systemHeader.systemType':{'query':'document'}}}]}}}" |
|
name | Any value written in camel case. | Defines the name of the sc-roster field in the document and database.Examples: "name": "scRosterTypicalDefn" "name": "Roster" |
startDateField | A "Task" document field name | The name of the sc-date-time field in a Task document that stores the start date/time of a "Task".Example: "startDateField": "expectedResponse" |
2.3 Optional Customizable Fields
Field | Valid Values | Description |
---|---|---|
allowEventOverlap | boolean | Permits events to overlap when updating on either resizing or moving. Defaults to false. Example: "allowEventOverlap": true |
barBackColor | string | Sets the bar background color for events. Can be either valid html color or handlebars function returning a color string. Note the handlbars function must be defined in "handlebarsHelpers". The funtion receives ntf.document as the primary argument to work with. Example: barBackColor": "#CCCCCC" barBackColor": "{{{getBarBackColor result}}}" |
barColor | string | Sets the bar color for events. Can be either valid html color or handlebars function returning a color string. Note the handlbars function must be defined in "handlebarsHelpers". The funtion receives ntf.document as the primary argument to work with. Example: barColor": "#eb4034" barColor": "{{{barColor result}}}" |
defaultView | Month | Set the timeline scale to months. Example: "defaultView": "Month" |
Day | Set the timeline scale to display months with each month divided into days. Default value Example: "defaultView": "Hour" |
|
Hour | Set the timeline scale to display days with each day divided into 24 one-hour cells. Examples: "defaultView": "Hour" |
|
30 Min | Set the timeline scale to display days with each day divided into 48 half hour cells. Examples: "defaultView": "30 Min" |
|
15 Min | Set the timeline scale to display days with each day divided into 96 15 minute cells. Examples: "defaultView": "15 Min" |
|
disableEventRowMoving | false | Enabled event row moving which means events can moved horizontally in any direction. Works with enabledMoving. Default value. Example: "enabled": false |
true | Disables event row moving which means events can only be moved horizontally. This removes the ability to change resources on event documents/data. | |
enabled | false | All buttons are disabled and a Stop icon appears on mouse over. Dragging and dropping of Task bars is disabled. Grabbing and moving the end points of a Task bar is disabled. Example: "enabled": false |
true | Default value. All buttons are not disabled, greyed out and a Stop icon does not appear on mouseover. Dragging and dropping of Task bars is not disabled. Grabbing and moving the end points of a Task bar is not disabled. |
|
enableDelete | false | Disables the ability to delete Tasks. Default value. Example: "enableDelete": false |
true | Enables the ability to delete task. This can be done by right clicking a task and selecting the delete option in the drop down |
|
enableMoving | false | Disables the ability to drag and drop a Task bar horizontally to new timeline location and/or vertically from one Resource to another Resource. Works in conjuction with disableEventRowMoving Default value. Example: "enableDragging": false |
true | Enables the ability to drag and drop a Task bar horizontally to new timeline location and/or vertically from one Resource to another Resource. When the Task bar is moved to a new timeline location, the Task document will be automatically updated to reflect any changes to the Task start date, end date and assigned Resource(s). |
|
enableResize | false | Disables the ability to resize tasks by dragging their ends horizontally. Default value. Example: "enableDragging": false |
true | Enables the ability to resize tasks by draggingt their ends horizontally. When the Task bar end is moved to a new timeline location, the Task document will be automatically updated to reflect any changes to the Task start date and end date. |
|
eventSummaryName | string | A string containing either the text or the handlebars function on which the displayed event summary name should be put together. The handlebars function should return a string. The handlebars function should be included in handlebarsHelpers Example: "eventSummaryName": "{{{getEventSummaryName result}}}" |
fullWidth | true | The sc-roster field displays full width on the form (recommended).Example: "fullWidth": true |
false | Default value. The sc-roster field does not display full width on the form. |
|
handlebarsHelpers | Defines a handlebar helper function which can be used to manupulate data, for example to uppercase all characters of a string. Section 3.3 Handlebars functions in Datatables details the defining and usage of the "handlebarsHelpers" field. |
|
label | Any value | Defines the name of the sc-roster gantt chart field on the form i.e. the field label.Examples: "label": "sc-roster Typical Defn" "label": "Roster" |
Defaults to the sc-roster gantt field displays without a field label on the form. |
||
loadDate | ISO Date String | Date which to default the load of the component to. If not set defaults to 'NOW', /''Defines the name of the sc-roster gantt chart field on the form i.e. the field label.Examples: "loadDate": "2024-03-22T01:02:38.527Z" |
maxHeight | Integer value | The maximum height of the sc-roster gantt chart field.If the number of resources results in the max height value being exceeded, then vertical scrolling or the sc-roster gantt chart field is automatically enabled.Example: "maxHeight": 200 |
500 | Default value. | |
openIn | newWindow | Clicking on a Task bar or Resouce will open the Task/Resource document in a new browser window. Example: "openIn": "newWindow" |
popup | Clicking on a Task bar or Resouce will open the Task/Resource document in a in a browser pop-up. Example: "openIn": "popup" |
|
currentWindow | Default value. Clicking on a Task bar or Resouce will open the Task/Resource document in a in the current window. Example: "openIn": "currentWindow" |
|
refreshInterval | Integer value | Sets the number of seconds to re-run the "filter" field's elastic query for an automatic reload/refresh of the sc-roster gantt chart.Example: "refreshInterval": 30 |
0 | Default value. No automatic reload/refresh of the sc-roster gantt chart occurs. |
|
resourceArray | array | Defines the resources to display for the roster. Overrides the use of 'assignmentId'. This array can be manipulated through the use of ft3.setComponentProps(...). An array of documents compiled by a ruleset or other method. Example: "resourceArray": [{documentId:12345..., systemHeader: {...}}, ...] |
resourceBarColor | string | Sets the resource bar color for events. Can be either valid html color or handlebars function returning a color string. Note the handlbars function must be defined in "handlebarsHelpers". The funtion receives ntf.document as the primary argument to work with. Example: resourceBarColor": "#eb4034" resourceBarColor": "{{{barColor result}}}" |
resourceSummaryName | string | A string containing either the text or the handlebars function on which the displayed event summary name should be put together. The handlebars function should return a string. The handlebars function should be included in handlebarsHelpers Example: "resourceSummaryName": "{{{getResourceSummaryName result}}}" |
resourceToolTip | string | Handlebars function returning html for toolTip for resource "resourceToolTip": {{{getTooltip result}}}" |
showRefresh | boolean | Sets the visible state of the refresh button and icon. Defaults to true. Example: "showRefresh": true |
toolTip | string | Handlebars function returning html for toolTip toolTip: string; // "{{{getTooltip result}}}" |
use24HourClock | boolean | Changes the clock time values from 12 hour to 24 hour. Default value is false. Example: "use24HourClock": true |
visible | false | The sc-roster gantt chart field is not visible on the form.Example: "visible": false |
true | Default value. The sc-roster gantt chart is visible on the form. |
|
zoomPosition | "left" | Specifies the position that will be used as a reference date when switching the zoom level of the Scheduler. 'left' signifies the left hand side as the reference point. Default value. Example: "zoomPosition":'left |
middle" | The middle of the window will be used as a reference point when changing zoom levels. Example: "zoomPosition":'middle |
3 Typical Definition
Below is a typical sc-roster
component definition, defined with its required fields plus any optional field whose value is typically other than its default value.
{
"componentName": "sc-roster",
"name": "scRosterTypicalDefinition",
"assignmentField": "taskResource",
"assignmentId": "{'query':{'bool':{'must':[{'match':{'businessType':{'query':'Resource'}}},{'match':{'systemHeader.systemType':{'query':'document'}}}]}}}",
"defaultView": "Day",
"enableDragging": true,
"endDateField": "taskEndDate",
"filter": "{'query':{'bool':{'must':[{'match':{'businessType':{'query':'Appointment'}}},{'match':{'systemHeader.systemType':{'query':'document'}}}]}}}",
"fullWidth": true,
"label": "sc-roster Typical Definition",
"maxHeight": 200,
"refreshInterval": 60,
"startDateField": "taskStartDate",
"urlOpenIn": "newWindow",
"viewType": "gantt"
}
One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.
"backgroundRefresh": true,
"enabled": false,
"visible": false,
4 Examples
Example 1
sc-roster
component defined with the typically needed fields.
{
"componentName": "sc-roster",
"name": "scRosterTypicalDefinition",
"assignmentField": "taskResource",
"assignmentId": "{'query':{'bool':{'must':[{'match':{'businessType':{'query':'Resource'}}},{'match':{'systemHeader.systemType':{'query':'document'}}}]}}}",
"defaultView": "Day",
"enableDragging": true,
"endDateField": "taskEndDate",
"filter": "{'query':{'bool':{'must':[{'match':{'businessType':{'query':'Appointment'}}},{'match':{'systemHeader.systemType':{'query':'document'}}}]}}}",
"fullWidth": true,
"label": "sc-roster Typical Definition",
"maxHeight": 200,
"refreshInterval": 60,
"startDateField": "taskStartDate",
"urlOpenIn": "newWindow",
"viewType": "gantt"
}
Resulting sc-roster
gantt chart field on the form:
Mouse over of a Task bar:
Example:
Mouse over the "Task 0003" Task bar will display a tooltip showing the Task document summaryDescription
field value.
Clicking a Task bar:
Example:
Clicking the 'Task 0002" Task bar will opens a new window displaying the "Task 0002" document.
The "Task Resource(s)" field on the form is a sc-related-document
field showing "Field Resource 007" and "Field Resource 008" are assigned to "Task 0002". "Task 0002" start date/time and end date/time values together with its 2 assigned Resources are used to position the two Task bars for "Task 0002" shown on the sc-roster
gantt chart above.
Example:
Clicking the Task bar for "Task 0003" opens a new window displaying the "Task 0003" document.
The "Task 0003" start date/time and end date/time values together with its one assigned Resource are used to position the Task bar for "Task 0003" shown on the sc-roster
gantt chart above.
Dragging a Task bar and/or grabbing and dragging either of its end points to a new location on the gantt chart:
Example:
Dragging the "Task 0003" Task bar from "Field Resource 003" to "Field Resource 001" and to a start date of 28 Jun 2023 and grabbing and dragging its end point to reduce its duration from 9 days to 5 days:
In addition to changing its position on the gantt chart, the "Task 003" document will be automatically updated to reflect changes to its start date/time, end date/time and assigned rsource(s).
Clicking a Resource listed on the right side of the gantt chart:
Example:
Clicking "Field Resource 008" opens a new window displaying the "Field Resource 008" document.