- \n
- Custom indicator images for as many levels as you require.<\/li>\n
- Text to HTML JavaScript<\/li>\n
- A custom list<\/li>\n
- A choice type column in the list<\/li>\n
- A calculated column in the list<\/li>\n
- A web part containing the Text to HTML script<\/li>\n<\/ul>\n
Step 1 \u2013 Get the Images<\/h3>\n
Instructions:<\/b><\/p>\n
Go to Icon Finder (https:\/\/www.iconfinder.com\/<\/a>) and do a search for the kind of icons you want. In this case we\u2019ll search for \u201csquare icon\u201d and choose a glossy orange square at 24×24 pixels and download it to our PC. Then we\u2019ll look for yellow and red in the same theme set and download those as well. The images tend to come with weird filenames so we\u2019ll rename them to something more user friendly such as: \u201cicon-yellow.png\u201d, \u201cicon-orange.png\u201d and \u201cicon-red.png\u201d.<\/p>\n
![\"yellow-24\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/yellow-24.png\")
![\"orange-24\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/orange-24.png\")
![\"red-24\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/red-24.png\")
<\/div>\nNOTE: <\/b>It is important to find images that are in the Portable Network Graphic (PNG) format because they have transparent backgrounds and will look good in any theme.<\/p>\n
Step 2 \u2013 Upload the Images to SharePoint<\/h3>\n
Next we\u2019ll need to upload the images into SharePoint. SharePoint 2013 sites come with a built in library called \u201cSite Assets\u201d and it is highly recommended to store the images in this location.<\/p>\n
Instructions:<\/b><\/p>\n
Click on the Site Contents link and the click on the Site Assets library.
\nClick on new document and upload each image from your PC.<\/p>\n![\"add-images\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/add-images.png\")
<\/a><\/p>\nStep 3 \u2013 Create the Text to HTML Script<\/h3>\n
The following script is available from Christophe Humbert<\/strong> (Blog Path to SharePoint: http:\/\/blog.pathtosharepoint.com\/<\/a>). This has been tested and confirmed to work with SharePoint 2013.<\/p>\n
Instructions:<\/b>
\nTake the following code and paste it into a new text file (using Notepad or another text editor) and save it as \u201cTexttoHTMLSP013.txt\u201d.<\/p>\n<script type=\"text\/javascript\"><\/b>\r\n \/\/ Copyright (c) 2010 Christophe Humbert - Path to SharePoint<\/b>\r\n \/\/ Find all Web Parts in the page<\/b>\r\n var listWP=[],calWP=[],divs=document.getElementById(\"DeltaPlaceHolderMain\").getElementsByTagName(\"div\");<\/b>\r\n var count=divs.length;<\/b>\r\n for (i=0;i<count;i++) {<\/b>\r\n try {<\/b>\r\n if (divs[i].id.indexOf(\"WebPartWPQ\")==0){<\/b>\r\n if (divs[i].innerHTML.indexOf(\"ViewDefault_CalendarView\")>=0) {<\/b>\r\n \/\/ Calendars<\/b>\r\n calWP.push(divs[i].id);<\/b>\r\n }<\/b>\r\n else {<\/b>\r\n \/\/ Other Web Parts<\/b>\r\n listWP.push(divs[i].id);<\/b>\r\n }<\/b>\r\n }<\/b>\r\n }<\/b>\r\n catch(e){}<\/b>\r\n }<\/b>\r\n function TextToHTML(NodeSet, HTMLregexp) {<\/b>\r\n var CellContent = \"\";<\/b>\r\n var i=0;<\/b>\r\n while (i < NodeSet.length){<\/b>\r\n try {<\/b>\r\n CellContent = NodeSet[i].innerText || NodeSet[i].textContent;<\/b>\r\n if (HTMLregexp.test(CellContent)) {NodeSet[i].innerHTML = CellContent;}<\/b>\r\n }<\/b>\r\n catch(err){}<\/b>\r\n i=i+1;<\/b>\r\n }<\/b>\r\n }<\/b>\r\n var regexpA = new RegExp(\"\\s*<([a-zA-Z]*)(.|\\s)*\/\\1?>\\s*$\");<\/b>\r\n var regexpTD = new RegExp(\"^\\s*<([a-zA-Z]*)(.|\\s)*\/\\1?>\\s*$\");<\/b>\r\n var WP = new Object;<\/b>\r\n function UpdateWP() {<\/b>\r\n if (calWP.length>0){<\/b>\r\n for (i=0;i<calWP.length;i++) {<\/b>\r\n WP=document.getElementById(calWP[i]);<\/b>\r\n if (WP.innerHTML.indexOf(\"<\")>=0) {TextToHTML(WP.getElementsByTagName(\"a\"),regexpA);}<\/b>\r\n }<\/b>\r\n }<\/b>\r\n if (listWP.length>0){<\/b>\r\n for (i=0;i<listWP.length;i++) {<\/b>\r\n WP=document.getElementById(listWP[i]);<\/b>\r\n if (WP.innerHTML.indexOf(\"<\")>=0) {TextToHTML(WP.getElementsByTagName(\"td\"),regexpTD);}<\/b>\r\n }<\/b>\r\n }<\/b>\r\n \/\/ Check every 200 ms, forever<\/b>\r\n setTimeout(\"UpdateWP()\",200);<\/b>\r\n }<\/b>\r\n UpdateWP();<\/b>\r\n <\/script><\/b><\/pre>\nStep 4 \u2013 Upload the Text to HTML Script<\/h3>\n
Now let\u2019s upload the TexttoHTMLSP013.txt file to the Site Assets library just we did with the images in Step 2.<\/p>\n
![\"add-script\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/add-script.png\")
<\/a><\/p>\nStep 5 \u2013 Create a new Custom List<\/h3>\n
Next we need to create a custom list (via the Add an app feature in SharePoint 2013) that will have our custom images used in.<\/p>\n
Instructions:
\n<\/b>Click on the settings \u201cCog\u201d and then select \u201cAdd an app\u201d.<\/p>\n![\"add-an-app\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/add-an-app.png\")
<\/a><\/p>\nNext, let\u2019s select the Custom List type and then name it \u201cVisualWork\u201d (of course in practice you can name it whatever you want).<\/p>\n
![\"create-custom-list\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/create-custom-list.png\")
<\/a><\/p>\nNOTE:<\/b> If you create a name with white space in it (e.g.: Visual Work), the URL will end up with extra characters in it (e.g.: \u2026\/Visual%20Work.aspx). This is due to the fact that web addresses cannot contain whitespace so the white spaces are rendered with a \u201c%20\u201d instead of a blank space. Furthermore once a URL has been created in SharePoint is it permanent. The title and description can be modified after creation by the URL cannot. So if you create a list with white space in the name it cannot be undone.<\/p>\n
Step 6 \u2013 Create a new Choice type Column in the List<\/h3>\n
Next we need to create a choice column which we will use to calculate against. In this case we\u2019ll create a new choice column called \u201cPriority\u201d and then give it three choices: Low, Medium and High.<\/p>\n
Instructions:
\n<\/b>Click on the ribbon and then List>List Settings><\/p>\n![\"list-settings\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/list-settings.png\")
<\/a><\/p>\nCreate Column<\/b><\/p>\n
![\"create-column\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/create-column.png\")
<\/a>
\nColumn Name: Priority <\/b>
\nColumn Type: Choice<\/b>
\nType each choice on a separate line:
\nLow<\/b>
\nMedium<\/b>
\nHigh<\/b><\/p>\nThen click OK<\/b>.<\/p>\n
![\"create-priority\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/create-priority.png\")
<\/a><\/p>\n<\/p>\n
Step 7 \u2013 Create a new Calculated type Column in the List<\/h3>\n
Now we need to create a calculated column which we will use to show the images based on what is selected in the choice column.
\nIn this case we\u2019ll create a new calculated column called \u201cIndicator\u201d and then give it three possible calculations. The calculation will be if Priority is equal to Low then show a yellow image, if Priority is equal to Medium then show an orange image and finally, if Priority is equal to High then show a red image.<\/p>\nInstructions:
\n<\/b>Click on the ribbon and then List<\/b>>List Settings<\/b>>Create Column<\/b>>
\nColumn Name: Indicator<\/b>
\nColumn Type: Calculated<\/b>
\nFormula:<\/p>\n=IF(Priority=”Low”,”<DIV><img src=https:\/\/<your url>\/sites\/SiteName\/SiteAssets\/icon-yellow.png title= Priority.is.LOW><\/DIV>”,IF(Priority=”Medium”,”<DIV><img src= https:\/\/<your url>\/sites\/SiteName\/SiteAssets\/icon-orange.png title=Priority.is.MEDIUM><\/DIV>”,IF(Priority=”High”,”<DIV><img src= https:\/\/<your url>\/sites\/SiteName\/SiteAssets\/icon-red.png title=Priority.is.HIGH><\/DIV>”)))<\/p>\n
![\"create-indicator\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/create-indicator.png\")
<\/a><\/p>\nStep 8 \u2013 Add new item to the list<\/h3>\n
Now we need to create an item in the list.<\/p>\n
Instructions:<\/b>
\nClick on the new item link
\nTitle: Work Item 01<\/b>
\nPriority: Low<\/b>
\nThen click Save<\/b>.<\/p>\n![\"add-item\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/add-item.png\")
<\/a><\/p>\nIf all went well you should now see item 1 in the list and it will show the code for the low image in the indicator column.<\/p>\n
![\"item-view-code\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/item-view-code1.png\")
<\/a><\/p>\nStep 9 \u2013 Add the Text to HTML script and move it under the list<\/h3>\n
Now we need to add the Text to HTML script to tell SharePoint to render the image instead of the code. We\u2019ll do this by first getting the URL (address) to the script and then adding it into a new Content Editor on the page.<\/p>\n
Instructions:<\/b>
\nGo into the Site Assets library, right hand mouse click on the script and select \u201cCopy shortcut<\/b>\u201d.<\/p>\n![\"copy-shortcut\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/copy-shortcut.png\")
<\/a><\/p>\nNext click on the Visual Work list and then on the settings \u201cCog\u201d and then Edit Page<\/b><\/p>\n
![\"edit-page\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/edit-page.png\")
<\/a><\/p>\nThen click on the ribbon and select Insert <\/b>and then Web Part<\/b><\/p>\n
![\"add-web-part\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/add-web-part.png\")
<\/a><\/p>\nThen go to the Media and Content section and select the Content Editor option and click Add<\/b>.<\/p>\n
![\"add-content-editor\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/add-content-editor-300x79.png\")
<\/a>
\nThe web part should now be added to the page just above the list. Next click on the upside down triangle and then click on the \u201cEdit Web Part<\/b>\u201d link.<\/p>\n![\"edit-web-part\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/edit-web-part-181x300.png\")
<\/a><\/p>\nAfter you click on the link the window should reload and show the editor for the Content Editor. In the content link section paste the shortcut <\/b>that you copied from the Site Assets library and then click OK.<\/p>\n
![\"add-link-to-content-editor\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/add-link-to-content-editor-294x300.png\")
<\/a><\/p>\nFinally, in order to make the image render you will need to drag the Content Editor underneath <\/b>the Visual Work list.<\/p>\n
![\"move-content-editor-below\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/move-content-editor-below1.png\")
<\/a><\/p>\nNext you need to click on \u201cStop Editing<\/b>\u201d<\/p>\n
![\"stop-editing\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/stop-editing.png\")
<\/a><\/p>\nNow you should have the image rendering properly as below.<\/p>\n
![\"image-rendered\"](\"https:\/\/themercers.ca\/OrderOutOfChaos\/images\/image-rendered-300x172.png\")
<\/a><\/p>\n