I have a question about Project Gantt

[mikezimm]

Sample (which sample are you talking about)

https://github.com/pnp/List-Formatting/tree/master/view-samples/project-gantt-chart

Question (the more details, the better)

I am wondering if it is possible to use the @now syntax to set the Project Start and Project End on all items instead of using a column.

For instance, Instead of having separate start and end for each item: use a syntax like this? I tried doing a search and replace but I'm just not sure if it is even possible.

Project Start === @now -10 (as an example for Today - 10) Project End === @now + 30 (to be Today + 30)

That way the gantt is more relevant and shows the current time frame and it would not be necessary to have each list item have fields with the same value.

@gdk-max , @thechriskent

[gdk-max]

Hi Mike, Thanks for your suggestion. In principle that would be possible but, you will have the problem of time moving forward. In other words, at a certain point the start and enddate of each task would no longer fit withing the @now-range. And since the nar are calculated based on the difference between the start and enddate of the project, this would certainly create issues.

That being said, make sure you use the newly added addDay-function: addDays(Date(@now), 30)

But again, I don't think it is worth the effort. Updating all rows is easy when you selct all rows and use the bulk-editing option. kind regards Geert

[now]

Hi!

Again, but this time to you, @gdk-max, I would love it if you would quote code snippets so that things like @now don’t create a GitHub mention to me.

Thanks!

Best regards, Nikolai

[mikezimm]

@gdk-max ,

The reason made this suggestion was not for me, but for end users in our company who were looking for a simple gantt view of a list that can be put on a site page. So the potential to re-use could be large given there is no ootb view like it without a 3rd party web part.

the problem of time moving forward

I think this could possibly be solved by adding filtering to the view and only show items where the TaskStart and TaskEnd are relevant times (aka not to far in the past or future).

Another alternative to the view filtering would be to somehow use this trick from another view formatting sample from @thechriskent... although filtering through view formatting is hard to debug way beyond typical non-power users: https://github.com/pnp/List-Formatting/blob/c581bea3ae3d33b143e58cf233928c1d65e5a6e9/view-samples/announcements/announcements.json#L11

  "rowFormatter": {
    "elmType": "div",
    "style": {
      "min-width": "15vw",
      "max-width": "19vw",
      "padding-bottom": "20px",
      "display": "=if([$RemoveDate] <= @now, 'none', '')"
    },

Regarding the effort to update:

I agree that SPO has made it much easier to bulk edit items.

But there are still plenty of reasons to go this path of it is possible:

• Mass editing changes all the Modified stamps which might be used for many reasons
• It also introduces the possibility of accidently mass updating something you didn't want to update
• It creates extra work if you have to remember to mass update all these things every time you need to see a gantt view.
• If you just want a rolling gantt chart (showing current time period), the Project Start and end really serve no purpose except to make the view formatting.

So I will give it a try using your @ now suggestion. I think I tried a flavor of that but might have been missing the Date( part.

Thanks again and I will try to report back when I get it working.

[mikezimm]

So I was able to get it to scale properly... This is to get the Project Start (left side) = Today -7 and the Project End (right side) = Today +14.

However, I think what it would really need (and probably not be feasible) is to set the Project Start and End to be more like: Min of all visible (ProjectStart) and Max of all visible (ProjectEnd) to see the full range of the project.

Thanks for the feedback and thoughts. I'll close given it may not be feasible or worth the effort at this point. Might need to just make a web part to do this complex of formatting :(

Note: This formatting changed a few colors just to make it easier to see what changes impacted what part of the 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, '7.3em', '4em')",
      "display": "block",
      "width": "100%"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-gray20"
        },
        "style": {
          "width": "100%",
          "display": "=if(@rowIndex == 0, 'flex', 'none')",
          "height": "3em",
          "padding": ".2em",
          "font-weight": "bold"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "Task",
            "style": {
              "width": "220px",
              "text-align": "left",
              "padding-left": "0.4em",
              "box-sizing": "border-box"
            },
            "attributes": {
              "class": "ms-fontSize-16"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "height": "100%",
              "position": "relative"
            },
            "attributes": {
              "class": "ms-fontSize-14"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString(addDays(Date(@now), -7))",
                "style": {
                  "text-align": "left",
                  "color": "red"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString(addDays(Date(@now), 14))",
                "style": {
                  "position": "absolute",
                  "right": "0",
                  "color": "green"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=toLocaleDateString( @now)",
                "style": {
                  "position": "relative",
                  "width": "100px",
                  "z-index": "100",
                  "display": "=if([$ProjectDue] < @now , 'none', 'block')",
                  "left": "=floor( (Number(@now)-Number(addDays(Date(@now), -7))) / (Number(addDays(Date(@now), 14))-Number(addDays(Date(@now), -7))) * 100 ) + '%'"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "display": "flex",
          "padding": "0.2em"
        },
        "children": [
          {
            "elmType": "span",
            "style": {
              "width": "21px",
              "padding-top": "0.55em"
            },
            "attributes": {
              "iconName": "=if([$Progress] >= 1, 'CompletedSolid', if([$TaskDue] > [$ProjectDue], 'WarningSolid', if([$TaskStart] > @now, 'Calendar', if([$TaskDue] < @now, 'AlarmClock', 'CircleRing'))))",
              "title": "=if([$Progress] >= 1, 'Complete', if([$TaskDue] > [$ProjectDue], 'Due date is past project due date', if([$TaskStart] > @now, 'Upcoming task', if([$TaskDue] < @now, 'Overdue', 'In progress'))))",
              "class": "='ms-fontSize-16 ms-fontColor-' + if([$Progress] >= 1, 'sharedGreen20', if([$TaskDue] > [$ProjectDue], 'sharedRed20', if([$TaskStart] > @now, 'gray100', if([$TaskDue]< @now, 'sharedRed20', 'sharedCyanBlue20'))))"
            }
          },
          {
            "elmType": "button",
            "txtContent": "[$Title]",
            "customRowAction": {
              "action": "editProps"
            },
            "style": {
              "width": "199px",
              "max-height": "2em",
              "padding": "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-16 ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
            }
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "position": "relative",
              "height": "3em",
              "border-style": "dotted",
              "border-width": "1px 0 1px 0"
            },
            "attributes": {
              "class": "ms-borderColor-sharedGray20"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "=toLocaleDateString([$TaskStart]) + ' - ' + toLocaleDateString([$TaskDue])",
                "style": {
                  "position": "relative",
                  "box-sizing": "border-box",
                  "display": "flex",
                  "border-radius": "1em",
                  "z-index": "1",
                  "top": "0.2em",
                  "height": "3em",
                  "overflow": "hidden",
                  "word-break": "break-word",
                  "padding": "0.2em 0.4em",
                  "font-size": "10px",
                  "line-height": "12px",
                  "border-width": "1px",
                  "border-style": "solid",
                  "left": "=  (Number([$TaskStart])-Number( addDays(Date(@now), -7))) / (Number( addDays(Date(@now), 14))-Number(addDays(Date(@now), -7))) * 100  + '%'",
                  "width": "= if( [$TaskDue] > addDays(Date(@now), 14),  (Number(addDays(Date(@now), 14))-Number([$TaskStart])+ 86400000) / (Number(addDays(Date(@now), 14))-Number(addDays(Date(@now), -7))+ 86400000) * 100  ,  (Number([$TaskDue])-Number([$TaskStart])+ 86400000) / (Number(addDays(Date(@now), 14))-Number(addDays(Date(@now), -7))+ 86400000) * 100 ) + '%'"
                },
                "attributes": {
                  "title": "=[$Title] + ' - ' + toLocaleDateString([$TaskStart]) + ' - ' + toLocaleDateString([$TaskDue])",
                  "class": "=if([$Progress] >= 1, 'ms-borderColor-sharedGreen20 ms-bgColor-sharedYellowGreen10', if([$TaskDue] > [$ProjectDue], 'ms-borderColor-sharedRed20 ms-bgColor-sharedRed10', if([$TaskStart] > @now, 'ms-borderColor-gray100 ms-bgColor-gray40', if([$TaskDue]< @now, 'ms-borderColor-sharedRed20 ms-bgColor-sharedRed10', 'ms-borderColor-sharedCyanBlue20 ms-bgColor-sharedCyanBlue10'))))"
                }
              },
              {
                "elmType": "span",
                "attributes": {
                  "title": "=toLocaleDateString(@now)",
                  "class": "ms-borderColor-gray80"
                },
                "style": {
                  "position": "relative",
                  "display": "=if([$ProjectDue] < @now , 'none', 'block')",
                  "top": "-2.6em",
                  "z-index": "100",
                  "border-left-width": "5px",
                  "border-left-style": "solid",
                  "height": "3em",
                  "width": "1em",
                  "left": "=(Number(@now)-Number(addDays(Date(@now), -7))) / (Number(addDays(Date(@now), 14))-Number(addDays(Date(@now), -7))) * 100 + '%'"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}