Skip to content

sc-roster

This document is a user guide for the sc-roster component release version 7.6.2.

go-to-typical-definition

sc-roster-field-Example-1-Image-1-Annotated

 

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:

  1. The ability to scroll vertically up and down the list of resources.

  2. The ability to scroll horizontally across the timeline.

  3. 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).

  4. 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.

  5. Right click on a Task bar will display open and delete (if enabled) drop down

  6. Clicking the "Now" button Icon-sc-roster-Now-button positions the gantt chart at the current date/time.

  7. Using the slider allows the zoom scale to change between 15 min, 30 min, 1 hour, day, month zoom modes

  8. Clicking a Task bar opens the document for that Task.

  9. 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:

  1. 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:

sc-roster-field-Example-1-Image-1

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.

sc-roster-field-Example-1-Image-2

Clicking a Task bar:

Example:

Clicking the 'Task 0002" Task bar will opens a new window displaying the "Task 0002" document.

sc-roster-field-Example-1-Image-3

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.

sc-roster-field-Example-1-Image-4

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:

sc-roster-field-Example-1-Image-5

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).

sc-roster-field-Example-1-Image-6

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.

sc-roster-field-Example-1-Image-7