SharePoint Stuff

So this is a real world example of something I was asked to do recently. There was an existing a – z page which I was tasked with updating, so I’ve written about how I did it in both classic and modern SharePoint…

A classic SharePoint a – z page

So this is a real-world example of something I did recently, there was an existing a – z page which I was tasked with updating…but as we are in classic SharePoint my options were somewhat limited.

I decided to create a simple a – z page using anchor links to jump to content from a single naivgation menu at the top of the page.

This example works in SharePoint 2010 or SharePoint Online if you’re still dealing with classic sites and publishing or wiki pages.

Here’s how I did it:

1. What’s needed
2. Create the navigation links
3. Add / configure each letter topic web part
4. Add tables to the web part
5. Create a hidden anchor image
6. Add hidden anchor image to heading table
7. Add link to hidden anchor image
8. Create the top of page bookmark
9. Update a – z topic navigation with bookmarks

What’s needed

• Classic SharePoint publishing site or wiki site
• A blank page
• Content editor web part
• An image to use as the anchor point

1. Create the navigation links

Start by creating a new page in your SharePoint site then just create an a – z menu by adding the text below:

<div style="text-align: left; font-size: 14pt;">A - B - C - D - E - F - G - H - I - J - K - L - M - N - O - P - Q - R - S - T - U - V - W - X - Y - Z</div>

2. Add / configure each letter topic web part

Next we need to add a content editor webpart to the page, then configure the webpart to display nicely on the page:

• From the ribbon > Insert > Web Part > In Media and Content > Content Editor
• Press Add
• Hover over the webpart drop down arrow to the right of the page > press the drop down > Press Edit Web Part

These are the properties under appearance I set for each letter topic web part:

• Title: give your webpart the letter topic name (for example: A)
• Width: add a fixed width to your webpart (I used 755px as it lined up nicely with the a-z navigation above)
• Chrome: none (stops the webpart having a title or border)
• Press Apply & OK

3. Add tables to the web part

Now we need to add two tables to the webpart:

1. Table for the main letter heading
2. Table for the link contents and back to top button

I edited the source code to create a stylised table header for my main letter heading. Below is the HTML I used to create both tables, with steps for how to add it into the webpart and change the relevant bits.

<table width="100%" class="ms-rteTable-0 ms-rteThemeForeColor-1-0 " cellspacing="0" style="font-size: 1em;">
   <tbody>
      <tr class="ms-rteTableHeaderRow-0 ms-rteThemeForeColor-1-0">
         <th class="ms-rteTableHeaderFirstCol-0 ms-rteThemeForeColor-1-0" rowspan="1" colspan="1" style="padding: 10px; text-align: left; font-family: "arial"; font-size: 12pt; background-color: #4f29ff;">
            <span class="ms-rteThemeForeColor-1-0"><span><strong>A​ </strong></span>
               <br/></span></th>
      </tr>
   </tbody>
</table>   
<table class="ms-rteTable-0  " cellspacing="0" style="width: 100%; font-family: "arial"; font-size: 11pt;">
   <tbody>
      <tr class="ms-rteTableEvenRow-0" style="font-family: "arial"; font-size: 11pt;">
         <td class="ms-rteTableEvenCol-0" rowspan="1" colspan="1" style="width: 500px; font-family: "arial"; font-size: 11pt;">
            <span>
               <a href="/SitePages/a-z-example.aspx">A test link 1</a></span></td> 
         <td class="ms-rteTableOddCol-0" rowspan="1" colspan="1" style="font-family: "arial"; font-size: 11pt;">
            <a href="/SitePages/a-z-example.aspx">A test link 2</a></td>
      </tr> 
      <tr class="ms-rteTableOddRow-0" style="font-family: "arial"; font-size: 11pt;">
         <td class="ms-rteTableEvenCol-0" rowspan="1" colspan="1" style="width: 500px; font-family: "arial"; font-size: 11pt;">​<a href="/SitePages/a-z-example.aspx">A test link 3</a></td> 
         <td class="ms-rteTableOddCol-0" rowspan="1" colspan="1" style="font-family: "arial"; font-size: 11pt;">
            <span>​</span><span><a href="/people/safety/Pages/Services.aspx">A test link 4</a></span></td>
      </tr> 
      <tr class="ms-rteTableEvenRow-0" style="font-family: "arial"; font-size: 11pt;">
         <td class="ms-rteTableEvenCol-0" rowspan="1" colspan="1" style="width: 500px; font-family: "arial"; font-size: 11pt;">​</td> 
         <td class="ms-rteTableOddCol-0" rowspan="1" colspan="1" style="font-family: "arial"; font-size: 11pt;">​</td>
      </tr> 
      <tr class="ms-rteTableFooterRow-0" style="font-family: "arial"; font-size: 11pt;">
         <td class="ms-rteTableFooterEvenCol-0" rowspan="1" colspan="1" style="width: 500px; font-family: "arial"; font-size: 11pt;">​<a href="#az_home">Back to top</a></td> 
         <td class="ms-rteTableFooterOddCol-0" rowspan="1" colspan="1" style="font-family: "arial"; font-size: 11pt;">​<br/></td>
      </tr>
   </tbody>
</table>

• With the web part in edit mode, from the ribbon under Format Text > Press Edit Source
• Paste the above code into this window
• Press OK

You should end up with something like this:

Now you will likely want to update the colour in table 1 and change the links in table 2.

• In the web part in edit mode > press Edit Source
• Find the following line background-color: #4f29ff and update the hex value to match your own
• Press OK
• Left-click next to one of test links > delete it and add your own and use Add Link to link it to content of your choice

4. Create a hidden anchor image

I don’t want each letter of the main letter heading table to look like a hyperlink, so I created a small square png image that matches the colour of the main letter heading table. Then just upload the image into the site collection and add it into the heading table to create my anchor.

• Open Paint, create a small square (10x10px)
• Use this hex – rgb site to get the rgb value of your hex code > change the colour of your image to match
• Save as a png file, call it something like “anchor2” > upload it into your SharePoint site collection
• Once uploaded, make note of the full path of the image

5. Add hidden anchor image to heading table

Next, we will add the anchor image into our A table then create a bookmark or anchor link.

• Back to the web part in edit mode > click in the main letter heading table next to the A letter and press space once or twice
• Insert > Image > From Address
• Paste the full image path from earlier into the address field

6. Add link to hidden anchor image

• Hover next to the A until your mouse cursor turns into arrows > select your image
• Insert > Link > From Address
• Copy and Paste the URL for the a-z page from the browser > Press OK
• In the link ribbon, under properties create a bookmark name for the letter topic (for example: safety_a)

• Click back into our main letter heading table, then under Format > Edit Source
• In the code, look for the path of the anchor image > then at the end of the style block add border: 0px;
• This will remove the hyperlink border added to our hidden anchor image 🙂

7. Create the top of page bookmark

As the A topic will not need to jump to a point within the page, we can use this as the top of the page for our “back to top” links to navigate to.

• Highlight the letter A from the navigation links at the top of the page
• Press insert > link > from address
• Under URL, use the pages URL > under Bookmark add “az_home”

The back to top link from the example code above is configured to use the “az_home” anchor link and will now jump to the top of the back when clicked.

8. Update a – z topic navigation with bookmarks

• Using G as the example, scroll back up to the letter topics section, highlight the letter in question (G) and press Insert > Link > From Address
• In the URL field add a hash (#) and then the bookmark name for the letter topic you created earlier (for example: #safety_g)
• Save the page and test your a – z 🙂

With that we are done! I know it’s not the easiest thing in the world to step through and create, but once you have the first one or two topics configured the rest is pretty straightforward – and I think it looks awesome 🙂