Add and Configure Gantt Chart Extension on Your Zoho Creator Page

Add and Configure Gantt Chart Extension on Your Zoho Creator Page

Requirement

Include a Gantt Chart extension in your Zoho Creator application to visualize and understand your project schedule, task duration, overlapping tasks, milestones, and deadlines. 

Use Case

Consider a Zoho Creator task management application used in your organization to manage tasks. To display the overall view of the task with various factors like task duration, overlapping tasks, milestones, and deadlines, you can embed the Gantt Chart extension in any of your application pages. With this Gantt chart extension, you can efficiently plan, schedule, and track your projects within Zoho Creator applications.

Pre-requisites

Installing the Gantt Chart Extension for Zoho Creator
  1. Install the Gantt Chart Extension for Zoho Creator from Zoho Marketplace. Learn how to Install and Manage Extensions.

Alternatively, you can also install the Gantt Chart Extension directly from Zoho Creator. Navigate to the Operations section > Application > Marketplace > Extensions and install it.
 

Steps to Follow      

  1. Create forms with the following details to record the project and task details.

    Form Name

    Form Link Name

    Field Type

    Field Name

    Field Link Name

    Task Details

    Task_Details

    Single Line

    Task Title

    Task_Title

    Multi Line

    Task Description

    Task_Description

    Date

    Start Date

    Start_Date

    Date

    End Date

    End_Date

    2. Info: To ensure the Gantt chart displays effectively, sort the 'All Task Details' report of Task Details form from its report properties by Start Date field in ascending order.

  2. Create a page with the name 'Gantt Chart' to add the Gantt Chart extension
  3. Drag and drop the Gantt Chart extension listed under the Installed category under the Widgets section on the left pane.
  4. Navigate to the page variables on the page and add the following page variable to include required parameters for the extension.

    Variable

    Data Type

    data

    TEXT



  5. Configure Page Script by adding the following script to the editor for supplying data to the extension's parameters.
  1. input.data =
  2. {
  3. "reportName":"All_Task_Details",
  4. "chartSetup":{
  5.  "dateFormat": "dd-MMM-yyyy",
  6. "fields":
  7. {
  8. "taskName":"Task_Title",
  9. "startDate":"Start_Date",
  10. "endDate":"End_Date"
  11. }
  12. }
  13. };
Where,
All_Task_Details
is the report link name of the 'Task Details' form's report.
dd-MMM-yyyy
(Optional)		The date format specified in the date and time settings in your application settings.
Supported Formats:
  1. dd-MM-yyyy (Default)
  2. dd-MMM-yyyy
  3. MM-dd-yyyy
Task_Title
is the field link name of the 'Task Title' field in 'Task Details' form.
Start_Dateis the field link name of the 'Start Date' field in the 'Task Details' form.
End_Date
is the field link name of the 'End Date' field in the 'Task Details' form.

See How it Works


  1. Gantt Chart Extension
  2. Understand Extensions
  3. Install and Manage Extensions