SharePoint 2010/MOSS: Searching a List and Viewing the Searched Item, all using Client Side Coding via SharePoint Designer

Its been a while wrting a technical blog post due to the reason that its been a while doing something really technical ;) and exciting and worth mentioning. Now that I have something to write so here we go.

Context:

Our client required an “Out-of-the-Box-Solution for SharePoint 2007, to search users stored in a custom list. Precisely a  textbox and a search button was required on the interface and upon entering the keyword in the textbox and commanding search, the user is shown the nearest search results. Then upon selecting one of the shown result set, the user is redirect to another page showing a preview of the searched user profile.

 Here our client explicitly asked for an out of the box solution as they were in the process of migrating to SharePoint 2010, since custom webpart could possibly becomes an additional overhead for the migration process itself.

Solution 

Now after googling for a couple of hours, two solutions struck my mind:
  • Simple Solution: Using Text Filter webpart on a custom list. A very  dumb solution where a filter is applied on one of the columns of a list and one has to enter an exact keyword in order to the get some result which is in most of the situation impossible. So to hell with that ;)  
  • Robust Solution: Consuming List.asmx webservice from the client side, traversing the results and then showing the relevant result if any.
I was more interested in the "Robust Soluton" and was able to accomplish that in a matter of one and half day. 

Steps of Construction:

My final solution had the following building blocks:
  • Query string (URL) filter
  • Content Editor Webpart 
  • JQuery
  • Ajax call to SharePoint Web Service
Remeber that SharePoint 2007 standand does not have Query String Webpart but still one can find a work around. Secondly I think this way can be applied in SharePoint 2010 as well. So here how I did that: 
  • I created a custom list named "User Profiles" with the columns Title, First Name, Last Name, User Id and Photograph. I also added some data to it.  
  • Now using SharePoint designer, I created a dataview of that custom list  on a seperate Webpart page called "SearchResults".
  • Then I set up a query string parameter on one of the columns of the dataview. The tutorial for that can be found here. Thanks to Laura for that. 
  • Then I placed a content editor webpart on another webpart page (it can be any page even default.aspx) and added the following script to it:

A Little About the Code

Well I don't own this code. Although I made certain changes according to my need. I would like to thank John Tielen for doing an excellent piece of work. The original post can be found here
  • After adding this code, make sure that you have an internet connection as the JQuery library is being loaded from googlecode.com. Although it is safer to host the library in your document library in a seperate folder and then adding the URL to the src in script tag.
  • The main JQuery function that is doing the entire job is attached to the button click event. Here the  SOAP envelope message is constructed. 
  • I wrote this code for my custom list i.e. "Users Profile" but you can change the name if you want to the data being fetched from your list. 
  • Then comes the JQuery’s ajax function where the SOAP envelope to the web service is being posted.
  • After that web service comes back with a response and then the processResult method is called which handles each of the element of the XML. 
  • For every row element, a new li HTML element is added to the ul element with ID tasksUL.
  • Note that I am constructing a tag for every li HTML element which redirects to our SearchResults.aspx page that has the dataview for "UserProfiles" list. setting the "title" column as query string .  
  • Also note that, the response XML is matched with the keyword entered in the searchbox.
  • The nearest results are shown under the searchbox in the form of URL links.
  • Upon clicking the  URL link, the user is redirected to the dataview of the custom List using the query string in the URL. 
  • The following screenshots further clarify:


Some Words of Advice:

  • I think there is no way we can debug this code if something goes wrong (let me know if you have any). The only hope of success is Firebug in firefox where the console says it all. It shows the posted data, the response and the errors in the JQuery as well. 
  • Internet Explorer never ever worked me. So I don't use it anymore. But even using Chrome does not help as it blocks the JQuery calls. So the last resort was Firefox where things work pretty decent. 
  • Query String webpart did not work for me whenever I had some space in the data. 
  • Be careful about the List.asmx and JQuery URLs.    
This all from my side hope this help a bit. 
Cheers
Vaqar Hyder

E: vaqar.hyder3567@gmail.com

A:

Siebenbürgen Straße 2/1, Korntal-Münchingen, 70825, PK

Hire me on Freelancer.com

Comments

Post a Comment

Popular posts from this blog

SPFx: Develop using SharePoint Framework without Installing all the dependecies.

Image
SharePoint Framework (SPFx) has been around for more than 5 years now with being Generally available since Feb 2017.  In the recent times, its been possible to develop webparts for SharePoint on-prem as well using SPFx and with that it is getting harder to maintain multiple versions of required toolchains. e.g. Node. For M365 you can use the latest version of SPFx but probably you know, if you aim to develop webparts for the SharePoint Server 2016 platform, for instance, you need to use the SharePoint Framework v1.1.0 due to the server-side version dependencies. So yet another challenge is using the correct version of the SPFx and Nodejs for the particular project . Although I personally used to like Node Version Manager which lets you manage multiple installations of node.js on a Windows computer but still one needs to isolate SharePoint Framework dependencies if you are targeting multiple platform from on PC. 2nd Problematic scenario begins when you start developing SPFx extensi...
Read more

SharePoint Online: Elevated Permissions....with love

Image
Remember the good old days! when using RunWithElevatedPrivileges(SPSecurity.CodeToRunElevated), in the SharePoint server-side object model, would let us run our code (Full trust code) with full control i.e. granting us higher permission (as System Account) and letting us performs tasks that waren't permited to do in current user context.  Now, that, we have SharePoint addin and SharePoint online webparts, one still wonders if there is still a way of achieving that. Since there are use cases where a user needs a higher permission, for instance.  Changing a status of a field in a list where the current logged in user has read only permission.  Reading member of a SharePoint group.  In Workflows  like SharePoint Designer workflow you used to have App step, in Nintex workflow you have elevated permission and in MS Flow Impersonation is possible using connectors in Flow triggered by HTTP request can run under System account as show in the video below:  Other wa...
Read more

Powershell: Filling up an Existing Excel Sheet with data from SQL Server

Situation: The client required to have data from their SQL Server 2012 Database filled in to an existing Excel Sheet. This sheet had a table with around 40 columns of which 12 where to be filled by us and rest from different departments. I tried different solution for that since the requirements were not initially clear. Forexample OPENROWSET was tried. In this regards this link really helpful. Although this requires few configuration to be made on the server or to install e.g. ACE.OLEDB driver on server which was not possible in our case. So we decided to write a Powershell script and access SQL Now about the script: Take the file TestExcel.xlsx from C:\Temp folder Create its copy with the current date appended to its name.  Start reading the Excel file from Sheet "Specified Sheet Name" From Columns 1, it will take the name of the system.  Based on the name fill the excel sheet by executing the queries, here are the columns that are going to ...
Read more