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 supports browsers that don’t work well with SharePoint in the first place, so it’s well suited for SharePoint work.
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.
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.