Displaying a Visio Diagram
Monday, February 8, 2010 Display a Fully Functional Visio Diagram in a SharePoint Content Page I have been searching for a while for a way to incorporate Visio files into SharePoint and render them with full functionality. Elton provided a way using a SharePoint Content Editor Web part and an HTML object tag. This method provides only a partial solution. I have worked out a sequence of steps that incorporate a Visio 2007 diagram into a SharePoint 2007 non-publishing page (team site page) and render the diagram fully functional. The diagram can also be sized to fit the content area of the page. (This method works using Visio 2003 as well) 1. Open Visio and create or open a Visio (vsd) file. Ø Example: open the Sample Sales Summary diagram. 2. In the File menu select ‘Save as Web Page…’ option and save the file as an htm. Ø I saved the diagram as SalesSummary.htm in a folder I created called Sales. After saving you will notice a file (SalesSummary.htm) and a folder called SalesSummary_files. SalesSummary.htm is the base web file and SalesSummary_files folder contains supporting files. 3. Open SharePoint Designer to the root of the (team) site where you will create a page using ‘Create from Master Page’ that you will use to render your Visio diagram. Ø In SPD, in the Folder List view, right click the root web folder and select New / SharePoint Content. The New dialog box comes up with three tabs. Select the Page tab. In the middle list near the bottom, select ‘Create from Master Page’. Select Ok. Use the ‘Default Master Page’ by selecting Ok. An Untitled_1.aspx page is created associated with the ‘Default Master Page’ and has one <asp:Content> tag with the ID ‘PlaceHolderAdditionalPageHead’. Ø Add a second <asp:Content> tag with the ID ‘PlaceHolderMain’. Ø Save the Untitled_1.aspx page. I called it Sales.aspx. 4. Update the newly created aspx page to render the Visio htm file. Ø Open the Visio htm file in SPD. I opened the SalesSummary.htm Ø When the file opens in SPD make sure to select the code view. Ø Copy all of the <script> code from SalesSummary.htm and paste it into the newly created aspx page (Sales.aspx) between the ‘PlaceHolderAdditionalPageHead’ <asp:Content> open and close tags. Make sure you get all of the <script> code. There will be a lot there. Most of the SalesSummary.htm file is <script> code. Ø Copy all the <frame> tag elements (but not the <frameset> element) from SalesSummary.htm and paste them into the newly created aspx page (Sales.aspx) between the ‘PlaceHolderMain’ <asp:Content> open and close tags. Change the <frame> tags to <iframe> and attach a </iframe> close tag at the end of each <iframe> tag. Ø Add height and width attributes to each of the iframe tags. Set the values to whatever your size needs are. 5. Add the SalesSummary_files folder with all of its content directly to the root of the web site. Ø Drag and drop the SalesSummary_files folder directly into SPD onto the root web site in the Folder List view. Ø A dialog box containing supporting files warning message is displayed. You can select ‘Ignore and Continue’ option. 6. That’s it. The page will now render with a fully functional Visio diagram.