Recently I was tasked with creating a two-tiered announcement list system for a client running SharePoint Foundation 2013. They needed…
- to run approval workflows against some lists, but not on others
- to selectively aggregate items from a list on the home page and lists in departmental sites
- to display those items in a specific format
- and the ability for a local admin to be able to customize the pool of items returned without any special training
Here’s what we ended up with. Basic blog entry-type display that combines selected items from two lists (for this example) on two separate sites.
Normally I might use the Content Query Web Part, but…
This is a Foundation install, so that’s ruled out. And frankly, setting up the query to return the specific results I want would be less than straight forward for my local admin, and I’d have to create a custom template to display the data as my client requires. XSL isn’t a common skill with most of my clients either, so any changes would have to be made by me. The CQWP then fails on requirements 2, 3 and 4 anyway.
SP Services does exactly what I needed
Luckily though we have SP Services in our tool kit! If you’re not familiar with it, SP Services is a JQuery library that exposes all the SharePoint Web Services, making them easier to access and use. It’s a very handy library and one you should familiarize yourself with.
Having said that, SP Services is not a new tool, but I still find it useful for a number of tasks, particularly when working with Foundation’s limited features.
Anyway, using a little SOAP and SP Services, we can…
- easily access all of our lists across all sites
- combined with list views, easily aggregate selected items from those lists into departmental sites
- easily customize the display format
- and create a setup that allows for local site owners to easily change results without having to understand queries or XSL
We’ll implement this on the page by adding two Content Editor Web Parts (CEWP). To one we’ll add the script, while we’ll use the other to create the tag element to which we’ll pass the HTML we generate in the script.
How to do this step-by-step
Things you’ll need…
- The three text files attached to this post. SOAPCallsToList.txt is the script. HTML.txt is the template for the element we want to create on the page. CSS.txt contains the styles used for the output.
- A list view that sorts and filters items as you want them displayed in the aggregated feed.
Tools you might want…
- The moment.js library which can be found here. This handy library allows you to easily manipulate dates and times.
Edit the script with your list, view ID, and fields.
2. To get the [VIEW ID]…
- Go to the list and click on the appropriate view.
- Modify the view and copy the URL.
- Click Cancel.
- Go to http://meyerweb.com/eric/tools/dencoder/, paste the URL in the gray box, and click Decode.
- Copy everything inside the curly brackets after “view=”. You should end up with something akin to “BF40EFB6-C7CF-4AA2-8CAF-6E5EQE437C96”.
- Go into the list’s settings and click on the field in question.
- On the page you’re taken to, look at the end of the URL and note the name after “field=”.
- If you’ve got any special characters in the name, copy the URL and head to http://meyerweb.com/eric/tools/dencoder/ again.
4. Find the “/_vti_bin/lists.asmx” URL and change it accordingly. If you’re running the script on a page in the site that holds the list, then leave it as is. Otherwise, change the URL to a format like “http://mydomain.com/sites/mysite/_vti_bin/lists.asmx”.
6. Upload the two text files and the moment.js file (if you want to use it) to your Site Assets library. Be sure to change the path to moment.js at the top of the script if you need to.
Add the script and markup to a SharePoint page.7. Add a CEWP and edit it.
8. In the Content Link field, add a link to SOAPCallToLists.txt. In the Appearance section, set the Title to “SOAP Calls to Lists”, and set the Chrome Type to “None”.
9. Add another CEWP and edit it.
10. In the Content Link field, add a link to the HTML.txt file. In the Appearance section, set the Title to “HTML”, and set the Chrome Type to “None”.
11. Save the page.
Add our custom styles to your CSS file12. Assuming you have a custom CSS file for your site, the final step is styling the list items you’re returning. We added styles to the HTML we generated with the script to make this easy.
And we’re done!
Depending on your styling, you should now see something more or less like the image at the top of this post. However, just in case that’s not what you’re seeing…
If you’re still seeing a blank page after adding the script and html, here are a few common things to look for.
- Are the links in the CEWPs correct? If you edit them again, click on “Test Link” to make sure you’re actually hitting the text files. If they’re correct, you’ll see the text of your file displayed in the browser.
- Is the View ID correct? Follow step 2 above again and make sure you’ve copied the correct ID.
- Is the lists.asmx URL correct? Copy your URL and paste it in the browser to make sure the page loads. You should see a page with a list of services on it.