Tag Archives: jquery

Before you make SharePoint Public – 2 more times

I wanted to quickly share on two more options for you to listen in on my session Before you make SharePoint Public.

SP24 is reairing all of their sessions, this Wednesday and Thursday, May 14th – 15th. My session will be run Wednesday night, at 9pm EST. I hope you can make it. Check out the wrap up from my first session here.

I am also presenting this session live at the Connecticut SharePoint User Group on May 15th. CTSPUG is hosted at 100 Pearl Street in Hartford, CT, check out their site for more details, www.ctspug.org

I hope to see you there!

About these ads

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

 

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/javascript">
 $(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!