Category / Section
How to render Gantt in Saleforce Visualforce environment
1 min read
We can render Syncfusion JavaScript controls within Salesforce Visualforce page using the following steps. For instance, we have rendered ejGantt control in the Visualforce page.
- Install the latest version of Essential Studio for JavaScript, you can get this from this location. https://www.syncfusion.com/products/javascript
- Create a new folder (SFJSUI) and add the necessary theme and script files for the sample. You can get the script and theme files from the Essential Studio installed location.
C:\Program Files (x86)\Syncfusion\Essential Studio\{{version}}\JavaScript\assets
- For rendering Gantt in Visual Force environment, add the below script and theme files to the (SFJSUI) folder in the below structure
- Zip the folder (SFJSUI) to create a new file (SFJSUI.zip).
- Add this ZIP file (SFJSUI.zip) in static resource within your Salesforce account,
- Open developer console window to create a new apex page
- Then create new apex page in developer console window
- In this apex page add below code snippet in header section to refer the script and theme files.
HTML
<head> <apex:includeScript value="{!URLFOR($Resource.SFJSUI,'SFJSUI/Scripts/jquery-3.1.1.min.js')}"/> <apex:includeScript value="{!URLFOR($Resource.SFJSUI,'SFJSUI/Scripts/jsrender.min.js')}"/> <apex:includeScript value="{!URLFOR($Resource.SFJSUI,'SFJSUI/Scripts/ej.web.all.min.js')}"/> <apex:includeScript value="{!URLFOR($Resource.SFJSUI,'SFJSUI/Scripts/jsonganttdata.js')}"/> <apex:stylesheet value="{!URLFOR($Resource.SFJSUI, 'SFJSUI/Themes/default-theme/ej.web.all.min.css')}" / </head>
- Add the below code snippet to initialize the Gantt control.
HTML
<div id="GanttContainer" style="height:350px;width:100%;"></div> <script type="text/javascript"> $(function () { $("#GanttContainer").ejGantt({ dataSource: defaultGanttData, taskIdMapping: "TaskID", taskNameMapping: "TaskName", scheduleStartDate: new Date("02/23/2014"), scheduleEndDate: new Date("03/31/2014"), startDateMapping: "StartDate", endDateMapping: "EndDate", progressMapping: "Progress", childMapping: "Children", treeColumnIndex: 1 }); }); </script>
- Click the preview button to view the Gantt control.