Adding the Inspire Planner Portable Gantt Visualforce to a Lightning Page

Inspire Planner's portable Gantt Visualforce page allows you to add the Project Schedule (Gantt) to a Lighting record page for any object.

For example, you may have a Project associated with a specific Opportunity. You can choose to add the portable Gantt to your Opportunity Lightning record page so that you are able to see the Project Schedule directly on the Opportunity record. The portable Gantt Visualforce page can be added to the Record Detail or you can also choose to add it to a Tab. Below is an example of having the portable Gantt displayed on the Record Detail page.

This help article will show you how to add the portable Gantt Visualforce page to a Lightning record page for any object in Salesforce.
 

Please note the following:

• This feature only supports a single Project view. This means that you can only view one (1) Project in the Portable Gantt based on what is populated in the Project look-up field on the related Object.
   
• Even though you can add the portable Gantt to any Lightning record page, the Salesforce user needs to have an Inspire Planner license to be able to see the portable Gantt on the page.
   
• The Portable Gantt will only display the project Gantt if the project itself is also in Gantt Visualforce. If the Gantt version in the project is set to Gantt LWC, then it will not display in the portable Gantt. You will need to add the Portable Gantt LWC component to the Lightning record page instead (please see Adding the Inspire Planner Portable Gantt Lightning Web Component (Gantt LWC) to a Lightning Record Page). If some projects are in Gantt Visualforce and some are in Gantt LWC, then we recommend adding both portable components to the Lightning page and setting component visibility based on the Gantt version specified in the Project. 
   
• The steps outlined in this help article must be completed by a Salesforce System Administrator as it requires access to Salesforce Setup.

Create a Look-up to the Project

The first step is to create a look-up between the object and the Inspire Planner Project.

For the purpose of this help article, we are going to go over how to add the portable Gantt to an Opportunity Lightning record page but the same steps apply when adding the portable Gantt to any other object in Salesforce.

1. Go to the Salesforce object where you would like to add the portable Gantt. In the example below, we are going to add the portable Gantt to the Opportunity Lighting record page.
   
   
    
2. Click on Fields & Relationships. Then click on New.
   
   
    
3. Select Lookup Relationship as the data type and click on Next.
   
   
    
4. Select "Project" in Related To and click on Next.
   
   
    
5. You will need to populate the following:
   
   Field Label - set this to "Inspire Project"
   
   Salesforce will auto-populate Field Name as "Inspire_Project" when you tab out of Field Label. Please do not change the value. It should be left as "Inspire_Project".
   
   Then click on Next.
   
   
    
6. Set it to Visible for all user profiles and click on Next.
   
   
    
7. Select the page layout(s) you would like to add the field to and click on Next.
   
   
    
8. Select the Project Page Layout(s) you would like to add the Opportunity Related List to and click on Save.
   
   

Add Portal Gantt Visualforce Page to Lightning Record Page

After you've created the Inspire Project look-up field on the object, you will then need to add the portable Gantt Visualforce page to your Lightning record page.

1. Go to Lightning Record Pages for the Salesforce Object. In the example below, we are adding the portal Gantt to the Opportunity Lightning record page but the same steps apply when you are adding it to any other Salesforce Object.
   
   
    
2. Next, click on the Lightning Record page you are using. The image below is just an example. If you do not have a Lightning Record page yet, you will need to create one first.
   
   
    
3. Click on Edit.
   
   
    
4. Under the section for Standard, drag Visualforce to your desired area on the Lightning Record Page.
   
   
    
5. Set Visualforce Page Name to InspirePortableGantt. You may also want to consider adjusting the Height (in pixels) according to your preferred height when it is displayed on the page.
   
   
    
6. We also recommend setting the Component visibility to the following:
   
   User --> Inspire Planner User Equal TRUE
   Record --> Inspire Project --> Project Name Not Equal to a blank value
   Record --> Inspire Project --> Gantt Version Equal Visualforce
   
   and set Show component when to All filters are true.
   
   By setting the above component visibility, if the Gantt Version in the Project is set to "Visualforce", then it displays the Portable Gantt Visualforce component on the page. 
   
   If there is no value in Inpsire Project, it will simply display a message on screen that the Project does not exist. 
   
   
   
   
    
7. Click on Save when finished. If you have not yet activated the Lighting record page, you will also need to activate it.

How the Portable Gantt displays on the record

Once the above configurations are complete, when you populate the Inspire Project lookup on the record, it then displays the Project Gantt.

Once the Inspire Project look-up field is populated with a Project, then the Project Gantt (Schedule) displays on the record. In the example below, we added the Portable Gantt in it's own Tab on the Opportunity Lightning Record page but it can be added to the Record Detail page as well.

Example of portable Gantt in its own Tab:

Example of portable Gantt in the Record Detail: