- Create a custom list with the following columns
|Column Name||Filed Type|
|Title||Single line of text|
The values are
- Add some items to the newly created list with different Status values
- Upload the Task_Status_Indicator.js file under Site Settings –> Web Designer Galleries –> Master pages and page layouts and update the following properties
- Publish file as major Version
- Upload your own images for indicators with the following names
Note: I have uploaded my images in the Site Assets library. If you wish to change the image names or location where it is uploaded, change the img tag references inand upload again.
Note: In my case it will be ~site/_catalogs/masterpage/
- Click OK/Apply to see the changes as shown below
Change the logic in JS file as per your requirement and design.
Pagination is also implemented in this approach.