SOLVED

SharePoint Modern (task/project) Timeline

Contributor

Hi,

As we are moving to modern pages, I'm looking for a solution to embed the SP Task timeline (included in the site feature Project Functionality) to a modern page.

What would be the best way to achieve this?

Build a webpart from scratch and only parse the data or port/embed the classic webpart to modern spfx?

Has anyone did this before?

 

Cheers

Bernd

 

 

10 Replies
best response confirmed by Bernd Verhofstadt (Contributor)
Solution

Until Microsoft releases a modern UI for Tasks Lists and accordingly to some Project Online features, the only way to go is create a custom SPFx WebPart (or just check if someone has already created that WebPart)

Thanks, couldn't found a spfx webpart on GitHub :) Once I have a first version of the webpart done, I'll check to make it open source.

 

Cheers

Bernd

Ideally the web part should come from MS, but I looked at this some weeks ago and building a SPFx web part seems feasible.

The information you need seems to be stored in a property of the root site folder as a block of XML.
Unfortunately I had no time to try it...
 
I found some blog posts detailing this, hope they can be of some help:
Let us know when you get a first version done, I'd love to take a look!

Hey,

I used the embedding code that I used to embed a team calendar into my modern web page for my task web part and it worked!  So now I actually see the timeline on top of the task list on my modern page!  Pretty cool.  Here is the info I used:

 

In Modern View on a SharePoint site you can no longer simply insert a site calendar onto the site; it is Group calendars you can easily add.  If you need to add a site calendar to a site without creating a Group:

 

 

Adding an embed webpart to your modern page with this iframe code:

 

<iframe width="100%" height="1000px" src="https://xxx.sharepoint.com/sites/xxx/Lists/Calendar/calendar.aspx" scrolling="no" style="margin-left: -200px; margin-top: -190px;">

</iframe>

 

From <https://techcommunity.microsoft.com/t5/SharePoint/calendar-web-part-on-modern-pages/td-p/161291>

 

This will put the calendar into a section on the new modern page.  Because the name of the calendar does not appear, you can add a TEXT web part on top of the calendar to call out the calendar name.

Did you ever find a way to show the timeline on a modern page?

Hi Stephan, 

Unfortunately I'm not able to share the complete webpart.

To visualize the data I used the google charts :)

https://github.com/rakannimer/react-google-charts

As it does not show the milestones in a proper way and the grouping was not as dynamic as we wanted, we decided to only show the milestones with a custom UI (only css).

In case you need a very simple way of showing tasks you could use the google charts.

 

Cheers

Bernd

 

We could really use this! Would love to see the modernized task web part. Is it on the roadmap?

Hi All,

 

The idea of using an iframe for the calendar gave me the idea of using it for a timeline. After removing all the surrounding clutter and changing the style a little bit, I think it looks pretty seamless within a modern page.

 

If anyone wants to try this, here is what I did:

  • I created a new classic page that only has a timeline. This page, however, has a lot of clutter, like menus and old classic styles that need to be removed/modified.
  • So I added a Content Editor web part that references another file on my system. In this file I added a style tag with some css that removes all the clutter and changes some of the classic styles. It's better to do it this way than inside a Script Editor because once your css hides the menus, you won't be able to interact with the edit menus anymore. I used SharePoint Designer to edit the css outside of the browser.
  • Finally I added an Embed web part on my modern page, with an iframe tag referencing my classic page. I had to play around with the dimensions until it looked good (no clipping or excess white space).
  • Here is my css. It will probably be different for your page depending on your template. I spent quite a bit of time inside Chrome devtools to figure this out, but this should give you an idea of what you need to change.

 

	#ms-designer-ribbon,
	#s4-titlerow,
	#sideNavBox,
	#MSOZoneCell_WebPartWPQ2 > div > div > table,
	#WebPartWPQ3_ChromeTitle,
	#MSOZoneCell_WebPartWPQ3,
	.welcome-content {
		display: none !important;
	}
	#MSOZoneCell_WebPartWPQ2 {
		padding: 10px;
	}
	#s4-ribbonrow {
		height: 35px;
	}
	#contentBox {
		margin-left: 0;
	}
	#contentRow {
		padding: 0;
	}
	div.welcome {
		padding: 0;
	}
	.ms-webpart-titleText {
		font-size: 24px;
	}
	.ms-WPBorder {
		border-style: none;
	}
	.ms-webpart-chrome-title {
		border-style: none;
	}
	.ms-webpart-chrome-title span {
		color: rgb(51, 51, 51);
		font-weight: 100;
	}

​

 

Overall I think this is a decent approach. It leverages all the work that was put into the classic timeline, and the ugly hacks stay in the classic page. And when/if Microsoft comes out with a new timeline webpart, it is easily replaced.

 

Albert

Bernd Verhofstadt@Juan Carlos González Martín Based on today's SharePoint Developer Community call, Microsoft is not going to give a Modern task list ... they're headed in the Planner/Teams/To Do direction.