The Sproket 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 “Sproket Steps”, and select the Sproket Steps web part from the results.
- 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
After you select the Sproket 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:
On page 1, configure the following in Display Options section:
Field Description Show Title Click to enable title display of the web part. Show in Panel Click to enable display of items in panel. Show Sample Data Enable to display the sample data. Type Click the drop-down list and select the type as Dots or Chevron. Layout Click the drop-down list and select the layout as Horizontal or Vertical. Wrap Items Enable to wrap the items when you have selected Horizontal layout. Show Filter Bar Click to enable Filter bar where you can search for teams.
- Click Next to navigate to page 2. On this page, configure the following in Steps section.
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.
Filters enable you to control the document listing. Sproket offers you the following filter options:
- 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
- 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.
- Use Query Strings
- Once all the required updates and configurations are performed, click Republish button to publish the page.
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.
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.