Overview
This sample displays the record list in the To Do App in the form of a Gantt chart:
- The Gantt chart will display if there are one or more records in the list.
- The colors set in the Gantt chart will vary according to the value of the "Priority" field of the To Do App.
- The Gantt chart will be displayed on the Header Space Element of the App, which lies above the list of records.
Prepare the App
Create an App with the following fields:
| Field Type | Field Name | Field Code | Options |
|---|---|---|---|
| Text | To Do | To_Do | - |
| Date | From | From | - |
| Date | To | To | - |
| Drop-down | Priority | Priority | Set the following 6 options: "A", "B", "C", "D", "E", "F" |
Sample Code
JavaScript Libraries
This customization will use the jQuery and jQueryGantt libraries found in the kintone CDN. Specify the following URLs in the JavaScript and CSS Customization settings of the App.
- jQuery
https://js.kintone.com/jquery/2.1.1/jquery.min.js - jQueryGantt
https://js.kintone.com/jquerygantt/20140623/jquery.fn.gantt.min.js
JavaScript file
Save the following code as a JavaScript file and upload it to the JavaScript and CSS Customization settings of the App.
CSS Libraries
Open the JavaScript and CSS Customization settings and specify the following library found in the kintone CDN.
- jQueryGantt
https://js.kintone.com/jquerygantt/20140623/css/style.css
CSS files
Save the following codes as a CSS file and upload it to the JavaScript and CSS Customization settings to add a bit more flavor to the style.
Save the App's settings, and update the App.
The Result
Add a number of records into the App and navigate to the record list to view the Gantt chart. The Gantt chart should be displayed above the list of records.
