Admin Guide - Enable Launching of Custom LWC from Project Gantt

Inspire Planner provides you with the ability to launch a custom Lightning Web Component (LWC) directly from the Project Gantt. This minimizes user clicks, improves efficiency, and provides a more intuitive and user-friendly experience.

For example, you may have a custom LWC to create a service record for a project task. Instead of requiring users to go to the project task to launch the custom LWC, with this feature you are able to add an icon on the project Gantt that, when clicked on, will launch your custom LWC.

Please note:

• The steps outlined in this help article should be performed by a Salesforce System Administrator as it requires access to Salesforce Setup and Custom Settings.
   
• This feature is only support in the Gantt Lightning Web Component (Gantt LWC) and is not available in Gantt Visualforce.

Before you begin

When designing your custom Lightning Web component, you will need to design it to accept parameters/values from the project task object. This ensures that the data you create/edit via the custom LWC is related to the correct project task record.

Add your Custom Lightning Web Component to the Project Lightning Record Page

The first step is to add your custom Lightning Web Component to the Project Lightning record page. It should be placed on the same page as the Gantt LWC.

Configure your Custom Lightning Web Component

You will need to configure your custom Lightning Web Component so that it is subscribed to the Inspire Planner LWC message channel, which is as follows:

@salesforce/messageChannel/inspire1__ganttCustomActionChannel__c

Then, set the message payload as:

{

task: Object

readOnly: Boolean

}

On receiving a message, your component may display a modal window rendered using the message payload.

Select the Icon to Display in the Project Gantt

The next step is to select the icon that will be displayed in the Project Gantt. When users click on this icon, it launches your custom Lightning Web Component.

1. Go to https://fontawesome.com/.
    
2. Scroll down the page and click on Classic.
   
   
    
3. Click on the icon you would like to use.
   
   
    
4. Copy the icon name. The icon name is the portion enclosed in parentheses (see example below).
   
   

Populate Custom Settings

The Project Gantt Custom Action Column in custom settings allows you to define the icon displayed in the project Gantt that will launch your custom Lightning Web Component.

1. Click on the Gear icon in the top right corner and go to Setup.
   
   
    
2. Enter "Custom Settings" in the Quick Find box and click on Custom Settings.
   
   
    
3. Click on Manage beside Project Gantt Custom Action Column.
   
   
    
4. Click on New located above "Default Organizational Level Value".
   
   
    
5. Populate the following:
   
   Action Icon Name - enter the Font Awesome icon name you copied in the section above. ​​​​​​​​​​​​​
   
   Column Name - the name of the column that will be displayed in the Project Gantt.
   
   Enabled - set this to TRUE to display the custom column in the Project Gantt.
   
   Click on Save to save your changes.
   
   

How to Launch Custom LWC from Project Gantt

After you've populated the custom settings for your custom LWC, users can now launch your custom LWC directly from the Project Gantt.

The column name you populated for your custom LWC will now display as a column option in the project Gantt. Simply right-click on any column heading and go to Columns.

You will now see the column name for your custom LWC as an option to add to the project Gantt.

When added to the project Gantt, it will display the icon you populated in Action Icon Name. In the example below, we set it to "bolt" so this is the icon users will see when the column is added.

When users click on this icon, it then launches the custom LWC.