Element: <oj-gantt-task>

Oracle® JavaScript Extension Toolkit (JET)
5.2.0
E97691-01

QuickNav

Attributes

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 5.2.0
Since:
  • 5.2.0
Module:
  • ojgantt

JET Gantt Task

The oj-gantt-task element is used to declare properties for gantt tasks and is only valid as the child of a template element for the taskTemplate slot of oj-gantt. 


<oj-gantt task-data="[[taskDataProvider]]">
  <template slot="taskTemplate">
    <oj-gantt-task
      row-id="[[$current.data.resource]]"
      start="[[$current.data.begin]]"
      end="[[$current.data.finish]]">
    </oj-gantt-task>
  </template>
</oj-gantt>

Attributes

baseline :Object

Specifies the baseline of the task. When only one of 'start' or 'end' value is specified, or when 'start' and 'end' values are equal, the baseline is considered a milestone baseline.
Example

Initialize the gantt task with the progress attribute specified:

<!-- Using dot notation -->
<oj-gantt-task baseline.start="[[$current.data.plannedBegin]]" baseline.end="[[$current.data.plannedFinish]]"></oj-gantt-task>

<!-- Using JSON notation -->
<oj-gantt-task baseline="[[{"start": $current.data.plannedBegin, "end": $current.data.plannedFinish}]]"></oj-gantt-task>

baseline.border-radius :string

The border radius of the baseline. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.baseline.border-radius.

See the baseline attribute for usage examples.
Default Value:
  • "0"

baseline.end :string

The end time of the baseline. Optional if baseline is a milestone. Either start or end has to be defined in order for the baseline to properly render. See Date and Time Formats for more details on the required string formats.

See the baseline attribute for usage examples.
Default Value:
  • ""

(nullable) baseline.height :number

The height of the baseline in pixel. The default value comes from the gantt's task-defaults.baseline.height.

See the baseline attribute for usage examples.
Default Value:
  • null

baseline.start :string

The start time of the baseline. Optional if baseline is a milestone. Either start or end has to be defined in order for the baseline to properly render. See Date and Time Formats for more details on the required string formats.

See the baseline attribute for usage examples.
Default Value:
  • ""

baseline.svg-class-name :string

A space delimited list of CSS style classes defining the style of the baseline. The default value comes from the gantt's task-defaults.baseline.svg-class-name.

See the baseline attribute for usage examples.
Default Value:
  • ""

baseline.svg-style :Object

The CSS style defining the style of the baseline. The default value comes from the gantt's task-defaults.baseline.svg-style.

See the baseline attribute for usage examples.
Default Value:
  • {}

border-radius :string

The border radius of the task. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.border-radius.
Default Value:
  • "0"
Example

Initialize the gantt task with the border-radius attribute specified:

<oj-gantt-task border-radius="0"></oj-gantt-task>

end :string

The end time of this task. Optional if task is a single date event like Milestone. Either start or end has to be defined in order for the task to properly render. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""
Example

Initialize the gantt task with the end attribute specified:

<oj-gantt-task end="[[$current.data.finish]]"></oj-gantt-task>

(nullable) height :number

The height of the task in pixel. The default value comes from the gantt's task-defaults.height.
Default Value:
  • null
Example

Initialize the gantt task with the height attribute specified:

<oj-gantt-task height="10"></oj-gantt-task>

label :string

The label associated with the task.
Default Value:
  • ""
Example

Initialize the gantt task with the label attribute specified:

<oj-gantt-task label="[[$current.data.name]]"></oj-gantt-task>

label-position :string|Array.<string>

The position of the label relative to the task. An array of values is also supported. If an array is specified, then the values are traversed until a position that can fully display the label is found. If 'max' is specified in the array, then of all the positions evaluated up to that point of the traversal, the one with the largest space is used (label is truncated to fit). Naturally, 'max' is ignored if it's specified as the first value of the array. If the last value of the array is reached, but the label cannot be fully displayed, then the label is placed at that position, truncated to fit. Due to space constraints in the milestone and task with progress cases, the inner positions will exhibit the following behaviors:
  • For milestones, specifying 'innerStart', 'innerEnd', or 'innerCenter' would be equivalent to specifying 'start', 'end', and 'end' respectively.
  • For tasks with progress, 'innerCenter' means the label will be aligned to the end of the progress bar, either placed inside or outside of the progress, whichever is the larger space. 'innerStart' and 'innerEnd' positions are honored when there is enough space to show the label at those positions. Otherwise, the aforementioned 'innerCenter' behavior is exhibited.
The default value comes from the gantt's task-defaults.label-position.
Supported Values:
Name Type
"end" string
"innerCenter" string
"innerEnd" string
"innerStart" string
"none" string
"start" string
Default Value:
  • ["end", "innerCenter", "start", "max"]
Example

Initialize the gantt task with the label-position attribute specified:

<oj-gantt-task label-position="innerCenter"></oj-gantt-task>

label-style :Object

The CSS style defining the style of the label. Only CSS style applicable to SVG elements can be used.
Default Value:
  • {}
Example

Initialize the gantt task with the label-style attribute specified:

<oj-gantt-task label-style='{"fontWeight": 500}'></oj-gantt-task>

progress :Object

Specifies the progress of the task. This property is ignored if the task is a milestone.
Example

Initialize the gantt task with the progress attribute specified:

<!-- Using dot notation -->
<oj-gantt-task progress.value="[[$current.data.PROGRESS / 100]]"></oj-gantt-task>

<!-- Using JSON notation -->
<oj-gantt-task progress="[[{"value": $current.data.progress / 100}]]"></oj-gantt-task>

progress.border-radius :string

The border radius of the progress bar. Accepts values allowed in CSS border-radius attribute. The default value comes from the gantt's task-defaults.progress.border-radius.

See the progress attribute for usage examples.
Default Value:
  • "0"

progress.height :string

Specifies the height of the progress bar in pixels (e.g. '50px') or percent of the associated task bar (e.g. '15%'). The default value comes from the gantt's task-defaults.progress.height.

See the progress attribute for usage examples.
Default Value:
  • "100%"

progress.svg-class-name :string

A space delimited list of CSS style classes to apply to the progress bar. Note that only CSS style applicable to SVG elements can be used. The default value comes from the gantt's task-defaults.progress.svg-class-name.

See the progress attribute for usage examples.
Default Value:
  • ""

progress.svg-style :Object

The CSS inline style to apply to the progress bar. Only CSS style applicable to SVG elements can be used. The default value comes from the gantt's task-defaults.progress.svg-style.

See the progress attribute for usage examples.
Default Value:
  • {}

(nullable) progress.value :number

The value of the progress between 0 and 1 inclusive. If not specified or invalid, no progress will be shown.

See the progress attribute for usage examples.
Default Value:
  • null

row-id :any

The id for the row the task belongs to.
Example

Initialize the gantt task with the row-id attribute specified:

<oj-gantt-task row-id="[[$current.data.resource]]"></oj-gantt-task>

(nullable) short-desc :string

The description of the task. This is used for accessibility and for customizing the tooltip text.
Default Value:
  • null
Example

Initialize the gantt task with the short-desc attribute specified:

<oj-gantt-task short-desc="[[$current.data.shortDesc]]"></oj-gantt-task>

start :string

The start time of this task. Optional if task is a single date event like Milestone. Either start or end has to be defined in order for the task to properly render. See Date and Time Formats for more details on the required string formats.
Default Value:
  • ""
Example

Initialize the gantt task with the start attribute specified:

<oj-gantt-task start="[[$current.data.begin]]"></oj-gantt-task>

svg-class-name :string

A space delimited list of CSS style classes defining the style of the task. The default value comes from the gantt's task-defaults.svg-class-name.
Default Value:
  • ""
Example

Initialize the gantt task with the svg-class-name attribute specified:

<oj-gantt-task svg-class-name="taskStyle"></oj-gantt-task>

svg-style :Object

The CSS style defining the style of the task. The default value comes from the gantt's task-defaults.svg-style.
Default Value:
  • {}
Example

Initialize the gantt task with the svg-class-name attribute specified:

<oj-gantt-task svg-style="[[($current.data.status === "CRITICAL") ? {"fill": "red"} : {}]]"></oj-gantt-task>

type :string

Defines the task type to be rendered.

If "milestone", and if 'start' and 'end' values are specified and unequal, the 'start' value is used to evaluate position.

If "auto", the type is inferred from the data:
  • If 'start' and 'end' values are specified and unequal, "normal" type is assumed.
  • Otherwise, "milestone" type is assumed.
The default value comes from the gantt's task-defaults.type.
Supported Values:
Name Type
"auto" string
"milestone" string
"normal" string
"summary" string
Default Value:
  • "auto"
Example

Initialize the gantt task with the type attribute specified:

<oj-gantt-task type="[[($current.data.type]]"></oj-gantt-task>