SharePoint 2013 Script: Hide or Disable your fields

This one has been on my list for a while. I’ve used a collection of JavaScript methods to help streamline customizing forms in lists. I have created and compiled this little collection starting probably 5-6 years ago, and over time I’m constantly updating, tweaking, enhancing it, especially more so as of late working with Office 365.

I have a lightweight JavaScript file which allows you to hide or disable (set to read-only) fields in a new or edit form. It’s pretty basic but is a big value add. Also, you can set a field to read-only for only certain groups, meanwhile allowing other groups to edit the field. You can also hide a field completely, as well as hide a field and only show it for certain groups. Pretty sweet right?

The script is here: download from CodePlex.com.

How to use it

Include the script along with jQuery on your page. Ideally, throw this nugget into your master page and you can use it anywhere in your site.

<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>

Once that’s in, get using it! It’s really simple, I threw this on my new form for my task list:

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

This will change our New form for a typical task, from:

New SharePoint Task Form

to

New Task Form with Hidden Disabled Fields

See the difference? It’s subtle, but when working with end users, it can provide a huge benefit to help streamlining your business flow.

From here, you could have the edit form disable or hide a lot of the fields for normal users, only allowing your Project Managers, or if this is a support request list, your Support Team access to modify fields as needed. The options are endless.

More details

Lozzi.Fields.disable(fieldname)

Simply disables the field, for all users. It hides all controls in the field and displays the value instead.

Lozzi.Fields.disableWithAllowance(fieldname, groups)

Disables the field, but enables it for the users in the groups specified. Also, Site Collection Administrators are included automatically, so they can always edit the field. You can send the groups in an array, like ["Group One", "Group Two"].

Lozzi.Fields.hide(fieldname)

Simply hides the field, for all users.

Lozzi.Fields.hideWithAllowance(fieldname, groups)

Hides the field, but shows it for the users in the groups specified. Also, Site Collection Administrators are included automatically, so they can always edit the field. You can send the groups in an array, like ["Group One", "Group Two"].

Some other important notes

  • Currently, this script does not work on list views, meaning a user could edit the data in datasheet/quick edit view.
  • This script should work just as well on SharePoint 2010 if you so desire.

Download this script here: download from CodePlex.com.

Til next time, Happy SharePointing!

Coloring your SharePoint Timeline in one line of code

I just had a colleague ask me “Can we color code a timeline?”. I, of course, answered “Sure!”. I had a little wiggle room in my day so I busted this out.

Let’s go from the all blue timeline:

SharePoint Timeline

To something that indicates where your are, a little more visually:

SharePoint Color Coded Timeline

One line of code, BOOM:

 $(".ms-tl-milestoneLine, .ms-tl-innerDiamond").filter(function() { return $(this).offset().left < $(".ms-tl-today").offset().left; }).css("background-color","rgb(13,171,5)");

I’m not a fan of one-line-of-code solutions, I’m a bigger fan of clean, legible code, so here’s the above, but a little more understandable.

$(document).ready(function() {
 var todayLeft = $(".ms-tl-today").offset().left;
 var backgroundColor = "rgb(13,171,5)";
 $(".ms-tl-milestoneLine, .ms-tl-innerDiamond").filter(function() {
    return $(this).offset().left < todayLeft;
 }).css("background-color",backgroundColor)
});

If it’s not obvious, you’ll need jQuery on your page as well ;). Similar to my color coding calendars, you’ll have to throw this into a content editor web part or a HTML forms web part.

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!

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!

SharePoint: Search as You Type

My first CodePlex project! WOO HOO.

I saw some references online about being able to search as you type in the search box in SharePoint. I thought cool and continued searching and came across a few people who have done it. I compiled and took the stuff I liked from

  • Jan Tielens’ post introducing the idea.
  • Muhimbi’s post which took Jan’s post and cleaned it up a little and attached it to the SharePoint search box.
  • John’s post which also took Muhimbi’s post and added wildcard search capabilities.
  • Herve’s post which took Muhimbi’s post and focused it on people search and added paging.

and combined the above changes and features and created a single copy. So I made the follow modifications and merges

  • Started with Muhimbi’s cleaned up version.
  • Cleaned up the results list to make it a little more readable and user friendly.
  • Added a more results link at the bottom to send the user to their full search page.
  • Added paging from Herve’s post.
  • Added wildcard search and fixed IE XML issue from John’s post.

I decided to post this up to CodePlex, seeing it’s becoming a community built effort anyway.

Get the latest and greatest at http://searchasyoutype2010.codeplex.com. See CodePlex for additional instructions.