Requesting Your SharePoint “UI Hacks”
I am putting together a presentation talking about UI hacks that we all need to do in order to accomplish everyday UI customizations that our customers – internal or external – require. For this one I want to limit it to SharePoint 2013 and/or SharePoint Online (Office365). Another way to think of it is how and why we brand SharePoint today on premises and in the cloud; not just things that people want cosmetically, necessarily, but stuff that is hard to do and must be done.
I’d like to collect ideas from all of you out there, which I will collate into some slides (with credit given, of course!). I posted a quick tweet about this and already got a few replies, so I figured a blog post would be a good way to gather information as well.
Interested in any “UX hacks” you’ve done in SharePoint 2013 / Online to meet business needs.
— Marc D Anderson (@sympmarc) October 4, 2014
In thinking about this, I’ve come up with some broad buckets:
- Inconsistencies
- Documentation Gaps
- Document Object Model (DOM) Changes
- Missing Functionality (Oft Requested)
I’ve already got a few items of my own in each of those categories, but I’d like the presentation to be representative of what we all have to deal with, not just me. If you think I’m missing a bucket, let me know your ideas on that, too.
Let’s use this post’s comments to capture as much as possible. If you’d rather email me directly, you can use the Contact form. When I have a decent amount of content collected, I’ll come up with a way to share it on some level. (The actual purpose of this is classified.)
Thanks for your help on this.
We’ve done a custom master page and page layouts to put in the Bootstrap framework (for responsive and better mobile display) and some references to custom CSS/Javascript files. All of our source branding files live in a single site collection, so when we make a change to the branding, it is reflected in every site. I basically have one JQuery load of a “contentLoader.html” file into a placeholder in my master page that way I don’t have to keep updating the master page, only the one source file, and it triggers all of the subsequent loads. We have replaced the top menu bar (in our SharePoint sites) with our own custom mega menu to fit our information architecture (probably similarly to what Ian mentioned), we aren’t doing security trimming in it, but use attributes in the user’s profile to customize what they see. An example of this is an iconized drop down (like an iphone interface) of applications that is specific to the country where the user is located. To me, true enterprise navigation for a large intranet is the biggest gap from an end-user usability perspective. We also added an enterprise footer to the bottom of every page that is loaded from the branding site collection, this contains news and other content “required” to be on every page. Other than that, it has been little tweaks here and there, hiding things we didn’t want users to mess with, changing fonts, making search scopes automatically drop down when a search box selected.
It was a night and day difference in usability and adoption before we went to my custom branding and navigation, I swear by the customization now.
I don’t care for the design manager stuff they built into, though I admittedly haven’t taken the time to deal with it because my ‘old school’ just edit the stuff in SP designer works great for me.
I am a big fan that they just added the “corporate branding” feature in, because now I can roll back the customizations that I did to our OneDrive master pages, and rely on the the corporate branding icon (replacing the O365 icon) to link back to our intranet home page, one of the previous biggest gaps in my mind.
Thanks to all of you for the input so far. It’s really helpful stuff. Keep it coming!
M.
1. Forms. Making a New Form different from the Edit Form or Display Form. Typically that’s hiding, disabling, or auto-populating some of the fields when the initial item is created.
2. Calendars. Custom-coloring items based on content, auto-expanding items, and displaying multiple months.
3. Wikis. Auto-generating page Table of Contents with anchors based on the headers used in the wiki content.
4. Large lists. Scrolling up and down, left and right, users got lost as to what column of data they were looking at. Added hover text to list content to display the column header.
5. Other. Modifying the default “new document” or “new item” text/behavior, hiding the ribbon, using a dialog form to populate content on another site collection, displaying calculated field content before the form is saved, and tweaking hyperlinks (like making a Links list item open in a new tab, for example).
Color coding minor/major versions while displaying a list. Minor versions displaying yellow, Major versions green.
One thing that we can’t do is goup by the Content Type property. Or can we? Apparently you can, but the UI doesn’t allow you to.
The solution is to trick SharePoint with our beloved jQuery and append another option to the dropdown list:
ExecuteOrDelayUntilScriptLoaded(
function () {
InsertContentTypeOption(‘idGroupField1’);
InsertContentTypeOption(‘idGroupField2’);
}
, “bform.js”);
function InsertContentTypeOption (selectedElement) {
try {
var sel = document.getElementById(selectedElement);
if (sel) {
if (sel.selectedIndex >= 0) {
var o = document.createElement(‘option’);
o.text = ‘Content Type’;
o.value = ‘tp_ContentType’;
var prev = sel.options[sel.selectedIndex];
try {
sel.add(o, prev);
}
catch (ex) {
sel.add(o, sel.selectedIndex);
}
}
}
} catch (e) {
TGFSharePoint.Utils.ErrorToConsole(“InsertContentTypeOption: \n” + e.message);
}
}
Related Dates on Forms
For related dates I have used code like this after the page is ready to make the second date update once the first date is updated and there is no value for the second date. Sometimes the first date could be entered without the mouse leaving the input form so I also check when the mouse enters the second date input field. Could probably just use the second method, but I wanted to make the change as soon as possible to maximize the information provided to the user.
$(“input[title=’Start Date’]”).parentsUntil(“td.ms-formbody”).parent(“tr”).mouseleave(function() {
var date1= $(“input[title=’Start Date’]”).val();
var date2= $(“input[title=’End Date’]”).val();
if (date2.length < 1) {
$("input[title='End Date']").val(date1);
}
});
$("input[title='End Date']").parentsUntil("td.ms-formbody").parent("tr").mouseenter(function() {
var date1= $("input[title='Start Date']").val();
var date2= $("input[title='End Date']").val();
if (date2.length < 1) {
$("input[title='End Date']").val(date1);
}
});
I think it helps with dates not in the current month. I first used this with a time off request form.
I think that this is my own code, it is old, but it would not have been possible without the many posts by others in the SharePoint and jQuery areas.
Viewing a list from a different site (within same site collection)
I cheat by using the page viewer webpart.
1. on the site that has the list, go into SharePoint Designer, create a blank aspx page
*note: answer yes to prompt asking if you want to edit in Advanced Mode.
2. add a data view web part of the list you will want to display on a different site (Insert, Data View, select list)
*note: SPD is oddly sensitive regarding insert/modification of data views. Sometimes, ribbon menu items are disabled. There are a few tricks to try if this happens:
– try clicking Parse HTML in Code View Tools, Edit tab.
– try clicking around in code. sometimes the cursor position causes ribbon items to become disabled
– try saving, closing and reopening the aspx page.
3. set toolbar property to none (List View Tools, Design tab)
4. set chrome type to none (List View Tools, Web Part tab)
5. select desired columns, filter, sorting, grouping (List View Tools, Options tab)
*note: if you want to remove the automatic selection column that is used for multiple selection of list items, make sure you include an attribute of TabularView=”False” in the tag of the section of the XsltListViewWebPart. Sometimes it seems to be included, and sometimes not.
6. Select list design style (List View Tools, Design tab)
7. Save
8. In browser, go to other site. Go to page where you want to display the list. Using standard SharePoint UI functions, insert a Page Viewer webpart. Populate the page address with the URL of the new aspx page you just created above. And voila.
make external links open in new tab – using jQuery to add target=_blank attribute to external links.
Here is an example that modifies two Quick Launch entries. One link label ends with text “website” and the other link label ends with text “Share”:
if(typeof jQuery==’undefined’){
var jQueryMin = ‘https://xxxxx/Scripts/jquery-latest.min.js’;
document.write(”);
}
_spBodyOnLoadFunctionNames.push(‘linkNewTab’);
function linkNewTab(){
jQuery(“a[title$=’website’]”).attr(“target”,”_blank”).css({“background-image”:”url(‘/SiteAssetPictures/externalLink.jpg’)”,”background-repeat”:”no-repeat”,”background-position”:”right top”,”padding-right”:”15px”});
jQuery(“a[title$=’Share’]”).attr(“target”,”_blank”).css({“background-image”:”url(‘/SiteAssetPictures/externalLink.jpg’)”,”background-repeat”:”no-repeat”,”background-position”:”right top”,”padding-right”:”15px”});
}
CSS is thanks to you! http://sympmarc.com/2009/06/23/external-link-indicator-for-sharepoint-pages/
External link code samples are thanks to many out there including yourself, of course.
http://sympmarc.com/2009/07/08/onward-and-upward-with-jquery-reworking-my-external-links-javascript/
http://www.sharepointdiary.com/2011/02/sharepoint-link-list-open-in-new-window_21.html
jQuery to suppress “Recent” section in Quick Launch
_spBodyOnLoadFunctionNames.push(‘suppressRecent’);
function suppressRecent(){
jQuery(“.ms-core-listMenu-item:contains(‘Recent’)”).parent().hide();
};
(actually would like a way to get this done faster – this is often slow enough that the Recent section flashes on before it is suppressed.)
Hide calculated columns from new/display/edit forms
I looooooove calculated columns. However, they are a data type that can not be set to Hidden through normal UI channels. (Column definition form, or Edit Content Type)
I found out I could go through SharePoint Designer to do so, and now I use this all the time:
• 1/ Open SharePoint Designer
• 2/ Open the website that contains your list with the calculated column.
• 3/ Click on “Lists and Libraries” in the left column (under Site Objects).
• 4/ On the right, click on the list that contains your calculated column.
• 5/ Under “Content Types”, click on the content type where you want to hide the calculated column
• 6/ In the content type screen, click “Edit content type columns” under “Customization
• 7/ In the column “Property”, try clicking a few times on the “Optional” value until it changes into a dropdown list.
• 8/ Select “Hidden” from the dropdown list.
• 9/ Save your changes.
Even though it’s greyed out, it should pop up a dropdown list where you can select “Hidden”.
It can take a few clicks, before this dropdown appears, the GUI seems to be a bit slow in that step.
*source: https://social.msdn.microsoft.com/Forums/office/en-US/4c07a7fc-d80b-4b3a-b3df-bd3e869ac606/set-a-calculated-column-as-hidden-in-a-content-type?forum=sharepointgeneralprevious