How to use SharePoint Lists in a web page

SharePoint creates allot of "Lists".  These are sort of like a large spreadsheet with rows and columns.  The columns contain specific data related to each row.  For example; a List for Departmental Personnel might have several columns - the first of which might be employee USNHID.  There would be the name of the employee, the department they belong to, their office phone number, etc.  Providing specific information on each employee.

This list can be included in a web page.  The benefits of doing this are primarily the maintenance, as the data is then maintained in the list rather than a table in a web page - so it is much easier to keep things sorted and organized correctly.

For the user - a big benefit is the ability to select different information from each of the columns - similar to what the "Data-Filter" in Excel does.

None of these filters are permanent nor will they affect any other user - they are available to you during your current session and will be gone when you leave the page.

We will use the USNH FS Who to contact list as an example.

These pages appear to be a normal HTML table.  The headings are formatted in the same way as other tables and data is listed as you would expect.


When you hold your mouse over one of the headings - it will change colors and you will then see and down arrow for a drop-down list.


Select the drop-down list and several options will appear.

DropDownListValues.jpgChoices for sorting, clearing the filter out or you can select a specific item from the list


 Select and item you wish to see - then it will be selectedSelectedValues.jpg

The "funnel" image will appear by the name of any column that is currently filtered.  If there were more than one item with this description - all items would now be displayed.

The filter can be quickly cleared when needed

ClearFilter.jpgThe dropdown lists can also be used to sort column values either by ascending (from 0 - 9 and A - Z) or descending (Z - A and 9 - 0


When selected - the list will be sorted as indicated.

SortedColumns.jpgAgain, there is an indicator on any columns that are sorted.

SortedIndicator.jpgThis utility is very helpful in many areas and we are using this type of listing in several areas of the USNH FS web site.

Last Modified: 8/4/2014 6:09 PM
Last Published: