jQuery – List and Document Library Search Solution in SharePoint

Search has not been easy with SharePoint 2007 and especially with WSS 3.0.  For example many times I just want to search list or document library.  What I want is ability to see what items match what I’m looking for specifically with the list that is showing right now.  I would like to search, not have to refresh the page or go to another location to do the search.

I have been developing another site with SharePoint WSS 3.0 and needed to have such a solution.  The site www.mobilesitezone.net (this is designed for smartphones) is a very customized SharePoint site. I then adapted the search created for it to work with any SharePoint List or Document Library.

What was created was a jQuery search solution that only looked at the list on the page and filtered results based on the search criteria. It will search all the fields that are shown on the site and then show you the rows that have any matches.

Here is an example where there is a large list of over 400 items and then a search is made for "google" which then displays just the results.

List

2011-11-08-JqueryListAndDocLibrarySearch-01.png

Results

2011-11-08-JqueryListAndDocLibrarySearch-02.png

I have put together an example page where you can test this out and get the WebPart or Code for CEWP to add this to your site.

Click here to get the solution

Hope you enjoy,

Peter

Peter AllenGuest Author: Peter Allen
BitsOfSharePoint

Peter Allen is a SharePoint enthusiast and evangelist having deployed solutions in Healthcare, financial, and engineering firms. He has worked in the technology field for 15 years creating solutions both internally and externally for clients. He has worked at start-ups, mid and larger corporations and has consulted. He currently hosts a site http://www.bitsofsharepoint.com where he blogs about solutions to extend the features of SharePoint.

Today in SharePoint: Now available on iTunes

Today in SharePoint, available on iTunesJeremy Thake (@jThake) from SharePointDevWiki.com has been giving me grief for not making the "Today in SharePoint" recordings available for download to his vegetable machine… I mean iPod.

To show Jeremy that I actually do listen to suggestions when I feel like it, here’s a direct link to subscribe to "Today in SharePoint on iTunes" from EndUserSharePoint.com.

Enjoy it, Jeremy. Now go write that article you promised me. — Mark

Adding pictures with hyperlinks in SharePoint

Sherri AmstutzGuest Author: Sherri Amstutz
Accelerated Knowledge

The example that follows uses a Content Editor Web Part (CEWP) however, this practice can be used in any SharePoint Web Part that allows you to Edit HTML source using the icon in the Rich Text Editor (see below).

 

Adding Pictures with Hyperlinks

 
A short list of standard SharePoint Web Parts that include a text area that has the “Edit HTML Source” option by default are:
  • Announcements
  • Discussion Board
  • Events
You can also add a text area that includes the Edit HTML Source option to a standard SharePoint Web Part by creating a new Multiple lines of text column, then selecting Enhanced rich text in the Additional Column Settings section as shown below.
 

Adding Pictures with Hyperlinks

 
Start the process by navigating to the site page where you want to add the hyperlinked image and add a CEWP.  Click Site Actions then Edit Page.
 

Adding Pictures with Hyperlinks

 
Click Add a Web Part in the section of the page where you want to add the clickable image.
 

Adding Pictures with Hyperlinks

 
Select Content Editor Web Part in the Add Web Parts dialog and click Add.
 

 

Adding Pictures with Hyperlinks

 

 
The CEWP will be added to the page.  Leave this page open in your browser and open a new browser window or tab to upload the image you want to use.
Navigate to a Picture Library or create one if it doesn’t already exist.  To create a Picture Library click Site Actions, Create, then select Picture Library, complete the form presented and click Create.   

Recommended practice 1:

For sites that utilize unique security settings (e.g. project sites) my habit is to create a Picture Library for site images within the site itself.  I don’t add a link to it on the Quick Launch because the only purpose is to use the library for images that will be displayed on the site.  Creating this Library within each site prevents the problem of site images that are not visible to users.  This happens when images are uploaded in a site that users do not have access to but are referenced in a site that the user does have access to.  If this happens the image will show up like this:
 

Adding Pictures with Hyperlinks

 
Upload the picture(s) you want to use by clicking Upload, then Browse to the picture, once it is selected and the path appears in the Name: box, click OK to begin the upload.
 
After the picture uploads, complete any information you want to capture about the image in the properties form and click the picture to navigate to the URL for the image. 
 

Adding Pictures with Hyperlinks

 
Copy the URL to your clipboard by selecting the URL and right clicking it in the address area of your browser then clicking Copy.
 

Adding Pictures with Hyperlinks

 
Click the browser Back arrow or Back button to return to the previous page, then click OK to close the Image Properties page.
Navigate back to the page where you added the CEWP.  Click open the tool pane, then click Source Editor… 
 

Adding Pictures with Hyperlinks


Adding Pictures with Hyperlinks

 
The devil is in the details on making a picture usable as a hyperlink.  I started by trying to use the Rich Text Editor…, adding the picture and trying to use the Hyperlink option to make it a link.  It didn’t work.  I then tried typing HTML commands in a variety of ways using the Source Editor…, but I couldn’t get that to work either.  I was pretty sure I didn’t have the syntax right so I asked one of my technical guru friends (Pam Davis http://padavis.wordpress.com/) for the syntax I needed.  What follows came from her expert advice.

 

Add HTML code to the Source Editor… with the following syntax to make your picture a hyperlink: 
<a href="http://www.hyperlinkcode.com" target="_blank"><img alt=”Alt Text” src="/images/sample-image.gif" border="0"></a>

 

 

Adding Pictures with Hyperlinks

 
Replace the http://www.hyperlinkcode.com with the link to the site you want the picture to take your users to. 
 
Replace the img src=”/images/sample-image.gif” with the URL you copied into your clipboard in the steps above. 

Recommended practice 2:

You may notice that the image link shown in this sample text above represents the shortest possible link to the image.  This is referred to as a “relative” link.  I try to use relative links in SharePoint where possible so that if the location of the site changes or other changes happen the link to the image won’t break.  If you make your link relative and the image does not appear, you may have shortened the link too much.  You can always include the entire link starting with “http://” to make the image visible. 
 
The target=”_blank” setting opens a new browser window when your users click the picture.  If you want the link to open in the existing browser, remove this text. 
 
The alt=”Alt Text” setting is used to create rollover text for your picture.  If you do not want rollover text, remove this.
 
The border=”0” setting will not create a border around the image.  Experiment with adding border=1 to see the border created around the image. 

 

Click Save.  The image will appear and when clicked, will take users to the website URL entered above.

 

Sherri AmstutzGuest Author: Sherri Amstutz
Accelerated Knowledge

 

Sherri Amstutz has a wealth of experience in strategy, learning, and complex project management.   She has served clients in a number of vertical markets including financial services, software development, education, distribution, and manufacturing.   Sherrihas delivered implementation consulting and training for numerous SharePoint projects including an early-adopter who was featured at Microsoft’s Office 2007 kickoff event in Atlanta, Georgia.  Ms. Amstutz’s education includes a BBA from Grand Valley State University and a MBA from Western Michigan University.  She was certified as a CPA early in her career and is the sole owner of Accelerated Knowledge (www.acceleratedk.com).

 

Visualizing Information in SharePoint: Demo 02 – Five Solutions

In the screencast below, we look at five examples of how the HTML Calc Column can be used to visualize information.

Christophe Humbert continues to refine his solutions for next week’s live online workshop, "Visualizing Information in SharePoint". If you like what you see, we’d enjoy having you at the workshop.

Download this screencast
Name: Visualizing Information in SharePoint
File Size: 3.6 megs

SharePoint Site Template for jQuery and Scripting Resources – v01

I’m finishing my first draft for creating a SharePoint site template for jQuery and various supporting scripting resources. I’m looking for input from those of you developing jQuery solutions embedded in Content Editor Web Parts in SharePoint. Take a look at the diagram and let me know if anything essential is missing.

Please keep in mind this is the first draft and I’m looking for essential chunks that MOST jQuery solutions are using. It’s not supposed to be comprehensive… yet.

Thanks in advance. — Mark

jQuery Resources and Scripting Resources - v01

SharePoint: SPCascadingDropdowns Demystified (or Mystified, Depending on Your View)

Marc D AndersonGuest Author: Marc D. Anderson
http://mdasblog.wordpress.com

In my  jQuery Library for SharePoint Web Services, one of the most popular functions is $().SPServices.SPCascadeDropdowns.  The SPCascadeDropdowns function lets you set up cascading dropdowns on SharePoint forms. What this means is that you can enforce hierarchical relationships between column values.  This is sometimes called connected dropdowns or linked dropdowns (or probably other things I haven�t run across yet).

The function uses the GetListItems operation of the Lists Web Service to refresh the allowable values based on relationships which are maintained in reference lists. By implementing this function, you can remove all of the coding requirements to manage the hierarchical relationships (once it is in place) and let your users manage the content.




In WSS3.0 and MOSS2007 Search Engine Optimisation left little to the imagination.

In summary Zac Smiths IIS7.0 SEO toolkit across a SharePoint site and it reported these things specific to SharePoint:

  • The page contains multiple canonical formats
  • The page contains unnecessary redirects
  • The URL is linked using different casing
  • This page contains invalid markup
  • There is no XML sitemap defined

It is not clear yet whether SPF2010 and SPS2010 will improve this, although there is certainly a drive with accessibility to fix the invalid markup.

External References

2009-10-28 Today in SharePoint with Gannotti, Rogers, Watson, Oleson and Miller

Yes, the title is a mouthful, but if you’ve got a half hour, this is a fun session. Michael Gannotti, Laura Rogers, Mike Watson, Joel Oleson and I take a quick stab at what we saw this week and try to put it into perspective. For those who couldn’t attend SPC09, you can hear the excitement in the voices as we discuss what we discovered and the people we met.

I hope you enjoy it.
Mark

Subscribe to "Today in SharePoint" for iTunes/iPod… the vegetable store as Gannotti would say.

Download the recording
Name: This Week in Sharepoint – SPC09 Round Up
File Size: 14.5 megs
Total Time: 31 minutes

Locations within the recording (minutes:seconds)

  • 00:45 – Introductions
  • 02:09 – Standout Item from SPC09
  • 06:00 – Social Media and the Workplace
  • 09:01 – SharePoint 2010 Global Features
  • 09:37 – Third Party Opportunities
  • 11:53 – Most Popular Training Sessions at SPC09
  • 12:30 – International Participation in SharePoint
  • 15:06 – How will 2010 Affect Your, Personally
  • 18:18 – 2010 Hosted Environments
  • 19:30 – Documentation of 2010
  • 21:24 – Social Media Capabilities in 2010
  • 24:29 – Documentation by Communities
  • 29:51 – Upcoming Events

Time Zone Calculator for Live Online SharePoint Saturday Europe

One of the difficulties of putting on a global virtual event is trying to keep track of the various times zones: when do things start, when are specific sessions supposed to happen, what time are the breaks.

I was looking at Joel’s article on his upcoming web cast, "The New World of SharePoint 2010 Administration", and he had a table of all the world timezones for when the event will start. I followed the link to TimeAndDate.com to create my own table for Live Online SharePoint Saturday – Europe. This is EXTREMELY helpful!

I’m posting an image of the table below, but you can create your own for your event, too. The only thing missing is the HTML code to embed the table, but hey, I’m not complaining.

SharePoint Knowledge Management � A Simplified Academic View � Part 1

Adam BuenzGuest Author: Adam Buenz
ARB Security Solutions

Knowledge has always been something that makes the economy around the world better. There is plenty of competition out there and the fact that more than 81% of all the organizations around the USA and Europe continue to look for more effective ways to manage all the various aspects of their businesses has a great deal to do with that. They are all in agreement that without effective management in place the business isn�t going to be as competitive as it should be.

It doesn�t matter what type of business you are talking about or even how large it happens to be. When it comes to the creation of goods, services, or even physical labor and production this is an element that deserves to get plenty of recognition. In fact, there are many experts out there as well as scholars that continue to do research on this very topic. They want to find out how a business is able to really benefit from such information.