Middle ground with SharePoint user interface enhancements

JQuery is a reasonable compromise between limited out-of-the-box configuration options and heavy-handed SharePoint Designer

This article can also be found in the Premium Editorial Download: SharePoint Insider: Preventing sprawl with a virtualized Sharepoint deployment:

Many SharePoint users, administrators and even developers have seethed with frustration over SharePoint’s user interface. It’s not that it’s a bad interface, but if you don’t like what SharePoint provides out of the box, you don’t have too many good options.

Although it’s simple to create a default data entry screen in SharePoint by defining a content type or adding a few columns to a custom list, it’s altogether a different story when you’re trying to change that default data entry screen. SharePoint has two main solutions for creating custom screens: limited configuration options and SharePoint Designer.

Through configuration, SharePoint allows the ability to reorder columns, hide some columns, specify whether they are mandatory and give them a label, along with a few other rudimentary controls. SharePoint Designer allows much more power and flexibility. These approaches have their pluses and minuses.

What’s apparent is that there is no good middle ground when it comes to changing SharePoint data entry screens. On the one hand, configuration provides limited customization capability. On the other hand, SharePoint Designer is often too complex and difficult to use.

As always, the SharePoint community has risen to the occasion to find that middle ground. It has borrowed technology from outside the SharePoint world and made it fit within SharePoint’s model by doing some interesting things. That borrowed technology is jQuery.

JQuery is a public domain JavaScript library that has a cross-browser set of simplified and normalized functions that work correctly in a wide array of vendor browsers, such as Internet Explorer, Safari and Opera. It even works across different versions of browsers from the same vendor, such as IE 7 versus IE 6.

JQuery supports browsers that don’t work well with SharePoint in the first place, so it’s well suited for SharePoint work.

Why JQuery in SharePoint? We’ve always had the ability to add JavaScript to a SharePoint Web page and use it to jazz up the user interface. JQuery allows us to do this faster and more reliably. The SharePoint community has adopted this proven technology. In addition, Microsoft generally supports JQuery—it provides IntelliSense in Visual Studio 2008, and it supports jQuery in SharePoint 2010. So jQuery works with today’s SharePoint and will work with the next release too.

Solving common user interface design

Every SharePoint veteran hits a wall with certain user interface design problems. JQuery solves them. Here are two problems and solutions:

  • Conditionally hide or disable a field: SharePoint’s standard user interface does not allow the capability to hide or disable a field at run-time. Consider a classic question: “How did you hear about us?” A proper user interface would offer the user several choices, such as “colleague,” “direct mailer” and the catch-all, “other,” for those times when none of the predefined choices are adequate. When selecting “other,” we would want the UI to dynamically change and prompt the user for additional detail. JQuery makes this simple.
  • Show additional context information after selecting a value from a lookup: We often design forms that prompt the user for an entity like “customer.” In SharePoint, we typically define a lookup site column that pulls its data from a custom list that stores customer data. Because the column can pull information from only one column, the lookup doesn’t provide much more than a name or a code.

JQuery allows us to enhance this simplistic interface in two key ways. First, we can actually modify the lookup values themselves. Instead of showing a drop-down that just shows company names, we could modify the drop-down to show company name and city or any combination that we want.

Second, we can take immediate action when the user selects a value from the drop-down and show as much context as we want. For instance, after the user selects a company from the drop-down, we can show the company name, our main contact at that company, phone number and address. How does it do that? By invoking out-of-the-box SharePoint Web services via Ajax.

It’s important to realize that JQuery is JavaScript code running in the user’s Web browser and that that code has access to everything on the page. Those two examples describe some specific problems that jQuery allows us to solve quickly and easily for data entry forms. But jQuery goes further than that. It can be used to modify anything in the system, including views on lists, menus and other Web parts. If we can see it, we can affect its operation with jQuery.

What jQuery is not

JQuery is not a security solution. It’s possible to write some jQuery code that hides or disables fields based on the current user’s role or that addresses one of the classic questions—securing a view on a document library or custom list so that only a specific group of users is allowed to see that view. We can use jQuery to dynamically remove a “secured” view from the drop-down list of available views. But users can still type the URL of that view directly into their Web browsers.

“No problem,” you say. “I’ll just add some jQuery to the view itself and disable it if users type the URL into their browsers.” This, too, is possible. But because the content was already downloaded from Sharepoint to the Web browser, users can still see the supposedly secured data by simply using the “view source” function in the Web browser. It won’t be pretty,  but a determined user will piece it together. So, the bottom line is that jQuery can’t solve all of your problems, but it can go a long way toward minimizing most of them.

JQuery is freely available, well supported by Microsoft and has become a beloved tool of the SharePoint community. It doesn’t require difficult server-side configuration and even works in a hosted SharePoint environment.

JQuery offers a compromise between the limited user interfaces we can build via out-of-the-box configuration versus the heavy-handed SharePoint Designer. It can solve a wide variety of problems, but it’s important to understand its limitations. JQuery is here to stay. Now is as good a time as any to investigate it, learn it and take advantage of it.


About the Author

Paul Galvin is a SharePoint MVP and co-founder of Arcovis, a SharePoint consulting organization providing services to clients in the New York metro area. Galvin has worked in the IT industry for more than 15 years in areas such as software development, consulting and SharePoint solutions design, where he works with clients to create business solutions using the SharePoint platform. He contributes to the SharePoint community through MSDN forums and his blog at http://paulgalvin.spaces.live.com.

This was first published in November 2009

Dig deeper on Enterprise SharePoint strategy

Pro+

Features

Enjoy the benefits of Pro+ membership, learn more and join.

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchBusinessAnalytics

SearchDataManagement

SearchManufacturingERP

SearchOracle

SearchSAP

SearchSQLServer

Close