Tracy van der Schyff

#Office365Challenge – For any SharePoint lover (who like me, cannot code from scratch to save their life), the loss of the Designer View in SharePoint (Designer) 2013 was devastating, to say the least. A bit like the Matrix without the sunglasses. I used this when creating image maps (solid image with multiple hotspots / clickable areas). Why did they remove this? “Compared to current versions of Internet Explorer, Design view is an older technology that does not support many new HTML5 and CSS tags.” All true, image maps themselves were as responsive as Vista on 512mb of RAM, and designing for a specific resolution was very challenging.

However…. I managed to create many beautiful pages for navigation without ever ‘creating my own code’. This post will show you how to accomplish this without the Designer view in SharePoint Designer.

This post will cover the following steps:

1. Create the Image in PowerPoint
2. Create the Hotspots (hyperlinks) in Excel
3. Create the Web Page (code)
4. Insert the code on SharePoint Page

Step 1 – Create the Image in PowerPoint

I’ve used SmartArt to create an Image for my PDCA cycle (Plan Do Check Act)

I then used Snipping Tool to snip this image and saved it to my C:Drive.

Step 2 – Create the Hotspots (hyperlinks) in Excel

I’ve pasted this image in Excel. Now we’ll add shapes with hyperlinks on them to “simulate” the hotspots we used in SharePoint designer (before 2013).

On the image you pasted in Excel (1) Add shapes (2) > right-click on shapes and add hyperlinks (3) for the areas you would like the users to navigate to, when clicking on that area.

Once this is done, you should change the properties of all the hyperlink shapes to have no fill and no line (transparent). It will now look like the original image you pasted in Excel.

Step 3 – Create the Web Page (code)

Now you have to set the print area – ensure including all fields and the full image.

Preview the page (1), setting the page orientation to landscape (2), go to Page Setup (3) to adjust the scaling % which will ensure the image fits a full page (5,6)

If you’re happy with the layout, you can now save the page as a Single File Web Page.

Save As > Single File Web Page (1), click on Publish (2), ensure that the Items to Publish is set to Print Area, click on Publish (3).

Navigate to where you saved the document. You’ll see a file with a MHTML extension. Open the file. It will open in your browser. You’ll notice the clickable hotspots – this is where you decide if you’re happy with the file, links as well as the size it displays in the browser – if not – repeat above steps until you’re happy with the end result.

Right-click (1) on this file that has opened in the browser, click on View Source (2), Select All (3) and Copy (4). Paste this in a notepad / word document for later use. And that is how I “create my own code” haha. If you’re not pretty, you have to be sneaky clever!

Step 4 – Insert the code on SharePoint Page

The first thing we’ll have to do, is upload the image (the one you snipped right in the beginning before taking it to Excel). You can upload this in the Site Assets Library or somewhere else if you choose so. When uploaded, copy the url to the image, paste this in a separate notepad / word document, for later use.

Open the page where you want to add the Image Map. Edit the page. Now we’ll add the Script Editor (for the code).

Insert (1) > Web Part (2) > Media and Content (3) > Script Editor (4), click on Add (5).

Edit the Script Editor Web Part (click on dropdown next to web part on right). Then click on Edit Snippet. This is where you’ll paste the code you’ve copied from your MHTML page previously. Click on Insert and Apply. You’ll only see a box with an “X” on the page as SharePoint cannot find the image which is on your C:Drive.

Edit the Web Part again – look for the part of the code where it references the image on your c:drive. The easiest would be to copy it from the Snippet – paste in notepad and search for the “imagedata src=” or “img src”. SharePoint changes the code once uploaded – so it might look different to the code you inserted initially. When you find the reference(s), replace the Image location (the section between the quotes ” xxxxx “) to the URL you’ve copied from Sharepoint and paste this all back into the Snippet on SharePoint.

Note:  Your URL from your SharePoint site must be relative.

For example – my original URL was:  https://SERVER/TeamSite/SPS/SiteAssets/PDCA.PNG

I replaced this with:  /TeamSite/SPS/SiteAssets/PDCA.PNG

Click on Insert and Ok to Apply your changes. Save the page – it should now display the Image as well as the hotspots with clickable Hyperlinks.

You can change whether the image must be centred or left aligned by editing the web part, find the code “align=center” and change that to “align=left”.

In my example I changed the Text Layout of the page to be two columns. I inserted my Image Map on the left and a Document Library on the right.

And that’s it!! Image Maps are a great way to create alternative navigation based on processes etc.

Overview of my challenge: As an absolute lover of all things Microsoft, I’ve decided to undertake the challenge, of writing a blog every single day, for the next 365 days. Crazy, I know. And I’ll try my best, but if I cannot find something good to say about Office 365 and the Tools it includes for 365 days, I’m changing my profession. So let’s write this epic tale of “Around the Office in 365 Days”. My ode to Microsoft Office 365.

Keep in mind that these tips and tricks do not only apply to Office 365 – but to the overall Microsoft Office Suite as well as where applicable, SharePoint.