Process and Timeline (with targeting)

Archive Manuals
1

Process and Timeline web part helps you show a sequence of steps for: onboarding, company timeline, project progress and more.

NOTE: If you don’t require targeting for each of the steps, consider using the simplified version of the web part here: Process and Timeline (without targeting)

image
image1421×274 24.6 KB

Setting up the web part

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:
image

Here is how you prepare the List from which the web part is retrieving data from.
On the site where you need to show the web part, create a new SharePoint list with the title [Process Steps] and following fields:

  1. Title [default/ no need to create]
  2. Details [single line of text]
  3. Icon [signle line of text]
  4. URL [Hyperlink or Picture]
  5. DisplayOrder [Number]
  6. 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.
image

Adding/Updating sequence content

To create a new sequence step, add a new item in the list you created earlier by providing:

  1. Title - this will be displayed in bold
  2. Details - this will be shown below the title
  3. Icon FontAwesome icon of your choice, pick one here
  4. URL - optional hyperlink if you want to make each step clickable
  5. DisplayOrder - order in which you want steps to appear
  6. 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:

image
image935×278 9.29 KB

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.