Tag Archives: javascript

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

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!

A Non-Developer’s Intro to the Developer Toolbar: Performance

Sorry for the delay in getting this last post in, it completely skipped my mind. This is part three of my mini-series, part one covered element inspection and part two covers scripting.

In this post, we will look into some of the performance tools available to the developer toolbar in Internet Explorer. This will allow you to assess your SharePoint site, and see where some of the slow points are.

Let’s get the developer toolbar open, press F12.

Profiler

Profiler assess the scripts and functions running on the page. Out of the box, there’s a ton running, and there’s little we can do about it, it’s all SharePoint. If you have some custom pieces in your site, especially those using client side development, then this tool may be of use.

Click the Profiler tab, then click Start profiling button. This may hang for a little, just give it a little time. When it’s ready, the button will change to Stop profiling. Reload the page now. Once the page has fully reloaded, click Stop profiling. You’ll then see your results.

Developer Toolbar Profiler

The results will show you which functions in the client code are taking the longest. Sadly, a lot of them are SharePoint’s, and we can’t do much about it. You’ll see a lot of functions that may be confusing in name, like ‘Anonymous function’.

  • If you sort by the Function column, you can find your functions a little easier.
  • Sort by Inclusive Time to find the functions that took the most time, including child functions. Exclusive Time is the time it took for that one function.
  • Doubleclick a function and it should send you to the Script tab, if it can find the function for you.

Network

This is the real fun one, and gives us more direction on what’s going on. Click the Network tab, then click Start capturing. Reload the page and you’ll see results immediately.

Developer Toolbar Network

This tells us what took so long to download, from scripts to CSS files to images. You can sort by the Taken (time it took to download) or Received (amount of data) columns to see which items on the page took the most time. Normally, the page itself, in my case home.aspx, took the longest. This is because this page contains all of the HTML markup you see. Rarely is there something that can be done about this size, other than if there are custom web parts spilling out extraneous markup.

This tool will tell you if there is a large image or script/CSS file that’s taking long to download. You can take this data back to your developers and complain about the long times. They may have a shocked look on their face when you report this to them. Have fun with that ;). Large assets like images and script files can be optimized and minified to improve download speeds.

My next post will be on some of the other neat tools and advantages in the Developer Toolbar.

Til then, Happy SharePointing!

A Non-Developer’s Intro to the Developer Toolbar: Scripting

Last week, we started in on a basic into to accessing your site’s elements via the Developer Toolbar.

This week, we will cover scripting with the Developer Toolbar, and all of its wonders. :) Don’t worry, we’re not going to actually write code, well, maybe one or two really simple lines of code. Trust me, it’ll be painless.

The developer toolbar in each browser supports step-through debugging JavaScript, viewing errors, and real-time scripting. Since this post is to serve as an intro, my assumption is that you’re not a developer, but maybe you grabbed some code from a blog and it’s not working.

Script Errors

With your developer toolbar opened, go to the Script tab. If your script is acting up, it should be pretty obvious. You may need to refresh the page to get the script to run again, and return an error.

Script Error

You will see the error on the right, and there should be a link right below it. In my example, the link is ”Home.aspx, line 622 character 20′. If you click that, that will take you to the corresponding line in the left pane. Pretty neat eh? As a non-developer this may mean nothing to you, but this info helps the developer who wrote the script a lot.

Real Time Scripting

The Script and Console tabs allow you to enter and run JavaScript on the fly. This is excellent for testing things against SharePoint and makes development time much faster.

You may or may not care much about this, stick with me for the sake of a quick example:

You’re interested in a set of code from a blog, but you’re not sure if you have jQuery installed, and if you do, what version.

Let’s find out!

Go to the Console tab. At the bottom of the window should be a textbox with >> in it. You’ll be entering your commands there.

Type in $ and press enter. Yes, just $, a dollar sign. (I told you this was going to be easy!)

If you don’t have jQuery installed, you’ll see an error, similar to:

no jquery

If you get something like:

has jQuery

Good news, jQuery is available! One more line of code will tell us the version. Type in

 $("body")

and press enter. That should return something like:

jQuery Version

If you look a few lines down, you’ll see jquery : “1.9.1”. There’s your version number.

I can’t stop myself, one more tiny line of code. Let’s hide something on the page, just for fun. Type in

 $("#s4-workspace").hide()

and press enter.

See what that does? Cool huh?

Oh no!

Relax. JavaScript only affects the immediate page, your changes are not applied to the back end. Want it back? Just refresh your page. This could be a fun prank to play on someone if you can get 2 seconds in front of their computer. Do it to one of your developers, let them know you know what they know, ya know?

Coming up next, performance!

What happened to debugging? Debugging script only comes in handy if you’re troubleshooting a script you’re writing. Since you’re not a developer, I’m not going down that road.

Til then, Happy SharePointing!