You want your surveys to be easy to complete because chances are they’re optional in the first place. If you’re using a likert rating question type, the look of the entire survey can get out of hand pretty quickly.
Just by adding alternating row shading and giving the options some more room to breathe, we zap the anxiety right out of the question and give the question a more polished look. Just two tiny changes make a big difference.
Click “Respond to Survey” to open the newform.aspx page
Add a web part
Under Media & Content choose either Content Editor or Script Editor (your preference)
Content Editor: Create a .css file in your Site Assets named something like form-alt-row-shading.css and reference its path in the web part’s properties. For the file’s content, copy and paste the script below.
Script Editor: Click “Edit Snippet” then copy and paste the script below directly into the dialog that appears
You could modify the css file further, adjusting the question itself, the option headers, etc. by using F12 and selecting each element to find its class label, then adding it to your css file with its modified styling within the brackets. But just these two adjustments alone give you options on a single line (not breaking lines) and easy visibility with alternating row options.
It doesn’t have to cost anything to improve your user experience and make links look more like, well, links. We’re accustomed to a modern navigation experience driven not just by underlined text anymore but by visual cues. We rely on iconography and buttons to get us more quickly from A to B.
So if you can’t (or don’t want to) install an icon library like Font Awesome, and if you’re not using a web part that has the built-in Office UI Fabric icons (such as the Quick Links web part), why not stick to the basics and use Unicode characters? While limited, you still have some great options for quick wins.
Note: These characters appear slightly different in different browsers or when used with pre-existing themes. For example, when writing this post they’re black-and-white, but when published, my styles are applied which give them color. They may also look different on a mobile device than they do on desktop.
Compart has a great listing of all the Unicode symbols you can search and filter. Here are a few examples I selected that could be useful:
☎ Directory ♻ Recycle vs Trash FAQ ♬ Fall Concert Details ☂ Inclement weather procedures ⛱ Vacation Requests ⛟ Track a Delivery ☃ Winter Sale
How to use Unicode characters on your site
To use Unicode characters, you can either:
Copy and paste the actual symbol -OR-
In your html, wrap the four-digit number in &#x and ; as follows
Here are many more icons, some of which might have purpose in your organization. You can also download this excel file for easier viewing/customizing.
In classic list views/forms and on-premise environments, your choice columns allow you let users specify their own value. But the label is literally “Specify your own value:”. This can be changed.
Note: If you’re using the modern experience, you don’t have this issue.
To change the label, add the following script to your newform.aspx page, changing the name of the field referenced (see below). You can add this script in a script editor web part as a snippet or save it as a .js file to your Site Assets and reference it in a content editor web part.
To get the actual field label, use F12 (developer tools) when viewing the form and select the checkbox. Copy everything after the ‘#’ sign or whatever the column name is, ending in ‘FillInRadio.’
Once you’ve added that script (and updated the field name with your own), save the page and you’ll see your new label:
Recently, SharePoint Online/O365 (and soon SP 2019?) released an upgrade to the page title area of modern pages. Previously, the header area of a page was restricted to a banner image and text. Then they released an update that allowed customizing the image. Then removing the image. Now we’ve leaped ahead and you can choose from four layouts:
First edit the modern page and click the “Edit” icon on the title area:
Select a layout & alignment
Image and title
Add “tag” text above the title
Show published date
Don’t forget to save your changes and publish your page when finished.
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…
I 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.
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:
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.
People jokingly (or not) sometimes tell me the only reason for which they use the intranet is the cafeteria menu. So on a recent draft of a redesigned homepage, I introduced a prominent “Menu” button that would always be linked to the most recent menu uploaded by dining services.
Previously people would click a link which took them to a document library where the current menu lived, and would open it there. 2 clicks.
I had two goals for this project.
Get it down to 1 click.
Never have to manually update the link for the button. Set it, forget it.
Note: this could easily be applied to newsletters, updates, meeting minutes, etc. Anything that is published on a regular basis that could benefit from an always-current hyperlinked button.
Did you know you can adjust the page size of your reports in Power BI? Each tab/page of your report can be a unique size specified by you down to the pixel. This comes in handy for creating “widget-like” visuals for embedding or for creating reports for print and optimal display on various screen sizes.