Process and Timeline web part helps you show a sequence of steps for: onboarding, company timeline, project progress and more.
An example of how the app is used to show the onboarding steps:
Setting up the web part
The web part looks best when added into the full-width section in SharePoint but can live in any section.
On the page where you’d like to see the apps, look for this web part:
Adding/Updating content
To update the steps showing in the web part, simply go to web part properties and click the Add/Remove Steps button:
In here you can add new steps or update existing steps, their icon, link (if needed) and even color of each step.
Here is how our Onboarding Process list looks like:
Ability to pick an icon or upload a custom icon is available in Process & Timeline version Mar 19, 2025
Here is where you can get short codes for more icons: Search Icons & Find the Perfect Design | Font Awesome
Updating colors
You can change the color used by each of the sequence steps. Simply enter the color HEX in the [Color] field for the item.
If you’d like to change the color of the text for each step (default is black), fill in the desired text color in web part properties:
Change size
If you’d like to resize the web part to fit into a smaller section and not wrap the timeline graphic to the next line, you can use the Size web part property to scale the whole graphic like this:
Targeting: Show Steps to Specific Microsoft 365 Groups
Available in Process and Timeline – Version April 23, 2025
You can now display specific steps only to members of selected Microsoft 365 Groups. This allows for more personalized and secure content visibility on your SharePoint pages.
Before You Begin
Please ask your Microsoft 365 administrator to confirm that the proper permissions have been granted.
They can follow this guide:
Grant Origami web parts ability to target content to specific M365 groups
How to Create Microsoft 365 Groups
- M365 Groups can be created manually via the Microsoft 365 Admin Center.
- If you’ve created a Team Site, SharePoint automatically generates M365 Groups for Site Members and Site Owners.
Example:
If you’ve created a Team Site called “HR Site”, you’ll see a group named “HR Site Members”. This group is automatically generated and can be used for link targeting..
Targeting Steps to a Specific Group
-
Add or edit a Step using Process and Timeline.
-
In the targeting section, search for the M365 Group name (e.g., HR Site Members).
-
Select the group from the list.
Done!
Once you save the page, your selected steps will only be visible to people in the specified group(s).
Want to Remove Targeting?
Simply clear the group name(s) from the text box. This will make the tab visible to everyone.
Track who 'Completed' which steps
Available in Process and Timeline – Version April 24, 2025
You can now configure the Process and Timeline web part to let users tick off steps as they complete them:
How to Enable Progress Tracking
- Go to the web part properties.
- Toggle on the Enable Progress Tracking option:
Once enabled, users will be able to mark individual steps as completed directly within the web part.
Viewing Completion Data
All completion activity is logged in the ProcessTimelineTracker list. To get more insight, you can unhide the following fields in that list:
- Title – Displays the name of the completed step.
- PageURL – Indicates the URL of the page where the step was marked complete (useful if you’re using this web part across multiple pages).
- CompletedOn – The date and time the step was marked as completed.
- CreatedBy – The user who marked the step as complete.
Exporting for Reporting
To analyze progress across users or timelines, simply export the ProcessTimelineTracker list to Excel for easier filtering, sorting, and reporting.
Known Limitations
Currently, only one instance of the web part with tracking enabled is supported per page.
You can still add multiple Process and Timeline web parts to the same page, but progress tracking must be enabled on only one of them.