Exercise 2: Working with Overlays and Highlights

In this exercise, you will learn how to use overlays and highlights on a Visio shape.

Task 1 – Adding Employee Photos to SharePoint

In this task, you will add pictures to the SharePoint site that you will use as overlays on your Visio Web Access web part.

1. Open up Internet Explorer and navigate to https://intranet.contoso.com
2. Click on Shared Documents
3. Click Add document
4. Click Upload Multiple Files…
5. Click Browse for files instead
6. Navigate to %Office2010DeveloperTrainingKitPath%\Labs\VisioJSOM\Starter and select all the 11 JPEG image files
7. Click Open and then OK
8. Click Done

Task 2 – Creating the Visio JSOM Script

This task involves building on FabriKamOrgChart.js to match pictures with the names of the employees on the org chart using overlays. You will also look at using highlights.

1. Open %Office2010DeveloperTrainingKitPath%\Labs\VisioJSOM\Started\FabriKamOrgChart.js in Visual Studio

2. Add the following two variable to your code after

   var vwaPage;

   var vwaShapes; var showHighlights = false;

3. Add the following code to onDiagramComplete() after

   vwaControl.addHandler(“shapeselectionchanged”, onShapeSelectionChanged);

   This code adds two more event handlers that will handle the mouse enter and mouse leave events. You will be using this to handle the overlay effect. The call to setSelectedShape() is going to set the focus of the selected shape to the shape with the name Executive.

   vwaShapes = vwaPage.getShapes(); vwaPage.setSelectedShape(vwaShapes.getItemByName("Executive").getId()); vwaControl.addHandler("shapemouseenter", onShapeMouseEnter); vwaControl.addHandler("shapemouseleave", onShapeMouseLeave);

4. Add the following code to onShapeSelectionChanged() after

   writelog(“Logging: onShapeSelectionChanged – “ + sh.getName());

   The purpose of the if statement is to check if a particular shape has been selected. In this case, it’s the toggle button at the bottom of the Visio document. If the button is clicked, it will toggle both the logging and the highlights. Note that the setTimeout() function merely calls the function named highlightSVPs() after a 20ms delay. This slight delay is necessary in order to ensure that the highlights toggled in highlightSVPs()are properly displayed.

   if(sh.getName()=="LogToggle") { writelog("Toggling logging"); logItems = !logItems; setTimeout(highlightSVPs(), 20); }

5. Add the following two functions after the function onShapeSelectionChanged(). These functions are the two event handlers that will handle the overlay. The first event handler is triggered every time the mouse cursor is moved over a shape. The second is triggered whenever the mouse cursor is moved off the shape.

   function onShapeMouseEnter(source, args) { try { var shape = vwaShapes.getItemById(args); var n = shape.getName(); var o = shape.getShapeData(); writelog(o[2].value); if(n !="LogToggle" && n !="Logo" && n !="TopHR" && n !="BottomHR") { shape.addOverlay("myOverlay", "<Image Source=\"https://intranet.contoso.com/Shared Documents/" + o[2].value + ".jpg\" Width=\"50\" Height=\"50\"><\/Image>", 1, 1, 50, 50); } writelog("onShapeMouseEnter: shape - " + shape.getName()); } catch (err) { writelog("onShapeMouseEnter: err - " + err.Message); } } function onShapeMouseLeave(source, args) { try { var shape = vwaShapes.getItemById(args); shape.removeOverlay("myOverlay"); writelog("onShapeMouseLeave: shape - " + shape.getName()); } catch (err) { writelog("onShapeMouseLeave: err - " + err.Message); } }

6. Add the following function after the function onShapeMouseLeave(). This function will be called every time you click on the toggle log button and will toggle the highlighting for all employees who are Senior Vice Presidents.

   function highlightSVPs() { showHighlights = !(showHighlights); for(var i=0; i<vwaShapes.getCount(); i++) { var shape = vwaShapes.getItemAtIndex(i); var shData = shape.getShapeData(); if(shData.length > 0) { if(shData[3].value=="SVP") { if(showHighlights) shape.addHighlight(2, '#FF0000'); else shape.removeHighlight(); } } } }

7. Save your changes to FabriKamOrgChart.js
8. Upload FabriKamOrgChart.js to the SharePoint site making sure to overwrite the original

Exercise 2 Verification

To verify that the overlay and highlighting is working correctly, perform the following steps

1. Navigate to your SharePoint web part page. If you are already on the web page, make sure to refresh.
2. Move your cursor over Mike. A picture of Mike should then appear over top of the shape.
3. Move your cursor off Mike. His picture should then disappear.
4. Click the Click here to toggle logging button at the bottom. All shapes that contain SVP employees should then have a red box around them.
5. Click another shape to change focus from the toggle button.

6. Click the Click here to toggle logging button again. All highlighting should then be removed.

   Note:

   Note: If you get a JavaScript error (icon in lower left corner of IE) double-click the icon and choose to show detail. Once you see the line number for the error, then view source on the HTML page. Scroll down to the line number for the error. In most cases it will be that when you copy/pasted the code from the work document, the line of code wrapped to several lines. Go back to the original code, merge the separate lines into a single line, save and reupload the .js file to SharePoint. Then navigate to the site page again. If there are more errors, fix these until all are working.
   Figure 5

   Overlay and Highlighting