Tag Archives: Web parts

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

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!

Creating an item detail dashboard view of your joined lists in SharePoint 2010

Thanks to Stan for suggesting the idea for this post, by leaving a comment here.

Our goal here is to take your joined lists and display them on a single page, so you can effectively review an item and its associated information. This is a useful task for creating views of projects with many tasks, milestones, documents, or customers with contacts, documents, or products with updates, documentation, downloads. Really, anywhere a list that is linked (via a lookup field) to another list, this can be applied.

First, let’s assume the following: we have a parent list, and a few daughter lists which have lookup fields to the parent list.

Parent and Daughter Lists

Simple enough. In my example here, I am going to use a project theme. I have a Projects list, a Tasks list, and an Issues list.

Starting with the parent list, first let’s disable the popup dialog option. We can’t edit the pages in a dialog window, plus you’ll want a nice full page to view all your info. Go to the parent list, click List in ribbon > List Settings > Advanced settings. At the bottom of the page, Select No under Launch Forms in Dialog. Click OK.

Browse back to your project list and select one of your projects. You should see the nice generic page view.

Press Site Actions in the top right, then select Edit Page. The page will switch to edit mode. Now go ahead and add your lists you wish to join. In my case, I am going to add Tasks and Issues. Your new web parts will be added to the top of the page. Make sure to drag your web parts down so your project details remains at the top.

Adding web parts to project display page

Once your web parts are added, edit each web part and set the Chrome Type (under Appearance) to Title and Border or Title Only, your choice. Make sure to click OK at the bottom of the edit web part panel to save your changes.

While we’re still in edit page mode, click the web part edit menu for your first web part (same place you went to edit the web part) and select Connections > Get Filter Values From > Projects.

Add the connection for the web part

A new dialog will appear.

Web part connections dialog

For the Provider Field Name, select ID. For the Consumer Field Name, select the  lookup field, Project. Click Finish.

Create the web part connection

Your web part will be reloaded and filtered based on your project.

Filtered connection web part

Perform these same connection steps for the other web parts on your page.

When you’re done, press Page ribbon, then Stop Editing. That’s it!

As you click and view each project, your tasks and issues will automatically filter for the selected project. Pretty sweet eh?

.

Take it further!

  • Edit the display form in SharePoint designer to add 2 columns to your page, allowing you to put additional web parts to the right of the details as well.
  • Using color coded calendars, see my post here, you can create a calendar view of your tasks and projects, color coded based on status. Create a calendar view in each list, then when creating the color coded calendar, use these lists and views!
  • Create a calendar for your tasks, color coded based on status, and add another web part to the above page to include the calendar!

Happy SharePointing!

Reusing Your Customized SharePoint Web Parts

Let’s say you have a sweet web part, it might be something cool with JavaScript, jQuery, or SPServices, a simple weather web part, a data view web part, or an image. Whatever you made (with some exception, keep reading), you can export your web part and copy it over to another page or site within SharePoint, or even to an entirely different SharePoint farm, to quickly reuse your master piece.

The process is straight forward, and applies to a few web parts. Unfortunately, the normal list view web parts (viewing lists and libraries in your site) are not exportable, and cannot be copied to another site or page. You’ll have to recreate those on each page. The common exportable web parts include the Content Editor, HTML Form, XML Viewer, Image Viewer and Page Viewer. Basically, anything that’s highly customizable.

Once you have your web part done and ready to be exported and copied to another location, you want to edit the web part (hit the web part menu at the top right). When it’s in edit mode, click the web part menu again and you’ll see the Export option.

Export a SharePoint web part

Click Export. You will be prompted to download the file. The file name will assume the title of your web part, with a suffix of .dwp. Save this file onto your computer.

Your web part is now exported! If you plan on moving this to another site or farm, make sure you download any supporting files, like jQuery, SPServices, images, etc. which will be needed by the web part.

You have two options to reuse this exported web part.

  1. You can upload it and use it on a per need basis, per page/site as needed.
  2. You can upload it to the web part gallery and make it available across the site collection.

We’ll walk through both options.

First, if you want to use this per page/site:

  • Navigate to that page.
  • Edit the page (which you know how to do since you created the web part, but just in case you forgot, press the Site Actions menu at the top, select Edit Page).
  • If you’re using a wiki page, place your cursor in the content below where you want your web part to appear. Press the insert tab in the ribbon, then click Web Part.
  • If you’re using a web part page, click the Add a Web Part button above the zone you wish to add the web part to.
  • In the ribbon, below the list of categories is a little link labeled Upload a Web Part. Click that and click Browse, select your dwp file you downloaded previously and click Upload.
    Upload web part to SharePoint
  • After it uploads, you may lose the insert web part ribbon. Just click the Insert Web Part option again.
  • At the top of the categories list you should see a new folder Imported Web Parts. Your web part should be in there. Go ahead and insert it!

You can repeat these same steps on each page or site you wish to use the web part on.

In some cases, you may want to use this web part across an entire site collection, giving power users and other admins the ability to use it at their discretion. This is just as simple as above.

  • Navigate to the root site.
  • Go to Site Settings (Site Actions > Settings).
  • Click Web Parts under Galleries.
    • If you’re not in the root site, you won’t see this link. Click Go to top level site settings under Site Collection Administration.
  • Click Documents in the ribbon and click Upload. Just like any other document library, you can navigate to your downloaded file and upload it.
  • After it’s uploaded, you’ll be prompted to save some meta data about the file. Here you can rename the web part if needed, give it a description, and specify which group to save it in. I suggest specifying a group which will make it easy to find, like CompanyName, or My Web Parts.
  • Click Save.

Now when you go to edit a page and add a web part, you’ll see your new group on the left, which will contain your web part.

Uploaded Web Part to Site Collection Gallery

Happy SharePointing!