jQuery Sliding doors image links loaded via AJAX from SharePoint lists.asmx web service

jQuery Sliding doors image links loaded via AJAX from SharePoint lists.asmx web service

How would you like to display a SharePoint links list with this cool Sliding doors image effect!

There are a lot of amazing Html5 & CSS3 image effects out there and most of them are free and simple to deploy, but unfortunately in the company I’m working for we are using explorer 8 which does not support these effects.. that’s why I looked for a jQuery image effect that will be supported by IE8 but also free to use, and trust me it wasn’t easy to find a cool one that my client will like, but eventually I found this cool Sliding doors effect created by Kevin Liew

After making sure this effect was supported and running smooth in my designated browser I needed to make it work with my SharePoint Links list, usually to do this I would fetch my list items using the client object model syntax I’ve grown accustomed to and used before for example in the solution I described in this post.

But when I tried using that syntax in this scenario my image links loaded on my SharePoint page to slowly, so instead I used a different approach that is a little bit less friendly but still easy to use, by writing a SOAP envelope and using jQuery.AJAX to load my list items directly from the lists.asmx SharePoint web service I managed to fetch my list items much faster, here’s a short and clear explanation I found written by Jignesh Rajput  on the subject, So in order to deploy this client-code solution in your SharePoint site, follow these simple steps (no server-side access or major code changes required!) –

  1. create a SharePoint list with the following columns:
    Title, URL, FrontImage (Hyperlink), BackImage (hyperlink), Order (text).
  2. Add some items to know if your code works.
  3. Copy the code from the bottom of this post into a content editor web part on your page.
  4. Change the url value in the code to your own SharePoint site url, make sure you have the /_vti_bin/lists.asmx at the end of it, and open the url in your browser to make sure you have access to your web service.
  5. Change the list name in the code to your own, also make sure the list column names are identical to yours, and pay attention to the fact that all the names are case-sensitive.
  6. Basically the code should now work, you can change the query inside the SOAP envelope to better suit your needs, also it’s advised to download the external jQuery.js and jquery.easing.1.3.js, upload them to a SharePoint library and update their reference in the code.
  7. By the way I made a few adjustments to the original Sliding Doors jQuery effect, so it should work a bit different from the original demo presented on this page.
  8. Finally, Here’s my code, enjoy! –

{code type=Html}


SharePoint 2010 Search list using OOTB Text filter Web Part

SharePoint 2010 Search list using OOTB Text filter Web Part

The SharePoint Text filter web part is simple to deploy as a search input for your SharePoint list or library view, you simply add it on your view’s page, connect it to your data view web part and choose the column to filter by, neat and easy, but the disadvantage of it all is that your search has to be exact and case sensitive which makes it not very useful.

The solution – follow this simple steps to configure your text filter with a little help from SharePoint Designer that make it work as a search box on your list view without the disadvantages described above:

  1. Open your site in SharePoint Designer –

  2. In SharePoint Designer go to Lists and Libaries and click on the list or library you wish to add a search view for –

  3. Create a new view for your list and call it “Search”.

  4. Click on your new view’s name in order to open it’s page in design mode –
  5. In desgin view click on the div above your list view, and then on the desginer ribbon go to the “insert” tab, click on the “web part” button, and choose to insert the “text filter” web part from the “filters” folder on to your page, just above your list view –

  6. Left click your list view and then look for the “Parameters” on the “List View Tools” options tab on your ribbon and click it –

  7. Create a new parameter, you can leave the default options and the default name value “param1” as is and click OK –

  8. Click the list view tools “Filter” button –

  9. Create a filter stating that the column you want to use as a search field contains your parameter –

  10. Right click your text filter web part and choose to add a connection –

  11. Choose “Send Filter Values To” from the combobox and click Next –

  12. Click next to connect to a web part on your page –

  13. Choose “Get Parameters From” as your target action and click next –

  14. Click the your parameter name and your text filter name and then click next –

  15. Click finish and then save your page –

  16. Open your page and search your column using partial text and uppercase or lowercase, you should anyway get search results.

  17. You can also create filters that are more complex, and search through a number of columns at once using this solution, hope you find this useful!