Add Look Up Column to the Gantt Chart view of SharePoint using JSON Code

Question

Add Look Up Column to the Gantt Chart view of SharePoint using JSON Code

Chandrika Kambala 40

Hello @Ling Zhou_MSFT and Community Members!

Any Help will be greatly appreciated!

I have got a requirement to add Look Up column [Predecessors] which is coming from the same list by taking values from Title column in the Gantt chart view that represents project activity Completed or not.

Please show how to add Look up value into JSON to display the project activity?

2025-02-25_17-11-12

Gantt Chart:

Gantt

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
    "hideSelection": true,
    "hideColumnHeader": true,
    "rowFormatter": {
      "elmType": "div",
      "style": {
        "height": "=if(@rowIndex == 0, '88px', '52px')",
        "display": "block",
        "width": "100%",
        "position": "sticky"
      },
      "attributes": {
        "class": "ms-bgColor-neutralLighter--hover"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-black"
          },
          "style": {
            "width": "100%",
            "display": "=if(@rowIndex == 0, 'flex', 'none')",
            "height": "36px",
            "padding": "0",
            "font-weight": "bold",
            "border-radius": "6px 6px 0 0",
            "align-items": "center"
          },
          "children": [
            {
              "elmType": "div",
              "txtContent": "Milestone Chart",
              "style": {
                "width": "380px",
                "text-align": "left",
                "padding-left": "2.5em",
                "box-sizing": "border-box"
              },
              "attributes": {
                "class": "ms-fontSize-16 ms-fontColor-white"
              }
            },
            {
              "elmType": "div",
              "style": {
                "flex-grow": "1",
                "height": "100%",
                "position": "relative",
                "display": "flex",
                "align-items": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "=toLocaleDateString([$ProjectStartDate])",
                  "style": {
                    "position": "absolute",
                    "padding": "0px 14px 0px 14px",
                    "height": "100%",
                    "margin-left": "40px",
                    "border-radius": "6px 6px 0 0",
                    "display": "flex",
                    "align-items": "center"
                  },
                  "attributes": {
                    "title": "='Project Start: ' + toLocaleDateString([$ProjectStartDate])",
                    "class": "ms-bgColor-sharedCyanBlue10 ms-fontSize-14 ms-fontColor-white"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "=toLocaleDateString([$ProjectEndDate])",
                  "style": {
                    "position": "absolute",
                    "right": "0",
                    "padding": "0px 10px 0px 14px",
                    "height": "100%",
                    "border-radius": "6px 6px 0 0",
                    "display": "flex",
                    "align-items": "Center"
                  },
                  "attributes": {
                    "title": "='Project Finish: ' + toLocaleDateString([$ProjectEndDate])",
                    "class": "ms-bgColor-sharedCyanBlue10 ms-fontSize-14 ms-fontColor-white"
                  }
                },
                {
                  "elmType": "span",
                  "txtContent": "=toLocaleDateString( @now)",
                  "style": {
                    "position": "relative",
                    "width": "90px",
                    "z-index": "100",
                    "display": "=if([$ProjectEndDate] < @now , 'none', 'block')",
                    "left": "=floor( (Number(@now)-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) * 100 ) + '%'",
                    "background-color": "#e1dfdd",
                    "text-align": "center",
                    "padding": "0 3px",
                    "margin": "0 0 0 3px"
                  }
                },
                {
                  "elmType": "span",
                  "attributes": {
                    "class": "ms-fontColor-gray40"
                  },
                  "style": {
                    "position": "relative",
                    "display": "=if( [$ProjectEndDate] < @now , 'none', 'block')",
                    "top": "-1.3em",
                    "z-index": "1",
                    "border-left": "5px solid",
                    "height": "800px",
                    "width": "0.1em",
                    "left": "=  (Number(@now)-Number([$ProjectStartDate])) /  (Number([$ProjectEndDate])-Number([$ProjectStartDate]))  * 100  + '%' "
                  }
                }
              ]
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "width": "100%",
            "display": "flex"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "width": "420px",
                "display": "flex",
                "flex-wrap": "wrap"
              },
              "attributes": {
                "class": ""
              },
              "children": [
                {
                  "elmType": "span",
                  "style": {
                    "width": "30x",
                    "padding": "6px 0",
                    "text-align": "center",
                    "margin-left": "10px",
                    "margin-right": "10px",
                    "cursor": "pointer"
                  },
                  "attributes": {
                    "iconName": "=if([$PercentComplete] >= 100, 'CompletedSolid', if([$PercentComplete] > 0 , 'CortanaLogoReadyOuter', 'CircleRing'))",
                    "title": "='PercentComplete: ' + [$PercentComplete] + '%'",
                    "class": "= 'ms-fontSize-18 ms-fontColor-' + if([$PercentComplete] >= 100, 'green', 'neutralSecondaryAlt')"
                  },
                  "customRowAction": {
                    "action": "setValue",
                    "actionInput": {
                      "PercentComplete": "=if([$PercentComplete] == 0, 25, if([$PercentComplete] == 25, 50, if([$PercentComplete] == 50, 75, if([$PercentComplete] == 75, 100, 0))))"
                    }
                  }
                },
                {
                  "elmType": "button",
                  "txtContent": "[$Title]",
                  "customRowAction": {
                    "action": "editProps"
                  },
                  "style": {
                    "width": "375px",
                    "height": "1.6em",
                    "padding": "0.3em 0 0 0",
                    "border": "none",
                    "background-color": "transparent",
                    "cursor": "pointer",
                    "text-decoration": "none",
                    "text-align": "left",
                    "outline": "none",
                    "display": "inline-block",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap"
                  },
                  "attributes": {
                    "title": "[$Title]",
                    "class": "= 'ms-fontSize-12 ms-fontWeight-semibold ' + if([$DueDate] < @now && [$PercentComplete] < 100, 'ms-fontColor-red', 'ms-fontColor-gray140 ms-fontColor-black--hover')"
                  }
                },
                {
                  "elmType": "span",
                  "style": {
                    "width": "24px",
                    "padding": "0px 0 0 0",
                    "text-align": "left",
                    "margin-left": "-18px",
                    "color": "=if([$DueDate] < @now && [$PercentComplete] < 100, '#e72828', '#0078db')"
                  },
                  "attributes": {
                    "iconName": "=if( ( ([$TaskType] == 'Task' || [$TaskType] == '') && [$DueDate]< @now && [$PercentComplete] < 100 ) || ([$TaskType] == 'Milestone' && [$StartDate]< @now && [$PercentComplete] < 100 )  , '', '')",
                    "title": "This task is running late!",
                    "class": "='ms-fontSize-16 ms-fontColor-' + if([$DueDate]< @now && [$PercentComplete] < 100, 'sharedRed20', 'themePrimary')"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "=toLocaleDateString([$StartDate])",
                  "style": {
                    "width": "96px",
                    "padding": "0.1em 0",
                    "text-align": "center",
                    "margin-left": "40px",
                    "margin-right": "24px",
                    "height": "1.4em",
                    "border-radius": "12px"
                  },
                  "attributes": {
                    "class": "ms-fontSize-12 ms-bgColor-neutralLight"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "=toLocaleDateString([$DueDate])",
                  "style": {
                    "width": "96px",
                    "padding": "0.1em 0",
                    "text-align": "center",
                    "border-radius": "12px"
                  },
                  "attributes": {
                    "class": "ms-fontSize-12 ms-bgColor-neutralLight"
                  }
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "flex-grow": "1",
                "position": "relative",
                "height": "3.3em",
                "padding": "0.3em 0 0 0"
              },
              "attributes": {
                "class": ""
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "",
                  "style": {
                    "position": "absolute",
                    "box-sizing": "border-box",
                    "display": "=if([$TaskType] == 'Task' || [$TaskType] == '' , 'flex', 'none')",
                    "border-radius": "6px",
                    "z-index": "10",
                    "top": "1.1em",
                    "height": "1.8em",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "border": "1.5px solid",
                    "border-color": "#0078db",
                    "background-color": "=if([$PercentComplete] >= 100, '#00CC66', if([$DueDate] < @now && [$PercentComplete] < 100, '#ffffff', '#cfe6f7'))",
                    "left": "=  (Number([$StartDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) * 100  + '%'",
                    "width": "= if( [$DueDate] > [$ProjectEndDate],  (Number([$ProjectEndDate])-Number([$StartDate])+ 86400000) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])+ 86400000) * 100  ,  (Number([$DueDate])-Number([$StartDate])+ 86400000) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])+ 86400000) * 100 ) + '%'"
                  },
                  "attributes": {
                    "class": "",
                    "title": ""
                  }
                },
                {
                  "elmType": "div",
                  "style": {
                    "position": "absolute",
                    "box-sizing": "border-box",
                    "display": "=if(( [$TaskType] == 'Task' || [$TaskType] == '' ) && [$PercentComplete] > 0, 'flex', 'none')",
                    "border-radius": "=if( [$PercentComplete] < 100, '6px 0 0 6px', '6px')",
                    "z-index": "20",
                    "top": "1.1em",
                    "height": "1.8em",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "border": "1px solid",
                    "border-color": "=if([$DueDate] < @now && [$PercentComplete] < 100, '#ff0000', '#0078db')",
                    "background-color": "=if([$PercentComplete] == 100, '#00CC66', if([$DueDate] < @now && [$PercentComplete] < 100, '#ffa8a8', '#0078db'))",
                    "left": "=  (Number([$StartDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) * 100  + '%'",
                    "width": "= if( [$DueDate] > [$ProjectEndDate],  ((Number([$ProjectEndDate])-Number([$StartDate])+ 86400000) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])+ 86400000) * 100) * ([$PercentComplete] / 100) + '%'  ,  ((Number([$DueDate])-Number([$StartDate])+ 86400000) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])+ 86400000) * 100 * ([$PercentComplete] / 100)) + '%'"
                  },
                  "attributes": {
                    "class": "sp-field-bold",
                    "title": "=[$Title] + ' - ' + toLocaleDateString([$StartDate]) + ' - ' + toLocaleDateString([$DueDate])"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "",
                  "style": {
                    "position": "absolute",
                    "box-sizing": "border-box",
                    "border-radius": "6px",
                    "z-index": "50",
                    "top": "1.1em",
                    "height": "1.8em",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "border": "=if([$DueDate]< @now && [$PercentComplete] < 100 && ([$TaskType] == 'Task' || [$TaskType] == '' ), '1.8px solid #ff0000', 'none')",
                    "background-color": "",
                    "left": "=  (Number([$StartDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) * 100  + '%'",
                    "width": "=if([$TaskType] == 'Milestone', '28px' ,  if( [$DueDate] > [$ProjectEndDate],  (Number([$ProjectEndDate])-Number([$StartDate])+ 86400000) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])+ 86400000) * 100  ,  (Number([$DueDate])-Number([$StartDate])+ 86400000) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])+ 86400000) * 100 ) + '%')",
                    "margin-left": "=if([$TaskType] == 'Milestone', '-14px' , '0')"
                  },
                  "attributes": {
                    "class": "",
                    "title": ""
                  },
                  "customCardProps": {
                    "openOnEvent": "hover",
                    "directionalHint": "bottomCenter",
                    "isBeakVisible": true,
                    "beakStyle": {
                      "backgroundColor": "white"
                    },
                    "formatter": {
                      "elmType": "div",
                      "style": {
                        "max-height": "256px",
                        "width": "282px",
                        "display": "flex",
                        "flex-wrap": "wrap",
                        "align-items": "flex-start"
                      },
                      "attributes": {
                        "class": "ms-ContextualMenu-list is-open list-436"
                      },
                      "children": [
                        {
                          "elmType": "div",
                          "txtContent": "[$Title]",
                          "style": {
                            "width": "250px",
                            "height": "40px",
                            "padding": "4px 4px 0 4px",
                            "overflow": "hidden",
                            "text-overflow": "ellipsis"
                          },
                          "attributes": {
                            "class": "ms-fontSize-14 ms-bgColor-themeLight ms-fontWeight-semibold ms-fontColor-gray160"
                          }
                        },
                        {
                          "elmType": "div",
                          "style": {
                            "width": "12px",
                            "flex-grow": "1",
                            "height": "34px",
                            "padding": "10px 0 0 0 ",
                            "text-align": "center",
                            "cursor": "pointer"
                          },
                          "attributes": {
                            "iconName": "Edit",
                            "class": "ms-fontSize-14 ms-bgColor-themeLight ms-fontColor-gray160"
                          },
                          "customRowAction": {
                            "action": "editProps"
                          }
                        },
                        {
                          "elmType": "div",
                          "style": {
                            "width": "100%",
                            "display": "flex",
                            "flex-wrap": "wrap",
                            "align-items": "flex-start",
                            "margin": "2px 0"
                          },
                          "children": [
                            {
                              "elmType": "div",
                              "style": {
                                "width": "24px",
                                "padding": "6px 0",
                                "text-align": "center",
                                "height": "1.4em"
                              },
                              "attributes": {
                                "iconName": "Timeline"
                              }
                            },
                            {
                              "elmType": "div",
                              "txtContent": "0%",
                              "style": {
                                "padding": "2px 6px",
                                "text-align": "center",
                                "border-radius": "14px",
                                "margin": "2px 2px 0 0 ",
                                "cursor": "pointer",
                                "height": "1.4em"
                              },
                              "attributes": {
                                "class": "='ms-fontSize-14  ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$PercentComplete] == 0, 'themeTertiary', 'neutralLight')"
                              },
                              "customRowAction": {
                                "action": "setValue",
                                "actionInput": {
                                  "PercentComplete": "0"
                                }
                              }
                            },
                            {
                              "elmType": "div",
                              "txtContent": "25%",
                              "style": {
                                "padding": "2px 6px",
                                "text-align": "center",
                                "border-radius": "14px",
                                "margin": "2px 2px 0 0 ",
                                "cursor": "pointer",
                                "height": "1.4em"
                              },
                              "attributes": {
                                "class": "='ms-fontSize-14  ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$PercentComplete] == 25, 'themeTertiary', 'neutralLight')"
                              },
                              "customRowAction": {
                                "action": "setValue",
                                "actionInput": {
                                  "PercentComplete": "25"
                                }
                              }
                            },
                            {
                              "elmType": "div",
                              "txtContent": "50%",
                              "style": {
                                "padding": "2px 6px",
                                "text-align": "center",
                                "border-radius": "14px",
                                "margin": "2px 2px 0 0 ",
                                "cursor": "pointer",
                                "height": "1.4em"
                              },
                              "attributes": {
                                "class": "='ms-fontSize-14  ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$PercentComplete] == 50, 'themeTertiary', 'neutralLight')"
                              },
                              "customRowAction": {
                                "action": "setValue",
                                "actionInput": {
                                  "PercentComplete": "50"
                                }
                              }
                            },
                            {
                              "elmType": "div",
                              "txtContent": "75%",
                              "style": {
                                "padding": "2px 6px",
                                "text-align": "center",
                                "border-radius": "14px",
                                "margin": "2px 2px 0 0 ",
                                "cursor": "pointer",
                                "height": "1.4em"
                              },
                              "attributes": {
                                "class": "='ms-fontSize-14  ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$PercentComplete] == 75, 'themeTertiary', 'neutralLight')"
                              },
                              "customRowAction": {
                                "action": "setValue",
                                "actionInput": {
                                  "PercentComplete": "75"
                                }
                              }
                            },
                            {
                              "elmType": "div",
                              "txtContent": "100%",
                              "style": {
                                "padding": "2px 6px",
                                "text-align": "center",
                                "border-radius": "14px",
                                "margin": "2px 2px 0 0 ",
                                "cursor": "pointer",
                                "height": "1.4em"
                              },
                              "attributes": {
                                "class": "='ms-fontSize-14  ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$PercentComplete] == 100, 'themeTertiary', 'neutralLight')"
                              },
                              "customRowAction": {
                                "action": "setValue",
                                "actionInput": {
                                  "PercentComplete": "100"
                                }
                              }
                            }
                          ]
                        },
                        {
                          "elmType": "div",
                          "style": {
                            "width": "24px",
                            "display": "=if( ( ([$TaskType] == 'Task' || [$TaskType] == '') && [$DueDate]< @now && [$PercentComplete] < 100 ) || ([$TaskType] == 'Milestone' && [$StartDate]< @now && [$PercentComplete] < 100 ) , 'block', 'none')",
                            "padding": "6px 0 7px 0",
                            "text-align": "center",
                            "height": "1.4em",
                            "margin": "2px 0"
                          },
                          "attributes": {
                            "iconName": "EventDateMissed12",
                            "class": "sp-field-severity--blocked30 ms-fontSize-10 ms-fontColor-sharedRed20"
                          }
                        },
                        {
                          "elmType": "div",
                          "txtContent": "This task is running late!",
                          "style": {
                            "width": "254px",
                            "display": "=if( ( ([$TaskType] == 'Task' || [$TaskType] == '') && [$DueDate]< @now && [$PercentComplete] < 100 ) || ([$TaskType] == 'Milestone' && [$StartDate]< @now && [$PercentComplete] < 100 ) , 'block', 'none')",
                            "padding": "4px 0 4px 4px",
                            "text-align": "left",
                            "height": "1.4em",
                            "margin": "2px 0"
                          },
                          "attributes": {
                            "class": "sp-field-severity--blocked30 ms-fontSize-14 ms-fontColor-sharedRed20"
                          }
                        },
                        {
                          "elmType": "div",
                          "style": {
                            "width": "24px",
                            "padding": "6px 0",
                            "text-align": "center",
                            "height": "1.4em"
                          },
                          "attributes": {
                            "iconName": "Calendar"
                          }
                        },
                        {
                          "elmType": "div",
                          "txtContent": "=toLocaleDateString([$StartDate])",
                          "style": {
                            "width": "127px",
                            "padding": "2px 0",
                            "text-align": "center",
                            "border-radius": "14px",
                            "margin": "2px 2px 0 0 ",
                            "height": "1.4em"
                          },
                          "attributes": {
                            "class": "ms-fontSize-14 ms-bgColor-neutralLight"
                          }
                        },
                        {
                          "elmType": "div",
                          "txtContent": "=toLocaleDateString([$DueDate])",
                          "style": {
                            "width": "127px",
                            "padding": "2px 0",
                            "text-align": "center",
                            "border-radius": "14px",
                            "margin": "2px 2px 0 0 ",
                            "height": "1.4em"
                          },
                          "attributes": {
                            "class": "ms-fontSize-14 ms-bgColor-neutralLight"
                          }
                        },
                        {
                          "elmType": "div",
                          "style": {
                            "width": "24px",
                            "padding": "6px 0",
                            "text-align": "center",
                            "height": "1.4em"
                          },
                          "attributes": {
                            "iconName": "Contact",
                            "title": "='Assigned to : ' + [$AssignedTo.title]"
                          }
                        },
                        {
                          "elmType": "div",
                          "txtContent": "[$AssignedTo.title]",
                          "style": {
                            "width": "254px",
                            "padding": "4px 0 4px 4px"
                          },
                          "attributes": {
                            "defaultHoverField": "[$AssignedTo]"
                          }
                        },
                        {
                          "elmType": "div",
                          "txtContent": "[$TaskDescription]",
                          "style": {
                            "font-style": "italic",
                            "width": "254px",
                            "padding": "4px 0 4px 4px"
                          }
                        }
                      ]
                    }
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "",
                  "style": {
                    "position": "relative",
                    "box-sizing": "border-box",
                    "display": "=if([$TaskType] == 'Milestone', 'flex', 'none')",
                    "z-index": "10",
                    "top": "0.3em",
                    "height": "3em",
                    "left": "=  (Number([$StartDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) * 100  + '%'",
                    "width": "28px",
                    "color": "=if([$DueDate] < @now && [$PercentComplete] < 100, '#e72828', '#0078db')"
                  },
                  "attributes": {
                    "iconName": "=if([$StartDate]< @now && [$PercentComplete] < 100, 'Diamond', 'Diamond')",
                    "title": "=[$Title] + ' - ' + toLocaleDateString([$StartDate]) ",
                    "class": "='ms-fontSize-20 ' + if([$StartDate]< @now && [$PercentComplete] < 100, 'ms-fontColor-sharedRed20', 'ms-fontColor-themePrimary') "
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "=getDate([$StartDate]) + '-' +  if(getMonth([$StartDate])==0,'Jan',if(getMonth([$StartDate])==1,'Feb',if(getMonth([$StartDate])==2,'Mar',if(getMonth([$StartDate])==3,'Apr',if(getMonth([$StartDate])==4,'May',if(getMonth([$StartDate])==5,'Jun',if(getMonth([$StartDate])==6,'Jul',if(getMonth([$StartDate])==7,'Aug',if(getMonth([$StartDate])==8,'Sep',if(getMonth([$StartDate])==9,'Oct',if(getMonth([$StartDate])==10,'Nov',if(getMonth([$StartDate])==11,'Dec',''))))))))))))",
                  "style": {
                    "position": "absolute",
                    "box-sizing": "border-box",
                    "display": "=if([$TaskType] == 'Milestone'  , 'flex', 'none')",
                    "z-index": "3",
                    "top": "2.6em",
                    "height": "24px",
                    "left": "=  (Number([$StartDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) * 100  + '%'",
                    "margin-left": "-8px",
                    "width": "60px",
                    "text-align": "right"
                  },
                  "attributes": {
                    "class": "sp-field ms-fontSize-13"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "=(Number([$PercentComplete])) + '%'",
                  "style": {
                    "position": "absolute",
                    "box-sizing": "border-box",
                    "display": "=if([$TaskType] == 'Task' || [$TaskType] == '' , 'flex', 'none')",
                    "z-index": "3",
                    "top": "12px",
                    "height": "24px",
                    "margin-left": "=if((Number([$DueDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) <= 0.9  , '10px' , '-40px')",
                    "left": "=if((Number([$DueDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) <= 0.9 , (Number([$DueDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) * 100  + '%' , (Number([$StartDate])-Number([$ProjectStartDate])) / (Number([$ProjectEndDate])-Number([$ProjectStartDate])) * 100  + '%' ) ",
                    "width": "40px",
                    "color": "=if([$DueDate] < @now && [$PercentComplete] < 100, '#ff0000', '#000000')"
                  },
                  "attributes": {
                    "class": "sp-field-bold ms-fontSize-14"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }

Xyza Xue_MSFT 30,176 Reputation points Microsoft External Staff

2025-02-26T06:28:08.98+00:00

Hi, Thank you for your question. I am currently looking into this issue and will give you an update as soon as possible.

2 answers

Your answer

Xyza Xue_MSFT 30,176 Reputation points Microsoft External Staff

2025-02-26T06:28:08.98+00:00

Hi, Thank you for your question. I am currently looking into this issue and will give you an update as soon as possible.

Answer 1

Hi @Chandrika Kambala ,

To incorporate a lookup column, such as "Predecessors," into a SharePoint Gantt Chart view using JSON formatting, insert the following code snippet:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Predecessors.lookupValue] == 'Creation1', 'sp-field-severity--severeWarning', '')"
}

User's image

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Chandrika Kambala 40

Hello@Xyza Xue_MSFT ,

I hope you are doing well!

Thank you for the reply. I do not want a particular value from the lookup value to match. In the above suggestion, you have provided me with if predecessors are equal to Creation, then a severe warning. Predecessors will take the value from the Title column for each task and Milestone. I need the Predecessors column value to be equal to the Title column value. Then, Show the activity of the Project like completed, ON hold etc.

Can you also please provide where to add the code that you sent in my JSON Script? It is a long script, and it isn't very clear to me as I am new to JSON Development.

Xyza Xue_MSFT 30,176 Reputation points Microsoft External Staff

2025-02-27T06:45:57.8466667+00:00

Hi @Chandrika Kambala ,

Our forum only provides simple customization for json requirements, the code you originally provided is too complex for us to provide a high level of customization. We can't provide a high level of customization. Assembly and implementation depends on your own development experience, thanks for your understanding. Maybe you can try to go to Microsoft Community Hub forum for help.

Share via

Add Look Up Column to the Gantt Chart view of SharePoint using JSON Code

2 answers

Your answer