Exercise 3: Working with Shape Data

In this exercise you will learn how to use the Visio Services JSOM to easily retrieve and display data associated with a shape on a Visio diagram.

Task 1 – Creating a SharePoint List

In this task you will be setting up a SharePoint list that will hold additional information about the employees at FabriKam.

1. Navigate to https://intranet.contoso.com
2. Click on Lists in the left column of the page
3. Click on Create
4. Select Custom List and title the list Employees
5. Click on the List tab at the top of the page
6. Click on List Settings in the Settings section
7. Scroll down the page and click on Create column
8. Title the column Degree and then click OK
9. Repeat steps 7 and 8, except title the column School
10. Click on Create column again
11. Title the column Bio
12. Select Multiple lines of text and then click OK
13. On the left hand side of the page click on your list, Employees
14. Click Add new item

15. Enter in the following information (make up your own bio)

    Title: Mike

    Degree: MBA

    School:University of Minnesota

    Bio:Make up your own short bio for this employee.

16. Click Save

17. Repeat steps 14-16 for the following three people

    Title:Donovan

    Degree:MBA

    School:Stanford

    Bio:Make up your own short bio for this employee.

    Title:Paul

    Degree:BA

    School:University of Florida

    Bio:Make up your own short bio for this employee.

    Title:Steve

    Degree:MBA

    School:University of Minnesota

    Bio:Make up your own short bio for this employee.

    Figure 6

    FabriKam employee list

Task 2 – Creating the Script

1. In this task, you will add the functionality to retrieve the information you stored in the SharePoint list and display it in a Content Editor Web part. You will retrieve this list data and combine it with data associated with a shape as you click on various shapes in a Visio diagram.
2. Open %Office2010DeveloperTrainingKitPath%\Labs\VisioJSOM\Starter\FabriKamOrgChart.js in Visual Studio if it’s not already
3. Delete the following lines of code from onShapeSelectionChanged()

   logItems = !logItems; SetTimeOut(highlightSVPs(), 20);
4. Change the logItems variable at the top of the script from true to false

5. Delete Logging Results: between the head tags at the top of the document and replace it with

   <strong>Employee Bio</strong>

6. Between the body tag and script tag, delete <div id=”logdiv”></div> and it replace it with

   <div id="photodiv"><img alt="Employee Photo" src="https:// intranet.contoso.com / Shared Documents /mike.jpg" /></div> <div id="bio"></div>

7. Delete the following two lines of code from onDiagramComplete()

   vwaControl.addHandler("shapemouseenter", onShapeMouseEnter); vwaControl.addHandler("shapemouseleave", onShapeMouseLeave);

8. Add the following code to onShapeSelectionChanged() directly after the closing bracket from the if statement. This is going to handle grabbing information from the selected shape and displaying it in the Content Editor Web part.

   else { var shData = sh.getShapeData(); var output = "<img alt=\"Employee Photo\" src=\"https://intranet.contoso.com/Shared Documents/" + shData[2].value + ".jpg\" />"; document.getElementById('photodiv').innerHTML = output; output = "<strong>" + shData[2].value + "</strong><br>"; output = output + "Email: " + shData[4].value + "<br>"; output = output + "Telephone: " + shData[1].value + "<br>"; output = output + "Title: " + shData[3].value + "<br>"; output = output + "Department: " + shData[0].value + "<br>"; document.getElementById('bio').innerHTML = output; queryList(shData[2].value); }

9. Add the following function after onSelectionChanged(). This function will handle setting up the CAML query that specifies which information to retrieve from the SharePoint list you created in task 1. This function uses the SharePoint ECMAScript Client Object Model to retrieve the list data.

   function queryList(name) { var clientContext = new SP.ClientContext.get_current(); var oList = clientContext.get_web().get_lists().getByTitle('Employees'); var camlQuery = new SP.CamlQuery(); camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'Title\'/>' + '<Value Type=\'Text\'>' + name + '</Value></Eq></Where></Query><RowLimit>1</RowLimit></View>'); this.collListItem = oList.getItems(camlQuery); clientContext.load(collListItem); clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); }

10. Add the following two functions after queryList(). onQuerySucceeded() is the callback function that will be called if the SharePoint list query is successful. If the query fails, onQueryFailed() is called.

    function onQuerySucceeded(sender, args) { var listItemInfo = ''; var listItemEnumerator = collListItem.getEnumerator(); var output = ''; if (listItemEnumerator.moveNext()) { var oListItem = listItemEnumerator.get_current(); output = 'Degree: ' + oListItem.get_item('Degree') + '<br>'; output = output + 'School: ' + oListItem.get_item('School') + '<br><br>'; output = output + oListItem.get_item('Bio') + '<br>'; } document.getElementById('bio').innerHTML = document.getElementById('bio').innerHTML + output; } function onQueryFailed(sender, args) { }

11. Save changes to FabriKamOrgChart.js
12. Upload FabriKamOrgChart.js to the SharePoint site making sure to overwrite the original.

Exercise 3 Verification

To verify that the Content Editor Web part functions correctly, perform the following steps

1. Navigate to your SharePoint web part page. If you are already on that web page, make sure to refresh the page.
2. Look at the Content Editor web part of the page and you should see a picture of Mike, his information that is stored within the shape, and the information from your SharePoint list
3. Click on Donovan now and you should see his respective information as well.

4. Click on Mary notice how there is less information displayed. If you recall from the SharePoint list you created, you only entered additional information in the SharePoint list for people in a position higher than a SVP.

   Note:

   Note: If you have JavaScript errors, see tip at the end of Exercise 2 Verification for how to troubleshoot these.
   Figure 7

   Content Editor Web Part