Aug 06 2018 01:33 AM
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
Aug 06 2018 07:18 AM
SolutionUntil 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)
Aug 06 2018 11:22 PM
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
Aug 07 2018 02:56 AM
Ideally the web part should come from MS, but I looked at this some weeks ago and building a SPFx web part seems feasible.
Sep 11 2018 12:15 PM
Oct 08 2018 06:40 AM
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.
Dec 13 2018 01:23 PM
Did you ever find a way to show the timeline on a modern page?
Dec 14 2018 07:43 AM
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
Apr 12 2019 04:04 PM
We could really use this! Would love to see the modernized task web part. Is it on the roadmap?
Aug 19 2019 11:15 AM
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:
#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
Sep 10 2019 10:49 AM
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.
Aug 06 2018 07:18 AM
SolutionUntil 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)