Process and Timeline web part helps you show a sequence of steps for: onboarding, company timeline, project progress and more.
The web part looks best when added into the full-width section in SharePoint Online and is fully compatible with the mobile app.
Look for this icon to find this app in SharePoint Online:
An example of how the app is used to show the onboarding steps:
Setting up the web part
On the site where you need to show the web part, create a new SharePoint list with the title [Process Steps] and following fields:
- Title [default/ no need to create]
- Details [single line of text]
- Icon [signle line of text]
- URL [Hyperlink or Picture]
- DisplayOrder [Number]
- Color [signle line of text]
NOTE: If you need to show more than one timeline web part, you can create as many lists as needed. Simply give each list a name you like and connect the web part to the right list using web part properties.
Adding/Updating sequence content
To create a new sequence step, add a new item in the list you created earlier by providing:
- Title - this will be displayed in bold
- Details - this will be shown below the title
- Icon FontAwesome icon of your choice, pick one here
- URL - optional hyperlink if you want to make each step clickable
- DisplayOrder - order in which you want steps to appear
- Color - HEX color for each step. This can be set to a default value and hidden.
Here is how our Onboarding Process list looks like:
Updating sequence colors and style
You can change the color used by each of the sequence steps. Simply enter the color HEX in the [Color] field for the item.
You can also hardcode a default color when setting up the list so that less advanced users don’t have to fiddle around with the HEX when adding or updating the sequence.