Create an A-Z quick filter web part

If you have a list, like a corporate phone directory, you may start thinking “Man, I wish I could sort through these by the first letter of their name”.  If you weren’t thinking that, it’s ok.  I was so that why I decided to post this.  Follow these steps and your new web part will be up and running in no time.

  1. Open the list that you want to add the A-Z filter to (my case “Employee_Phonebook”)
  2. From the “Employee_Phonebook” tool bar, click “Settings –> Create Column”
  3. Name the column “A-Z” or whatever name you would prefer
  4. Select “Calculated” as column type
  5. Under Additional Column Settings, select “Title” from Insert Column and type =LEFT([Title],1) into Formula. Keep all default settings and click “OK”.  Note: “Title” is the name of the column you are targeting for this list (i.e. Last Name)
  6. You will see new column called “A-Z” and has the letter “A” value in them already.
  7. From the Site Actions tab, click Edit Page
  8. Click Add a Web Part and add the “Content Editor Web Part”
  9. Modify that Content Editor Web Part and click the “Source Editor” button to add the following code.
    ** Note: You will need to modify the URL’s below to reference your site.
<P align=center><STRONG><FONT size=5>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=A" target=""><U>A</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=B" target=""><U>B</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=C" target=""><U>C</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=D" target=""><U>D</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=E" target=""><U>E</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=F" target=""><U>F</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=G" target=""><U>G</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=H" target=""><U>H</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=I" target=""><U>I</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=J" target=""><U>J</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=K" target=""><U>K</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=L" target=""><U>L</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=M" target=""><U>M</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=N" target=""><U>N</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=O" target=""><U>O</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=P" target=""><U>P</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=Q" target=""><U>Q</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=R" target=""><U>R</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=S" target=""><U>S</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=T" target=""><U>T</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=U" target=""><U>U</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=V" target=""><U>V</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=W" target=""><U>W</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=X" target=""><U>X</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=Y" target=""><U>Y</U></A>
 <A title="" href="https://yoursite.com/Lists/Your List Name/AllItems.aspx?FilterBook=Z" target=""><U>Z</U></A>
 </FONT></STRONG></P>

 

  1. Click “Add a Web Part” and add “Query String (URL) Filter”
  2. Enter a name for “Filter Name” then enter “FilterBook” into “Query String Parameter Name” then click “OK”
  3. Now from Query String (URL) Filter, select Edit –> Connections –> Send Filter Values to “Employee_Phonebook” and when the Popup appears select “A-Z”
  4. Click the Finish button and your done

Your finished product will look similar to the image below

12 Replies to “Create an A-Z quick filter web part”

  1. I’ve tried to create the A-Z Filter but haven’t been able to get it going…
    When I copied the Javascript in to the Content Editor webpart it duplicate the URL and comes up withtarget=””"”>A

    any thoughts
    Joe

  2. Hi Eric,
    I created column and named A-Z, I set the formula, it works. I modified the url. I added Query String (URL) filter, made the connection, but I have error. When I click any letter, it opens in a new window. It may be url, but the url itself works fine in another page!

    Thanks

  3. 1) The HTML code is using two types of quotation marks. The curly one is not likely to work. Just use Notepad to reaplce all of them with normal quotation marks.

    2) Eric, I am trying to use this solution for a document library with many subfolders. The filter works great for the first filtering, but then also filters the subfolders. So, for example, if I click “A” to show all of my root-level folders, all of the subfolders are then filtered by the same parameters, only showing subfolders that beging with “A”. Any idea on how to adapt this to work in this scenario?

    Thanks!

  4. Eric. Can this be done on a SP2013 wiki ? I have issues with the last line of your guide (connection of the URL filter)

  5. This works in SP2013 the same way when editing the list page. I tried to setup the connection on a wiki page but it will not allow the query string url connection and I also tried setting up a basic page to handle connection but got the same results. From what I see, you have to create the connections on the list itself or this will not work.

  6. I am trying to use this solution to filter a list view webpart on a page. I have changed the URL as instructed but when I click on the letter M it takes me back to the actual list and not filtering it on the page. Not sure how to fix this?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.