Volume 2: Solutions and Publishing disclaimer
Built in Solutions Review
Download 0.72 Mb.
|
- Navigate this page:
- Step 1: Create a drawing in Visio
- Step 2: Upload the .vdw file to SharePoint
- Step 3: User requests diagram from SharePoint
- Step 5: Diagram is rendered in the browser
- Publishing Diagrams to Visio Services
- Save as Web Drawing using automation
- Integrating Visio drawings into SharePoint Applications
- Visio Web Access Web Part
- The Visio Services Mash-up API
- Walk through – Building a dashboard
- Walk through – JavaScript explained
- Complete JavaScript source listing for this walk through
Built in Solutions ReviewQuestions
Answers
Two, right-click the shape and choose the category.
Two, in the Pivot Diagram window right-click the category and choose Configure Column. Also, when using the Promote command, filters are automatically applied. Publishing DiagramsIt is very easy to create drawings with Visio, but for others to view and edit those drawings, at least in their native form, has always required a license for Visio. However there are many options for getting information that has been captured in a drawing into the hands of other users. Determining which method is best depends on the amount of access to the data is needed by others. If the data only needs viewing, then a print or use of the Visio Viewer could be sufficient. If the drawings need to be interrogated for shape data, but not modified, then saving as a web page or as a web drawing or just using the Visio Viewer will do the job. Visio Services, new for SharePoint 2010 allows the rendering of Visio drawings which have been saved as Web Drawings in a browser. For data connected drawings the data can be refreshed and the drawing updated automatically without republishing the drawing. The Visio environment comes with a complete development environment for creating your own shapes, stencils, and templates. With a good software development platform like Visual Studio .NET, the extensions that can be created for Visio are almost limitless. But which solution type do you choose and how do you get your solution into the hands of others. These are the topics of this module. ObjectivesAfter completing this module you will be able to:
Visio ServicesVisio Services is a new feature of SharePoint 2010 that expands the audience for Visio drawings and enables the use of these drawings in doing real time data analysis. Visio Services lets you:
Figure - Workflow for publishing and viewing drawings with Visio Services Step 1: Create a drawing in VisioThe real power of Visio Services comes through with data-connected drawings, but this isn’t a requirement. Any Visio drawing can be saved as a Web Drawing. A Web Drawing is a new file type for Visio 2010. It is a zipped container holding the native Visio drawing file (.vsd) and the rendered forms of the drawing in XAML and PNG formats.
Step 2: Upload the .vdw file to SharePointThis step can be handled in two ways:
Step 3: User requests diagram from SharePointTo view the drawing in a web browser, the user simply clicks on the file name in the SharePoint document library. Step 4: Visio Services refreshes the data and the diagramBefore Visio Services renders a data-driven diagram it fetches the diagram's linked data from an external data source and updates the diagram visuals based on the updated data. Thus once the drawing is posted to SharePoint it no longer needs to be republished just because the data has changed. Step 5: Diagram is rendered in the browserThe drawing is rendered in full fidelity (XAML) if Silverlight is installed or as a PNG file if Silverlight is not installed. The user can pan, zoom, change pages, follow hyperlinks and view shape data from the browser. There is also an “Open in Visio” button which allows the drawing to be opened in Visio if Visio is installed The user can view the drawing:
Visio Services supports refreshing diagrams connected to one or more of the following data sources:
Publishing Diagrams to Visio ServicesVisio Web Drawing (*.VDW) files are created using Visio Professional 2010 or Visio Premium 2010. The Visio Web Drawing (*.VDW) is a new Visio file type that allows diagrams to be rendered in full fidelity in the browser using Visio Services on SharePoint 2010. When you save a file in Visio 2010, you will see the option in the Save As dialog to save your diagram as a Web Drawing. 
You can also create a Visio Web Drawing using File > Share > Save to SharePoint. This tool allows you to quickly select a SharePoint location and the Web Drawing file type for saving your diagram. 
Clicking on Save to SharePoint at the bottom of the billboard opens the Save As dialog so you can confirm or refine your selection. 
To use the default publishing options, press Save. You now have a diagram ready for viewing in the browser! By default, Visio automatically opens a browser so you can see your diagram as others will see it in the browser. You can turn off this behavior from the Save As dialog.
You can also click on Options at the bottom of the Save As dialog to launch the Publish Settings dialog. Using this dialog, you can select the pages that display and, for data connected diagrams, the data sources that refresh in the browser. 
Visio Services allows you to refresh data-driven diagrams in the browser to present the most up-to-date view of the underlying data. The data sources selected in the Publish Settings dialog will be the data sources that refresh. Visio Services supports refreshing the following data sources:
In addition to giving you the option to customize your publish options, the Publish Settings dialog also indicates publishing issues. For example, in the image above, the data source titled “Sales data” has a warning icon beside it. This sales data is stored in a local Excel Workbook: this data source is not supported by Visio Services because it is stored on a local machine. If you want the data from an Excel Workbook to refresh with Visio Services, you should save the workbook to a SharePoint site, link your diagram to the workbook on SharePoint and then save your diagram to the SharePoint site. On save, Microsoft Visio 2010 generates a Web Drawing file which is in fact a package containing:
Once your Visio Web Drawing file is saved to SharePoint, you can continue to work with it in Visio. Visio Professional 2010 and Visio Premium 2010 both fully support Visio Web Drawing files. This means that you can edit Visio Web Drawing files using the complete set of features provided by Visio. Save as Web Drawing using automationAlong with the Web Drawing (.vdw) file format is a new object for managing the publishing options when automating the publishing process. Use it to specify the pages and records to be published with the drawing. These are analogous to choosing the option File > Share > Save to SharePoint > Web Drawing. Choose Options and select the pages and Data Sources to be published. 
The following sample uses the ServerPublishOption to save a drawing as a .vdw file. Pages to publish are specified in an array of String with the array holding the page names. Recordsets to publish are held in an array of Long with each array value being the ID of the data recordsets to publish. Below is sample code for saving a drawing as a Web Drawing. It publishes pages 1 and 3 along with a data recordset with ID 1. Sub SaveAsVDW() 'set the pages to publish Dim PageNamesU(1) As String PageNamesU(0) = "Page-1" PageNamesU(1) = "Page-3" Application.ActiveDocument.ServerPublishOptions.SetPagesToPublish _ visPublishPageSelect, PageNamesU, visLangUniversal 'set the recordsets to publish Dim RecordsetIDs(0) As Long RecordsetIDs(0) = 1 Application.ActiveDocument.ServerPublishOptions.SetRecordsetsToPublish _ visPublishDataRecordsetSelect, RecordsetIDs 'save the file Application.ActiveDocument.SaveAsEx _ "C:\Users\Fred\Desktop\Sample.vdw", visSaveAsWS + visSaveAsListInMRU End Sub
Visio Web Access Web PartPublished diagrams are displayed to the user using the Visio Web Access Web Part. This Web Part provides the interface that allows a user to view and navigate published diagrams from within their browser. Add this Web Part to any of your Web Part pages in SharePoint to incorporate Visio diagrams into your dashboards or SharePoint application. To add an instance of the VWA Web Part to your Web Part page simply select the zone on the page and from the Insert tab on the ribbon choose the Web Part option. From the list of categories choose Office Client Applications and then Visio Web Access from the list of available Web Parts. 
Figure - Adding the VWA Web Part to a zone After you add the VWA Web Part to your page you will need to configure each instance of the VWA Web Part by setting any necessary properties using the Modify Shared Web Part option. 
Figure - Modify Shared Web Part In order to display a particular Visio diagram in this instance of the VWA Web Part you must set the Diagram URL property. This property must point to a VDW diagram as this is the only file format that the server can render. If you choose any other file format you will see an error in the Web Part. The Diagram URL property must also point to a location on the same server, it cannot refer to a document on an external site. 
Figure - Setting the Diagram URL property Once the Diagram URL property has been set and you click on the OK or Apply buttons the target diagram should be rendered in the VWA Web Part. 
Figure - Rendered diagram The Visio Services Mash-up APINot only does SharePoint 2010 provide Visio Services functionality to render Visio diagrams in the browser, it also supports extensibility allowing developers to build server based applications that incorporate Visio diagrams. This new API allows developers to interact with a diagram that is hosted in an instance of the VWA Web Part, providing:
The Mashup API is a browser-side JavaScript API with an easy to learn object model and support up to JavaScript 1.3 as this version of JavaScript is compatible with most browsers. 
Figure - Mashup API Object Model The object model shown above lists all of the objects that are available in the Mashup API however all of the methods and properties are not documented here.
Walk through – Building a dashboardNow that we have our basic Web Part page (created above) that is displaying an instance of a published diagram using the VWA Web Part, lets add additional functionality to this Web Part page using the new Mashup API. For this particular example we will add two additional enhancements to our Web Part page:
In order to provide the capabilities described above we will need to edit our Web Part page and add another Web Part that will contain the JavaScript code and HTML. Edit the Web Part page and insert a Content Editor Web Part in the Right Column zone on the page. 
Figure - Adding the HTML Form Web Part Once this new Web Part has been added to the page you will need to use the Edit Web Part option to access the properties of this Web Part. 
Figure - Edit Web Part to link JavaScript source In order to attach the code to this Web Part, insert the URL of the JavaScript file into the Content Link property, clicking OK to accept the changes. 
Figure - Set the Content Link property to the URL of the JS file Note: To get the URL, use the Copy Shortcut RMA by right-clicking on the JavaScript file in the document library. 
Figure - Copy Shortcut is an easy way to get the URL Once submitted the Web Part should update, displaying the HTML controls that are part of this sample code. Not only should the HTML be visible but the JavaScript code is also active at this point so you can test the code before you exit edit mode and make the page available to your users. 
Figure - HTML Form Web Part rendering our HTML and JavaScript Updating other properties of the Content Editor Web Part will improve the user experience. For example, set a Title (under the Appearance group) for the Web Part and you might also change the size of the Web Part for better viewing. When you are done editing the properties of the Web Part you can click OK to close the Web Part Content Editor and exit Edit mode on the Web Part page.
To test the functionality that we added using JavaScript you should be able to click on a shape in the drawing and the HTML TextBox controls should populate with property values from the selected shape. Clicking on any of the radio buttons for Status should add a highlight to any shapes on the page with a Status property matching the selected value. 
Figure - Status property used to highlight shapes Walk through – JavaScript explainedonApplicationLoadThis method is responsible for getting the instance of the VWA control on the Web Part page. Once you have the instance of the VWA control you can call the addHandler() method to connect to the events supported by the VWA control, which for this example are diagramComplete and shapeSelectionChanged. new Vwa.VwaControl("WebPartWPQ3")
addHandler(string event, function handler)
Figure - Searching for the Web Part ID onDiagramCompleteThis method is called when the diagram is finished rendering in the VWA control instance. We connected this method to the diagramComplete event in the onApplicationLoad method described above. This method simply gets the instance of the ActivePage from the control and sets a zoom value. This actually turns out to be a good debugging technique that will indicate you were successful retrieving the VWA control instance in the onApplicationLoad method. If your specific zoom value is not set when the diagram renders then you know that you were not successful in getting the instance of the VWA control and you will need to verify the control name that you used. getActivePage()
shapeSelectionChangedHandlerAs the name implies this is the method that we connected to the shapeSelectionChanged event in the onApplicationLoad method described above. This method is responsible for retrieving Shape Data values from the selected shape and populating the HTML controls on the page. To accomplish this we need to first get the active page from the control (getActivePage). Then we need to get the shapes collection from the active page (getShapes). Once we have the shapes collection we need to get the selected shape by passing the shapeId argument to the getItemFromId method on the shapes collection. Finally, once we have the selected shape, we can call the getShapeData method which will give us an array of the Label and Values for all the Shape Data properties. With the label and values from Shape Data we can populate our HTML controls appropriately. getItemById(string shapeId)
getShapeData()
HightlightA nice feature of the Mashup API is the ability to highlight shapes on the active page. The addHighlight() method on the Shape object draws a rectangle around the target shape. You can specify the line weight and the line color of the rectangle. removeHighlight() is responsible for removing a highlight from the target shape. This method is called from the HTML input controls on our page using the onClick attributes (onclick="Highlight()") of each control. Each time a user clicks on one of these controls our Highlight method is called. The first thing our Highlight method does is clean up the active page of any existing highlighted shapes. It walks thru the shapes collection calling removeHighlight() for each shape on the active page. Secondly, our Highlight method uses the value attribute (value="ok") of the clicked HTML control as the filter to determine which shapes to highlight. The method walks thru each shape in the active page’s shapes collection, gets the array of Shape Data from the getShapeData method and determines if the shape has a specific property and value. If so we call the addHighlight() method on the shape. removeHighlight()
addHighlight(int width, string color)
Complete JavaScript source listing for this walk throughBelow is all the source needed for the functionality described in this article. Network Name: IP Address: Administrator: Status:
Filter Options Online Offline Unknown None Directory: download download -> Performance Tuning Guidelines for Windows Server 2008 May 20, 2009 Abstract download -> Northern England’s set-jetting locations download -> Bbc archives: Beyond the programme download download -> Occupational health and safety download -> Dynatest 3031 lwd light Weight Deflectometer download -> Forth coming competitive exams download -> English Olympiad Tasks: 10 th form Аудіювання, 10 клас. Текст download -> Brush High School Morning Announcements Friday, September 05, 2014 all school download -> Year 9 The Arts — Music download -> Years 7 and 8 standard elaborations — Australian Curriculum: Music draft Download 0.72 Mb. Share with your friends:
|
Note:
