Create a web part to display filtered list item

Question

I've got a Contact list with info about departments in our organization. The list is at the department level, not person level. It has the following columns:

Department
Title ["Contact Helpdesk:", "Contact Accommodations:", etc.]
Address
URL
E-Mail
Phone
Opening Hours

I'd like to create a web part for this list so it can be dropped on any page within our SharePoint 2010 site and then filter it on a specific department. It would then show the contact info for that department as something like this:

Contact Helpdesk:

Room 123, ITC Bldg., 3rd Floor
http://www.oursite.org/helpdesk
[email protected]
999-456-1234

Opening Hours:
Sunday - Thursday: 10 - 5

Do I do this in SharePoint Designer? or InfoPath? It needs to be a reusable part we can drop on various parts of the site. As a newbie, I'm lost in the HTML/XML of the Designer program and don't know how to format the elements so they show the way I need. The list doesn't need any paging; just the elements for that one item that's been filtered.

Thanks.

Answer 1

I did something similar to this. What I had was a list, Department Contact, under each Department site. It was just a custom list that I saved as a list template (easy to recreate across all departments).

I then created a Data View Web Part in Designer that linked to the list. Admittedly, I used a table format for the output because it's just easier (I know...that's a no-no). So, a snippet would look like this:

For more help with XSL, check out W3Schools.org. Also, if it's a little overwhelming looking at the XSL in SPD, try Visual Studio or another XSL editor (a bunch of freebies, I'm sure). Copy and paste back and forth.

The other thing I did to the DVWP is change the Data Sources XML to reference by ListName instead of ListID. By doing this, it will allow you to reuse the web part on any site with a list named "Department Contact." To do this:

• change Name="ListID" to Name="ListName"
• change ParameterKey="ListID" to ParameterKey="ListName"
• chane DefaultValue="[GUID]" to DefaultValue="[ListName]"

Screen shot of DataSources element: https://i.sstatic.net/OEe5c.png

Once this is done, save the Web Part to the WP Gallery and now it's usable across the Site Collection.

Answer 2

I wouldn't use either Designer or InfoPath; instead, I would use a Content Editor Web Part along with a jQuery script to format the data the way you want it on the page.

The steps would be:

1. Add the jQuery script library (file) to a document library on your SharePoint site. jQuery can be downloaded here.
2. Add a Content Editor Web Part to your page
3. Set the source of the content editor web to the DispForm and ID of the specific list item you want to display
4. Craft a jQuery script to modify the display so that the list columns appear the way you want them.
5. Save the jQuery script to the document library and link it to your HTML, or optionally insert it inline. It will be easier to maintain if you link it and store the file elsewhere.

Although steps 4 and 5 seem daunting, jQuery is very easy to learn if you know a little JavaScript already. There are many examples on the internet of how to use jQuery, and many of its capabilities work well with SharePoint UI coding.

I'll also mention that Internet Explorer has a F12 debug mode useful for inspecting page layout. I used this to figure out the structure of pages, which you will need to do to figure out how the DispForm elements are presented. Even if you're not a regular IE user, I think you'll find it useful to employ IE for your coding tasks here.

Answer 3

Where and how you want to manage the content should dictate where you store the list with the data. It can either be centrally stored for all sites or distributed in a list per site.

Once you have the list(s) in place, I'd recommend using a DVWP to display the data. If you store the data in a centralized list, you can add a column for the site URL and filter you DVWP accordingly. You can also store the XSL which drives all of the DVWPs centrally in a separate file to facilitate easy across-the-board changes to the output format.