Skip to main content

Steps

The Sprocket Steps web part is used to visually display content as a sequence of steps. This web part is frequently used to display Project Milestones but also can be used anywhere you wish to guide a series of actions or display progress.
When your page is in Edit mode, click the icon, search for "Sprocket Steps", and select the Sprocket Steps web part from the results.

Features​

  • Edit in the page as manual entries or use a task list as the data source
  • Display steps horizontally or vertically
  • Add a subtitle to display date or information
  • Use Status and Due Date to display progress and overdue steps as red
  • A link can be added to the step
  • The style can reflect your site theme

Configurations​

After you select the Sprocket Steps web part, click the Configure Web Part button or icon on the menu on the left of the web part to open the Configuration section on the right. In this section, you can perform the following configurations:

  1. On page 1, configure the following in Display Options section:

    FieldDescription
    Show TitleClick to enable title display of the web part.
    Show in PanelClick to enable display of items in panel.
    Show Sample DataEnable to display the sample data.
    TypeClick the drop-down list and select the type as Dots or Chevron.
    LayoutClick the drop-down list and select the layout as Horizontal or Vertical.
    Wrap ItemsEnable to wrap the items when you have selected Horizontal layout.
    Show Filter BarClick to enable Filter bar where you can search for teams.

  2. Click Next to navigate to page 2. On this page, configure the following in Steps section.

tip

Fields marked with red asterisks (*) are mandatory.

In the Item Data Source field, click the drop-down and select the data source as List or Manual.

If you have selected Manual, perform the following:
a. Click Add Milestone button.
b. Populate the form as tabulated: 

  | **Field** | **Description** |
  | ----------- | ----------- |
  | Title | Enter the title for the milestone/step. |
  | subtitle | Enter a subtitle for the milestone/step. |
  | URL | Enter a URL which is associated to the step. Select the check box if you want to open the URL on a new browser tab. |
  | Status | Click the drop-down list and select a status. Available options are **Not Started**, **In Progress**, **Completed**. |
  | Due Date | Click the calendar icon and pick a due date. _**Note**: The milestone will turn red after the selected date._ |  

c. You can click **Add Milestone** button to add further steps/milestones.

If you have selected List in the Item Data Source field, perform the following:
a. Populate the form as tabulated:

  | **Field** | **Description** |
  | ----------- | ----------- |
  | Site URL | Click the drop-down list and select a source site. |
  | Web URL | Click the drop-down list and select a source web. |
  | List Title | Click the drop-down list and select a source list. |
  | Open list in new tab | Enable to open the list on a new tab, when you click **Go to List** link. If this option is disabled, the list will open on the same page. |
  | Link Types | Click the drop-down list and select an option. |
  | Order By | Click the drop-down list and select a field value based on which you want to order the documents. |
  | Show items in ascending order/Show items in descending order | Select from one of the options to order the list based on ascending or descending order of the field value selected in **Order By** field. |

Using Filters​

Filters enable you to control the document listing. Sprocket offers you the following filter options:

1. **Use Query Strings**  
    To use the query string, add `[PageQueryString:Parameter]` to the **'Value'** text box of each filter. To use the property bag, add `[PropertyBagKey:Key]` to the value box of each other. You can also use the current URL with `[CurrentPageUrl]`.  
2. **Use Expressions**  
    To use expressions, click **Add Filter** button and in the pop-up, select values for Field, Operator, and Values. You can use And/Or conditions to define multiple expressions.
  1. Once all the required updates and configurations are performed, click Republish button to publish the page.

FAQs​

1. Do I need to add the steps if I already have a task list?
You do not need to recreate the information manually if you have items and dates in a task list. In the web part settings change the Item Data Source to List, link to the relevant list and apply formatting including sorting and filtering if required. Any updates made to the list items will be reflected in the web part.

2. Can I change the order and update the steps?
Where steps are added manually open page 2 of the web part settings and use the up/down arrows to change the order. You can edit the fields and update the Status to change the icon displayed for the step.