Add a “project health” stoplight status indicator to your classic sites

Note: Demo/Screenshots from a SharePoint 2016 environment.

With a little bit of work, you can have a stoplight status indicator on your project’s or team’s home page. You’ll need:

  1. A classic view site (Project or SharePoint) on which you’ll be placing the project health status indicator
  2. A CSS file in your site assets
  3. A list named “Project Health” to manage the statuses
  4. A web part for “Project Health” placed where you want it to display indicators

Note: If you have O365 or SharePoint 2019’s modern experience, explore conditional formatting with JSON instead.

Add the CSS file to your site assets

Save the first script below as stoplight.css and add to your site assets folder. You’ll need the second OR third snippet in the next section (depending on if you want to use dots or images/icons).

Create the Project Health list

Create a new list on your site and name it Project Health. You’ll need these columns:

All of the choice columns (KPI in name) will be dropdowns with these options:

  • 1 – Green
  • 2 – Yellow
  • 3 – Orange
  • 4 – Red

The other four columns (no KPI in name) are calculated columns with the following formula. Just change the “Cost KPI” to the correct column name for each (i.e. Time’s formula will be …(LEFT([Time KPI],1)…). All of the non-KPI calculated columns are number type.

You can copy and paste this from the GitHub embedded snippets in the first section.

Note: If you want to use images/icons, see bottom of post.

Modify your main list view so you ONLY see the KPI columns (displaying color names). Don’t forget to uncheck the “Title” column. We’re about to hide it from the new item form and won’t be using it.

Then, in your list settings –> Advanced settings, change “Allow management of content types” to “Yes” and click OK.

Then select your item content type.

Select “Title” and change it to hidden and OK.

Click to enlarge

Finally, so we have some “lights” to work with, go to your new list and add a “new item” with whatever initial statuses you wish.

Click to enlarge

Add a web part where you want the indicators

On your home page or dashboard, add a “Content Editor” web part and reference the stoplight.css script.

  1. Edit page
  2. Insert –> web part –> media and content –> content editor –> Add
  3. Edit web part
  4. Paste URL to stoplight.css (saved in your site assets earlier)
  5. Set chrome type to None and Apply

Insert an app part for Project Health.

Click to enlarge

“Save and keep editing” – our next step will navigate away from this page and you will lose changes unless you save now.

Edit the new “Project Health” web part you added

Edit the current view

Uncheck all of the KPI columns and check the other four (without KPI in the name). Arrange them as you wish, and add “Edit (link to edit item)” as first position. Click OK.

Edit page again, and edit the web part again. Set “Toolbar type” to No Toolbar

Set “Title” to whatever you want displayed above the stoplights on the dash/page, set dimensions to 100×300 pixels and set “Chrome type” to “Title only.”

Under “Miscellaneous” check the box for “Server Render.” Then click OK and save/publish the page. Once the page refreshes after save, you should see your stoplights.

Going forward, your users will simply click the “edit icon” next to the row of stoplights to update the status indicators.

Use images/icons instead of dots

If you’d prefer to use images/icons, you can alter the other calculated column formula included above to include an image URL in place of a dot as seen in the example below.

Copy and paste this script from the GitHub gists at the top of this post.

Replace SharePoint attachment paperclip icons with actual hyperlinked attachment names in list views

You can attach documents to SharePoint list items. However if you add the “Attachments” column to your list views, you get a column that only shows a paperclip icon (see below) if there are any attachments. Clicking that paperclip also won’t open any attachment or the list item to view them. It’s strictly an image.

attachment paperclip

Here’s how you can replace that paperclip on each row with the actual name(s) of your attachment(s) linked to the actual attachment(s).

Continue reading “Replace SharePoint attachment paperclip icons with actual hyperlinked attachment names in list views”

How to create a SharePoint modal pop-up message on page load

2018-05-15_07-55-34

This solution involves two files:

  • The aspx page that holds the content of the pop-up
  • The script that loads the aspx page in a modal dialog upon page load
  1. Save this .aspx page to your “Site Pages” directory.
    -OR-
    Copy and paste the following into a new .aspx page in your Site Pages or Pages (Settings wheel –> Site Contents –> Site Pages or Pages) directory:

    Wrap this block in style tags:
    [code]
    h1 {
    color: #ed7522;
    text-align: center;
    }
    h2 {
    color: #ed7522;
    text-align: center;
    }
    p {
    color: #1f2844;
    font-size: 1em;
    }
    input {
    font-family: “Segoe UI”;
    font-size: 1em;
    }
    [/code]
    Paste directly beneath (no additional tags):
    [code]

    [/code]

  2. Modify the content in the aspx page beneath the modal-content div and above the input tag to include your own images, formatting and message text.
  3. Save this javascript file to your Site Assets (Settings wheel –> Site Contents –> Site Assets) or scripts folder
    -OR-
    Copy and paste the following into a new javascript file in your Site Assets:

    Note: Wrap the following in script tags:
    [code] _spBodyOnLoadFunctionNames.push(‘showPopup’);
    function showPopup() {
    var options = {
    title: “Notice“,
    url: “https://sharepointlibrarian.sharepoint.com/SitePages/HomePopUp.aspx” };
    SP.UI.ModalDialog.showModalDialog(options);
    }
    [/code]
  4. Update the script to include the URL of your newly saved aspx page and a title for the pop-up window (optional).
  5. Add a content editor web part to the page on which you’d like the pop-up.
    1. Edit page
      editpage
    2. Add web part
      insert web part
    3. Edit web part
      editwebpart
    4. Paste URL to the javascript file in your Site Assets and click “OK”
      content editor pop up
    5. Save page/stop editing
      stopediting

That’s it! Your pop-up should now function upon page load. When/if you wish to “turn off” the pop-up without deleting the files (so you can reuse later easily) just add “//” before line 7 in the javascript file and save to “comment out” the function. This prevents the pop-up from loading. When you’re ready to use the pop-up again just remove the two slashes and save.
comment out

I recommend using SharePoint Designer to easily access and modify the ASPX page and/or javascript file.

A better way to display “today’s events” from multiple calendars in SharePoint on your intranet home page

today at LMH

Below on the left are two traditional, out-of-the-box solutions for showing Today’s events in SharePoint. Notice how both take up a lot of extra space repeating today’s date (which we don’t need to see at all in a web part called “Today’s Events”) or showing gray space where there are no events. Soak that in – prime real estate on your home page goes to non-existent events. These also may require overlays and other manual labor processes that need adjusted every time a calendar is added or removed.

But on the right is what you could have. It uses search instead and displays events from all calendars a user has access to in one place. It shows only the necessary information on the home page and links to full details. And with a little CSS included in this post, it can look polished and themed. Imagine all you could do with that saved space on your home page…

Also seen above: Adding local weather to your SharePoint intranet home page
and a “this week’s menu” button for your intranet

Continue reading “A better way to display “today’s events” from multiple calendars in SharePoint on your intranet home page”

Adding local weather to your SharePoint intranet home page

Update 5/9/2019: AccuWeather has discontinued their widget. Watch
https://www.accuweather.com/en/free-weather-widgets for updates.

weatherI jokingly said at a recent presentation that I thought adding weather to our intranet’s home page was a good idea for employees like me who work in the basement and don’t see much of “the outside.” But it can also help with planning and decisions depending on your industry and daily routines.

Accuweather has a free script for a widget you can use that resizes perfectly on different screen sizes. I’m impressed with its simplicity and how dynamic it is.

All you need is a script editor where you’re placing the weather on your page and the following script from Accuweather.com. This script will work as-is from a straight copy and paste, but you should generate your own code from their website to paste after the closing style tag so that when clicked, users will be taken to more info specific to their location instead of mine. You can start from scratch on their site, just be sure to add the “style” tag and content below before the script they generate for you. This will get rid of a rather pesky button they include.

Upgrade your image slider on SharePoint

Your image slider is okay. But you’d like it better if it had a makeover (50 points to whoever can guess the commercial reference).

This post will show you how you can take your out-of-the-box content search web part slideshow from this:

2018-03-24_17-10-39

to this:

2018-03-24_17-26-46

This solution supports multi-line descriptions that don’t get cut off. It gets rid of that dreadful partially transparent overlay and gives you more of your photo uninhibited by messy design. It’s more modern, lighter and sure to impress. At the end, be sure to adjust the CSS to match your own color scheme and size needs.

Continue reading “Upgrade your image slider on SharePoint”

Show more or all views in a classic view SharePoint list

ViewCount

By default, you’ll see 3 views in a SharePoint list. Using simple javascript, we can make sure our users see that fourth or fifth view as well, reducing the number of clicks it takes for them to get to the data they need.

Continue reading “Show more or all views in a classic view SharePoint list”

Change SharePoint “Save” button to “Submit” in new item forms

SaveToSubmit.PNG

“Save” isn’t as familiar/intuitive to non-SharePoint users as language such as “Submit” can be. Change “Save” to “Submit” by adding a script editor or content editor web part (CEWP) to the newform.aspx page for your list.

Continue reading “Change SharePoint “Save” button to “Submit” in new item forms”

Keep custom headers, footers, CSS, etc. from loading in SharePoint modal dialogs

modalfooter

When writing your own custom headers and footers, you probably don’t want/need that script showing in modal dialog windows too. It can look sloppy or accidental and may wrap oddly, as seen in my example above.

Luckily, it’s an easy fix.

Continue reading “Keep custom headers, footers, CSS, etc. from loading in SharePoint modal dialogs”

Adjust SharePoint list column widths in classic view

columnexpand

This is a popular request that I’ve recently modified, thanks to the recommendation of a colleague, to be responsive to different device or browser sizes. By default, SharePoint lists respond to their viewer’s size but once customized with a fixed pixel width will lose that feature. This solution utilizes percentages so you can create column widths ideal for any screen.

Continue reading “Adjust SharePoint list column widths in classic view”