frappe-gantt-on-steroids
Reactive icon

Frappe Gantt on Steroids

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 20 May
 by 
0.0
 (0 ratings)
frappe-gantt-on-steroids

Frappe Gantt on Steroids

Documentation
1.0.0

The public Frappe Gantt Block has the following signature:

Input Parameters

  • Tasks - the list of tasks to render on the Gantt (may be empty)
    • Id - unique task id
    • Name - the name of the task
    • Start - start date-time of the task
    • Duration - task duration (example: 2h, 6d)
    • End - end date-time of the task
    • Progress - task progress in percentage
    • Important - boolean flag to classify the task as important or not
    • Dependencies - task dependencies (always refers to another Task Id). Use comma + space separated string of Task Ids ('Task 1, Task 2, Task 3, etc.')
    • CustomClass - Custom CSS class to apply to the task bar, as per the following example:
      .myclass .bar { fill: #FF8E76 !important; }
      .myclass .bar-progress { fill: #D95B43 !important; }
      Simply add the necessary classes to your application and set this attribute accordingly
  • Holidays - list of holidays to display on the Gantt
    • Name - holiday name
    • Date - holiday date
  • Options - Frappe Gantt options
    • TodayButton - adds a button to navigate to today’s date.
    • ViewModeSelect - allows selecting the view mode from a dropdown.
    • ViewMode - the initial view mode of the Gantt chart ('Day', 'Week', 'Month', 'Year').
    • Language - language for localization (ISO 639-1 codes like en, fr, es).
    • ScrollTo - determines the starting point when chart is rendered.
    • GanttOptions
      • ContainerHeight - height of the container.
      • ColumnWidth - width of each column in the timeline.
      • UpperHeaderHeight - height of the upper header in the timeline (in pixels).
      • LowerHeaderHeight - height of the lower header in the timeline (in pixels).
      • InfinitePadding - whether to extend timeline infinitely when user scrolls.
      • Lines - determines which grid lines to display ('none' for no lines, 'vertical' for only vertical lines, 'horizontal' for only horizontal lines, 'both' for complete grid.).
      • IgnoreWeekends - tells the Gantt to ignore weekends
      • DateFormat - format for displaying dates (Any valid JS date format string).
    • TaskOptions
      • BarHeight - height of task bars (in pixels).
      • BarCornerRadius - radius of the task bar corners (in pixels).
      • Padding - padding around task bars (in pixels).
      • ArrowCurve - curve radius of arrows connecting dependencies.
      • SnapAt - snap tasks at particular interval while resizing or dragging.
      • MoveDependencies - whether moving a task automatically moves its dependencies.
      • PopupOn - event to trigger the popup display ('click' or 'hover').
      • ReadOnly_Progress - disables editing task progress.
      • ReadOnly_Dates - disables editing task dates.
      • ReadOnly - Disables all editing features.


Events

  • OnTaskClick
    • Triggered when a task is clicked
    • Returns:
      • TaskId - task id clicked
  • OnTaskDatesChange
    • Triggered when task date(s) are changed
    • Returns:
      • TaskId - task id changed
      • NewStart - new start date
      • NewEnd - new end date
  • OnTaskProgressChange
    • Triggered when task progress is changed
    • Returns:
      • TaskId - task id changed
      • NewProgress - new progress


In addition to the Block, the component also exposes a public Client Action called FrappeGantt_ScrollToDate, that accepts a Date as input parameter, and triggers the Gantt to scroll to that date.

Simply place the Block in a page or block, set the inpur parameters accordingly, handle the events if needed, and that's it.

You can play with the demo by clicking on the Try Now button above.