Category Archives: SharePoint 2013 Development

Embedding your JavaScript into a SharePoint page

A very typical approach for client side development in SharePoint is to throw the code onto the page where you need it. You can alternatively put into the master page, but generally speaking, most code doesn’t need to run on each and every page. The following describes my preferred, tried and true, method of handling this.

Upload the Assets

Say you have some great JavaScript code provided by a developer or blogger, and you want to now use it on your page. First things first, get the JavaScript into your SharePoint site!

Upload the JS file into a library. I generally use SiteAssets, with a small folder structure for organization, like SiteAssets\js, or if there is more, sometimes like SiteAssets\webparts\mywebpartname.

Once the JS is uploaded, we now need a HTML file to reference it. This can be pretty simple HTML file. You can create it on your desktop (create a new text file, and rename the extension to .html) or using SharePoint Designer, you can create it directly in SharePoint. Throw it in the same place as your JS file, or however you have your assets structured.

As an example, we’ll take a block of code from one of my blog posts, we’re going to throw the necessary HTML and JS into the HTML file you created, something like:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="/SiteAssets/Lozzi.Fields.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
ExecuteOrDelayUntilScriptLoaded(function(){
Lozzi.Fields.disableWithAllowance("Start Date", ["Project Managers"]);
Lozzi.Fields.disable("Task Status");
Lozzi.Fields.hide("% Complete");
},"sp.js");
});
</script>

This is all the HTML and code needed to run the JS I’m working with. Notice Line 2, the second <script tag. This is the path to the JS file you uploaded into SharePoint. Make sure the path is correct. This block of code above will differ for each and every JS example you work with.

Once the HTML file is saved, navigate to it through your browser and copy the link to the HTML file. You can do this simply by clicking on the file’s ellipses, the …, and copy the URL from there

copy file link

Embed in SharePoint

Ok, now that we have the JS file uploaded, and a HTML file created, let’s embed it in SharePoint! This is the easy part.

Navigate to the page you want to use this code on. Just use your browser and click to go to the page, pretty simple so far right?

Now edit the page: click the cog in the top right and select Edit Page

edit page

Once the page is in edit mode, click Add a Web Part button at the top of a zone, it doesn’t matter too much where. If you don’t have an Add a Web Part button, you’re probably using a wiki page, so click anywhere in the content area where you want add a web part, then click Insert Web Part.

add content editor web part

In the Add web part ribbon, select Media and Content on the left, and then select Content Editor. Click Add to add to your page. You should have something like:

added content editor web part

Notice the Content Editor web part added. Now click the web part, in the top right, and edit the web part.edit web part

In the tool pane on the right, paste in the URL to the HTML file. Click OK.

past html link in content editor

Afterwards, your content editor web part may look empty, or you may see some of your HTML, it depends on what you’re working with. My example, I’m just using JavaScript to hide fields on my page.

save content editor

Save the page and you should be good to go! Your code should fire off and you should see things happening. If not, if you question what’s going on, try using the developer tool bar in your browser, more on how here.

A couple of notes:

  • You may want to modify the Content Editor Web Part’s Chrome Type setting to hide the title from view
  • If you receive the error “Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator.”, check the URL you’re pasting in. SharePoint can’t find it, make sure it’s valid. Paste it into a new browser window and see if downloads the file.
  • Make sure to structure your JS and HTML files well, you never know who’s going to look at it next.
  • Consider using the URL to the HTML file as a relative URL instead of a absolute URL. How? Consider the following URL is an absolute URL: https://sharepoint/sites/sitename/siteassets/myfile.js. Make it relative by dropping the first part: /sites/sitename/siteassets/myfile.js. This will keep it a wee bit more flexible and migrations in the future should be a little easier.

‘Til next time, Happy SharePointing!

Advertisements

Showing users’ profile pictures in a SharePoint list

Special thanks to Joann for the question!

A common use case is to have a list of people in a list in SharePoint, maybe they’re members of a project, contacts for a department, your favorite people to talk to, whatever it may be, you have a list. This example is a listing of my teammates:

slalom people list

Now I’d like to spice it up a little and see their pretty little faces. In my example, I’m just using the Title field to store their names (well, the Title field renamed to Name, regardless, same scenario). This won’y fly. We need to add a people picker to the list. I added one called Account Details. You could name yours Photo, Pic, Face, etc.

Add a people picker to the list, and add the correct values:sharepoint list with names

You can edit this view in Quick Edit mode, and copy/paste the Name column into the Account Details column.

Now let’s configure it to show their picture! (yes you could’ve done this with the above step, but for illustration purposes I add more steps)

When you edit the People Picker Field, check out the Show Field property.

edit people picker

See the few options at the bottom? Picture Only, select one. In my example, I selected 72×72

people pictures in sharepoint

BLAM! Profile pictures!!

Now I’ll let my team know I’m sharing their pretty faces.

‘Til next time, Happy SharePointing!

SharePoint: Hiding Ribbon and More with IsDlg

SharePoint has this neat little feature on every page that allows you to hide the header and nav on the page by simply appending isdlg=1 to the end (careful, it’s case sensitive). It comes in handy when you’re using a page viewer web part, you can show another page on your page and hide the other stuff that you already have on the page. Huh?

It does this:

A normal, happy, SharePoint page

Normal Document

Adding isdlg=1 to the URL makes it look like this

Document library page with isdlg

As you can see we lost the header and quick launch, which is great, but we still have a ribbon! GAH, let’s get rid of it!

This use case came out of a StackExchange question. The user only wanted to show the list of documents in a page viewer web part.

Easy enough! With a little jQuery, we can hide the ribbon, and other stuff on the page. You will need to put this code on the page that you want to hide components on, in my case I put this on my library page. You can embed it a few different ways, I prefer using a Content Editor Web part. Here’s the code to hide the ribbon bar:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("hideItAll");

function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
 $("#s4-ribbonrow").hide(); //ribbon bar
 }
}
</script>

What the above does is check if the isdlg=1 flag is in the URL, and if it is, hide the ribbon bar.

So you get something like:

Hiding Ribbon Bar

Ooooo…. what about that other bar, with the new, upload, sync? Let’s hide that too. Update your script like:


function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
 $("#s4-ribbonrow").hide(); //ribbon bar

 //because the bar joins us late in the game, we need to throw CSS in to hide it
 $("head").append("<style>#Hero-WPQ2 { display:none }</style>");

 }
}

will look something like:

Hide Ribbon using IsDlg

And let’s go crazy and hide that pesky view and search bar:

function hideItAll(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") &gt; 0){
 $("#s4-ribbonrow").hide(); //ribbon bar

 //because the bar joins us late in the game, we need to throw CSS in to hide it
 $("head").append("&lt;style&gt;#Hero-WPQ2 { display:none }&lt;/style&gt;");

 $("#CSRListViewControlDivWPQ2").hide(); //views and search bar
 }
}

Tada!

Hide toolbars and ribbon with isdlg

You can further explore and show/hide other page components as you want, find the element’s ID using your toolbar and have fun!

‘Til next time, happy SharePointing!

Navigating multiple calendars in SharePoint

This topic came up over on SharePoint.StackExchange.com, and I thought I’d share here too.

You may want to setup a single page to view multiple calendars. Calendar overlay is a great way to handle this, but what if you want to see these side by side, and let the user navigate the dates in unison, so clicking Next Day will go to the next day, on each calendar.

Two Calendars on a Page

Looking at the above, clicking the day navigation will only update that one calendar web part. Not cool. How do we fix that?

Insert a Snippet App Part, and copy and paste this code into it. It’s a little raw, but it works. Class it up for your brand and site as you need.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<a href='#' id='newPrevDay'>Previous Day</a> &nbsp;
<a href='#' id='newNextDay'>Next Day</a>
</div>

<script type="text/javascript">
$(document).ready(function(){

ExecuteOrDelayUntilScriptLoaded(overrideButtons,"SP.UI.ApplicationPages.Calendar.js");

function overrideButtons() {
$("#newPrevDay").click(function() {
$("a[title=\"Previous Day\"]").each(function() {
eval($(this).attr("href"));
});
});

$("#newNextDay").click(function() {
$("a[title=\"Next Day\"]").each(function() {
eval($(this).attr("href"));
});
});
}
});
</script>

Once the code is in, the calendar’s buttons will be hidden and the new buttons will appear, like so:

Calendars with single navigation buttons

 

We all know what IsDlg does… wait, what the…??

Here’s a little nugget I came across, on SharePoint 2010 and 2013 (including O365), and was exceptionally frustrated with. There’s a difference between IsDlg and isdlg. See it? Case sensitivity. Come to find out that means the world to SharePoint.

I was tasked to setup a basic Page Viewer web part to consume a page from another web. Simple enough. I threw the URL into the web part, including IsDlg=1, and blamo, I got my page. However, I couldn’t scroll the web part. The page I was using was longer than the web part, which would normally cause the page to scroll, but alas, not in this web part.

Enter the IsDlg parameter. Don’t know what IsDlg is? It’s a little query string parameter that SharePoint uses to hide elements on your page using CSS. Have you noticed that if you enable the dialog on a list, and the forms then appear in the dialog window, that the header is missing? The left nav too?

Dialog Window in Use

It’s the same page as if you didn’t use the dialog setting, Microsoft isn’t crazy enough to have two versions of a page that does the same thing. Instead when the IsDlg parameter is sent to the page as a parameter in the query string, it hides everything on the page with a CSS class of s4-notdlg.

Here’s what the URL may look like:


/sites/lozzi/Lists/Events/DispForm.aspx?ID=4&IsDlg=1

Note the IsDlg=1 at the end. I’m a big fan in questioning everything, so let’s try it out for ourselves.

Go to a display form of a list item, which is not in a dialog.

A Normal Display Form

and add &IsDlg=1 (case sensitive) to the end of the URL, hit enter.

Display Form with IsDlg=1

See how we lost the top header and left nav? Looks like the dialog up above, right? Pretty cool eh? So, as you may be thinking, “this is awesome, I can use this in the page viewer web part too”. You would be correct in your thinking! Here’s where things get a little fishy.

When you use IsDlg (again case sensitive), SharePoint does NOT scroll the window if the window requires it. Again, give it a whirl. Take your window you used above, and resize it so it’s nice and small, put the Close button below the bottom of the window.

IsDlg missing scroll bars

See? The close button is below the window, but there’s no scroll bars. If you change the IsDlg to isdlg, then you get a happier page.

Scroll bars come with isdlg

Whew, there’s our trusty little scroll bar, now I can press Close.

Let’s dig deeper: core.js

Why is this happening? Well I dove into the JavaScript that handles it, in the core.js file, there are several lines of code which look similar to:


isdlg = (ajaxNavigate.get_search()).match(new RegExp("[?&]IsDlg=1"));

JavaScript is very case sensitive, so it’s actually, and quite specifically, looking for IsDlg, not isdlg. Weird right? So if you send the page IsDlg, SharePoint forces the size of the window and disables the scrolling. If you send isdlg, SharePoint does nothing with it except for hiding the CSS elements (as we discussed earlier). Your browser’s native capabilities kick in and scrolling occurs.

This is great for the dialog interface SharePoint is use to as they will size with the page. Now the user is scrolling the entire page and not just the page within the dialog. This is annoying for us if we want to use IsDlg feature elsewhere and we want to scroll just inside the web part. We have to use the isdlg option instead.

Oh yeah, I confirmed this occurs in Internet Explorer, FireFox and Chrome too ;)

‘Til next time, Happy SharePointing!