Glossary webpart using DataView

This webpart will allow:  

  • Alphabetical Filtering: Here we pass Alphabet as Query string to filter dataview. But when we open allitems.aspx we cannot pass query string or need all items to display. For this we have to do a trick as mentioned below.
  • Display all by default : We will create a new column which will have value as “A#” i.e. we concated # with alphabet. So now we will not make filter as if Title Starting Alphabet = QueryString(Alphabet).

We will use Title Starting Alphabet# Contains QueryString(Aplhabet)

This will make sure that # is always there in every querystring. Also we will keep “#” as default value of Query string. This will make sure that if nothing is passed in Query string , it will take # as parameter. As # contains in every alphabet, all items will be shown.

Glossary Webpart
Glossary Webpart

Step 1:

Create two calculated columns in List.

This column is for sorting purpose.

Title: StartingAlphabet

Calculated column formula:   =LEFT(Title,LEN(Title)-(LEN(Title)-1))

Display as :                                                Single line of text

This column is used for filtering.

It is same as StartingAlphabet but only adds “#” with it. It is used for getting all items if nothing is passed in query string.

Title: FilterAlphabet

Calculated column formula:   =LEFT(Title,LEN(Title)-(LEN(Title)-1))&”#”

Display as :                                                Single line of text

Step 2:

Add Parameter as shown:

Remember at add # as default value.

Step 3:

Sort using Starting Alphabet.

Step 4:

Add Filter to dataview   Step5:

Add following html tags on top of Dataview webpart.

<div style="padding-left: 15px;">

<a href="AllGloss.aspx">All</a>

<a href="AllGloss.aspx?Alphabet=A#">A</a>

<a href="AllGloss.aspx?Alphabet=B#">B</a>

<a href="AllGloss.aspx?Alphabet=C#">C</a>

<a href="AllGloss.aspx?Alphabet=D#">D</a>

<a href="AllGloss.aspx?Alphabet=E#">E</a>

<a href="AllGloss.aspx?Alphabet=F#">F</a>

<a href="AllGloss.aspx?Alphabet=G#">G</a>

<a href="AllGloss.aspx?Alphabet=H#">H</a>

<a href="AllGloss.aspx?Alphabet=I#">I</a>

<a href="AllGloss.aspx?Alphabet=J#">J</a>

<a href="AllGloss.aspx?Alphabet=K#">K</a>

<a href="AllGloss.aspx?Alphabet=L#">L</a>

<a href="AllGloss.aspx?Alphabet=M#">M</a>

<a href="AllGloss.aspx?Alphabet=N#">N</a>

<a href="AllGloss.aspx?Alphabet=O#">O</a>

<a href="AllGloss.aspx?Alphabet=P#">P</a>

<a href="AllGloss.aspx?Alphabet=Q#">Q</a>

<a href="AllGloss.aspx?Alphabet=R#">R</a>

<a href="AllGloss.aspx?Alphabet=S#">S</a>

<a href="AllGloss.aspx?Alphabet=T#">T</a>

<a href="AllGloss.aspx?Alphabet=U#">U</a>

<a href="AllGloss.aspx?Alphabet=V#">V</a>

<a href="AllGloss.aspx?Alphabet=W#">W</a>

<a href="AllGloss.aspx?Alphabet=X#">X</a>

<a href="AllGloss.aspx?Alphabet=Y#">Y</a>

<a href="AllGloss.aspx?Alphabet=Z#">Z</a>

</div>

That’s it!

7 thoughts on “Glossary webpart using DataView

  1. So strange… this all makes sense. But when I go to implement, as I’m setting up the second column, FilterAlphabet, I’m very careful to make sure all is in order (name, type, default value is calculated value of =LEFT(Title,LEN(Title)-(LEN(Title)-1))&”#”) and SharePoint complains…

    “Sorry, something went wrong
    The formula contains reference(s) to field(s).
    Technical Details
    Learn more about the syntax for formulas.

    Troubleshoot issues with Microsoft SharePoint Foundation.

    Correlation ID: 98dd619d-70e1-3000-a487-511918325444

    Date and Time: 2/22/2016 5:09:41 PM”

    So simple — but what’s amiss here? The creation of the first column went just fine! (I went through and did the other steps, as much as I could, then came back to this with fresh eyes and… ??)

    1. Hi Amy,

      I think if first column is created fine, then in second it might be the quotes “” that is creating problem, as I tried it again by copying it and gave same error. Deleted the quotes and added back by typing and it worked.

  2. Aahh, I see. I’ve just tried to do this, and it’s greyed out – so I’ll have to speak to the site owner, to see if I can increase my access rights.
    Thank you so much for your help, Deepak!
    Hannah 🙂

  3. Hmm I think I know your problem.
    You need to detach your page from page layout in SharePoint Designer and then right click and Edit in Advance Mode. You can add the html tag there.

    Or for content editor webpart, copy the html tags, paste in a text (name it glossary.txt) and upload it one of the document library. Then you can link that glossary.text file in content editor webpart.

  4. Thank you for your quick reply!
    That’s what I’d been doing – I’ve tried again now, and when I add the code to a content editor, it looks like it’s worked fine. I do get a message saying: “Warning: The HTML source you entered might have been modified.” When I go back into the source code, the what’s there is nothing like what I put in – I understand that it’s linking it to my pages, but when I save the changes and click on one of the letters, I get an HTTP 404 error message.
    When I go back using the browser button, the changes I made have disappeared.
    It’s possible I’m missing something really simple here, but it’s driving me crazy!
    Thanks in advance,
    Hannah

  5. Hi Hannah,

    HTML Tags should outside the webpart tags. Your page will look like following:

    a href="”AllGloss.aspx?Alphabet=Y#”" rel="nofollow">YZ</a

    WebPartPages:WebPartZone id="g_196B615798934456897DCA8C6BF18E62" runat="server" title="Zone 1"
    ZoneTemplate
    WebPartPages:DataFormWebPart runat="server" Description="" ...

    Or you can use Content Editor webpart and add html tags in the source.
    For 2010: http://virtualizesharepoint.com/2011/05/14/how-to-edit-source-in-content-editor-web-part-in-sharepoint-2010/

    For 2007: Source Editor: You can use the Source Editor to enter or modify HTML source code. The Source Editor is a plain text editor and is intended for users who are familiar with HTML syntax.

    Let me know if still problem persists.

  6. Hi Deepak,
    This is EXACTLY what I need to do, thank you! Only problem is, I’m falling at the last hurdle – I can’t seem to get the HTML tags from step 5 into my code – where exactly should they go? The code keeps getting rejected, I’m sure I’m just trying to put it in the wrong place…
    Can you help please?
    Thanks!
    Hannah

Leave a Reply to Deepak Virdi Cancel reply

Your email address will not be published. Required fields are marked *