Visio Insights
The official blog of the Microsoft Visio product team

  • Visio Insights

    Better Layout Using Dynamic Glue

    • 4 Comments

    Visio makes it easy for users to place shapes anywhere and provides connectors for maintaining connections between shapes.  However, as diagrams get more complicated, users often look to Visio for help organizing shape placement and connector routing on the page.  Unfortunately, while Visio's automatic layout functionality is quite powerful, many times the results are not good enough without tweaking the layout settings.  In this post we'll look at one such scenario and try making a few changes to improve the final results.

    Here is a custom shape with several connection points on each side.  Connectors are intended to glue to these points on the shape.

    A diagram is created using this shape and connectors are added.

    We now would like Visio to rearrange the shapes and reroute the connectors to create a cleaner, more readable diagram.  Choosing Shape > Re-layout Shapes gives this result:

    This result is not ideal.  There are still overlapping connectors and too many bends.  Visio is actually constrained by the way the connectors were glued to the shapes.  The traditional way to glue connectors is to drag the end of the line to a connection point on the shape.  This creates what is known as static glue in Visio.  The connector remains associated with that connection point.  Static glue has drawbacks for layout because it prevents Visio from routing to the nearest side of the shape.  An alternative is using dynamic glue.  To glue using dynamic glue, drag the end of the line to the center of the shape.  A red outline rectangle will appear to indicate dynamic glue.  The resulting red glue square has a slightly different look as well.

    By switching all the connections over to dynamic glue, Visio can choose more efficient routes for the connectors.  However, now Visio routes to locations on the shapes that we do not want.  Our custom shape is not supposed to allow connections on the top or bottom.

    There is a Shapesheet cell that allows us to set some restrictions on dynamic glue so that Visio will not choose any arbitrary location to connect.  The Shape Layout section has a cell named ShapeFixedCode that determines how connections can be made to a shape.  By setting ShapeFixedCode to 64 on the custom shape we can force Visio to connect at connection points.

    Now the automatic layout keeps the connectors glued to the connection points.  Note that the glue style is still dynamic glue.  Visio is free to choose which connection point is used for each connection.  The result is better but still not ideal.  There are still too many bends in the connectors as Visio must work in and around the shapes.

    One final change can clean this layout up.  Each drawing page has a default layout spacing, but the shapes you use in the drawing may not be suitable for that default.  In this example, the default drawing spacing is 0.375 in. while the custom shape size is 1.25 in. x 1 in.  That pushes the shapes too close together.  By increasing the spacing between shapes, Visio can find better routes for the connectors.  This is done in the Shape > Configure Layout dialog.

    The end result is a much simpler arrangement with clean connector routes.

    Dynamic glue adds flexibility to Visio's layout and routing optimizations and will result in a better looking diagram.  The tradeoff is the inability to specify particular connection points for connectors.  Visio assumes all connection points are equally valid.  Hopefully the techniques presented in this post help you get better layout results.  It is unfortunate that Visio's automatic layout needs this much tweaking to get good results, but it is challenging for a layout engine to produce optimal results across a huge variety of drawing types.  As always, tell us your pain points, and we will try to address them in the future.

     

  • Visio Insights

    Sizing Text with Shapes

    • 4 Comments

    We occasionally get questions about how to size shapes to text or text to shapes.  While most Visio shapes do not behave like this by default, both cases are made possible through ShapeSheet formulas.  In fact, Visio includes some shapes that resize based on their text.  Go to File > Shapes > Visio Extras > Callouts and try out the shapes near the top of the stencil.  Let’s look at how to make a shape resize its text based on its width or height.

     

    First, select a shape on the page.  We’ll start with a simple Process shape from the Basic Flowchart stencil.  Open its ShapeSheet by choosing Window > Show ShapeSheet.  Visio opens a new window that shows the properties that drive the shape’s behavior.

     

     

    In the ShapeSheet window, scroll down to the Character section.  The Size cell is set to “8 pt” which matches the text size shown in Visio’s Formatting toolbar.

     

     

    Let’s say 12 pt is the baseline size we want for our text at the shape’s current size of 1 inch by 0.75 inch.  We want the text to size with the width of the shape.  A simple formula in the Size cell achieves this.

     

     

    This scales a base size of 12 pt by the width of the shape.  (Width is the name of a cell in the Shape Transform section, at the top of the ShapeSheet.)  Our shape’s text is now 12 pt.  Note that if we do not specify a unit, Visio assumes a default that is appropriate for the locale.  Multiplying by 1 pt scales the Width to points.

     

     

    If the shape is stretched to twice its original width, the text becomes 24 pt.

     

     

    What if we want the text to also size with height?  What if we only want the font size to change in increments of 2 points?  We just need to change the formula.  This formula scales the text size based on the larger of the two dimensions in 2 pt steps.

     

     

    We don’t want to lose this formula when manually setting a font size using the Formatting toolbar.  Wrapping the formula in a GUARD() will prevent it from being changed, even from the toolbar.  The SETATREF functions offer ways to combine formulas with changes made through the user interface, but are a bit more complex to use.

     

    All of the ShapeSheet cells and formulas are described in the Visio SDK documentation – downloadable or online at MSDN.  In a future post, we’ll look at the reverse of this behavior, how to resize shapes based on the text they contain.

     

     

  • Visio Insights

    Building Shapes the Easy Way

    • 4 Comments

    Shape design is somewhat of an art in Visio.  There are so many things that go into creating professional-looking content that a certain level of expertise is required.  One of the goals of the Visio Insights blog is to provide that expertise in an understandable format.  Another goal is to demonstrate best practices to help you use Visio in the most effective manner.  This week we will demonstrate shape construction techniques by  creating a new shape from scratch.

     

    Our example is a digital clock shape.  The numerals in the clock – the digits – are drawn in geometry instead of text.  This allows us to be more creative with the appearance of the digits.  We want the digit to appear as it is shown in a Liquid Crystal Display.

     

     

    Today’s post focuses on ways to use the power of Visio to create shape geometry.  There are several approaches to constructing geometry.  You can use Visio’s drawing tools to manually draw the lines and arcs needed for the shape.  This works well for simple geometry, but the tools are not suitable for complex geometries.  You can also build geometry using the Shapesheet window by entering the actual formulas in the Geometry sections.  This approach is very precise but can be extremely slow and difficult to get things right.  A third approach is to build a complex shape by assembling it from simpler pieces.  This is the simplest approach because it makes Visio do the heavy lifting to create the final geometry.

     

    Let’s construct a shape to represent a digit for our clock using this assembly approach.  A digit is composed of seven individual polygons, which are shown or hidden to generate each possible numeral.  These polygons have tiny gaps separating them.  Also a slight rounding is applied for aesthetics.  We start by drawing a rectangle 1/2 in. wide by 1 in. tall.  Then we use the Offset command found in the Shape > Operations menu to create two additional rectangles 1/16 in. away from the original shape.  The outermost rectangle is not needed, so it is deleted.  We select the remaining two rectangles and use the Subtract command from the Shape > Operations menu to create a single shape with its middle removed.

     

     

    The crossbar is added by drawing a rectangle 1/2 in. wide by 1/16 in. tall and positioning it in the center of the existing shape.  A composite shape is created by selecting both shapes and choosing the Union command from Shape > Operations.  Note that commands such as Union and Subtract destroy the selected shapes and generate a brand new shape with the composite geometry.  For this reason, you should create the geometry of a shape before moving on to other aspects like formatting or behavior.

     

     

    Next we need to segment the shape into seven pieces with small gaps in between.  We draw lines in the places where we want the gaps to be located.  The lines extend beyond the shape geometry to facilitate the next shape operation.  Getting the lines in exactly the right place may require zooming in very close.  Otherwise Visio’s snapping behavior may prevent you from placing your cursor where you want it.  Once all the lines are drawn they need to be selected.  This is accomplished by selected all the shapes and then Shift+clicking on the digit shape to deselect it.  Then the Offset command is run with a spacing of 0.015 in.

     

     

    The offset lines serve as break points where the underlying digit shape must be segmented.  The segmenting is done using the Fragment command in Shape > Operations.  This command uses all the selected geometry to define simple closed polygons.  We can apply a green fill to the resulting shapes to better see them.  The inside squares are deleted first.  Then the tiny corner polygons are deleted, leaving only the seven segments for our digit.

     

     

    We now have seven individual shapes that make up our digit.  By selecting the shapes and choosing the Combine command in Shape > Operations, the seven shapes are converted into a single shape containing seven geometry sections.  This is a much more compact representation of the digit - decreasing file size and improving performance.  Corner rounding of 0.02 in is applied to the shape as a final touch.

     

     

    While there were several steps to get to the end result, we never had to do any complicated drawing or Shapesheet formula entry to construct this shape.  Two rectangles were drawn for the basic digit outline.  Then eight lines were drawn to define break points for the segments.  Visio’s shape operation commands did the rest of the work.  In the next post, we’ll add some smarts to this digit shape and use it to build up our digital clock.

     

     

  • Visio Insights

    Make Your Own Data Graphic – Data Bars

    • 4 Comments

    This is the second post in a series demonstrating how you can create data graphic callout shapes for use in Visio 2007 Professional.  The first post discussed Text Callouts.  There is also an article on MSDN that covers the full spectrum of customization possibilities for Data Graphics.

     

    Data Bar example 

     

    A Data Bar is one of the four ways you can visualize data using Data Graphics.  It displays numeric data in a graphical form using the geometry of the callout shape to indicate the magnitude of the data value.  Data Bars may also display text and can even display multiple fields at once.  As with the other Data Graphics callouts, the visualization is as customized as you want to make it.

    In this post we are going to create the “slider” shape shown above.  This callout has two parts.  A long, thin bar shows the full range of possible data values, and a circle slides along the bar to indicate the current data value.  The circle also displays the current data value as text expressed as a percentage.  Let’s start with the bar and perform the minimum tasks necessary to create a Data Graphic callout.

     

     

     

    We draw a rectangle on the page and open its Shapesheet.  In the Shapesheet, we need to insert a User-defined section and a Shape Data section.  To make this shape a Data Graphic callout, first change the row name of the User-defined row to User.msvCalloutType (click on the row name and type "msvCalloutType").  In the Value cell enter "Data Bar" - including the quotation marks here.  Next change the row name of the Shape Data row to Prop.msvCalloutField (click on the row name and type "msvCalloutField").  Data Bars also have Shape Data rows for the minimum and maximum values that the callout field can have.  Add two more Shape Data rows named Prop.msvCalloutPropMin and Prop.msvCalloutPropMax.  Enter labels in the Label column and the word “Number” in the Prompt column as shown in the screenshot.

    Visio uses the User.msvCalloutType value to determine where to surface your custom callout shape in the Data Graphics user interface.  This shape will appear in the Callouts list in the New Data Bar / Edit Data Bar dialog.  Visio populates the Prop.msvCalloutField value (the Value cell in this row) with the data to display at the time the data graphic is applied to a shape on the page.  Visio also will fill in values for Min and Max based on the data recordset, and these are exposed in the Data Bar dialog as well.  This shape will now be treated as a Data Graphic callout if you drag it into the Document Stencil, but right now it doesn’t do anything with the data from Visio.  We need to build out the rest of the shape to make it work like a data bar.

     

    Label display

    Our rectangle will serve as the long, skinny part of the data bar - indicating the full range of field values.  It also is responsible for displaying the field label.  We want this label to be optionally hidden as is the case in the sample callout above.  Visio will place the field label in the Prop.msvCalloutField.SortKey cell (a strange place, yes, but the Label cell is already used for exposing properties in the Data Bar dialog).  Enter some default text such as “Label” (including quotation marks) in this cell.  Then select the rectangle in the drawing window and choose Insert > Field.  Choose Custom Formula and then enter the formula: “=Prop.msvCalloutField.SortKey” (no quotation marks) and press OK.  We want the label to be outside the rectangle on the right side.  In the Shapesheet insert a Text Transform section and fill it out as shown below:

     

     

     

    We want the user to be able to choose whether the field label is shown or hidden.  Data Graphics allows us to create our own callout property to display in the Data Bar dialog.  Add a new Shape Data row and name it Prop.msvCalloutPropShowLabel.  The row name must include the prefix “msvCalloutProp” to be recognized as a callout property.  Then place a human-readable name in the Label column and the word “Bool” in the Prompt column.  The Label value appears in the dialog as the name of the property.  The Prompt value tells Data Graphics what type of control to use in the dialog – in this case a simple True / False dropdown.  Visio will put the user’s choice in the Value cell.  Go ahead and enter the default value True here.  A full explanation of the syntax for custom callout properties is included in the MSDN article.  Finally tie the visibility of the shape’s text to this Value cell by entering this formula in the HideText cell:  “=NOT(Prop.msvCalloutPropShowLabel)”.

     

     

     

    Data bar value

    Next we will create the circle shape that represents the current value for the data bar.  The rectangle and circle together form the callout shape, so we need to make a group.  Select the rectangle shape and choose Shape > Grouping > Convert to Group to make this the top-level group shape.  In the rectangle’s Shapesheet set the LockCalcWH cell to 1 so that further grouping operations do not change the shape’s size.  Also set the DisplayMode cell to 1 so that the rectangle will appear behind its subshapes.  Now draw a circle on the page.  Select the rectangle, then Ctrl-click on the circle to select it as well.  Choose Shape > Grouping > Add to Group to make the circle a subshape of the rectangle.

     

     

     

    The position of the circle is dependent on the current field value and its relative size versus the Min and Max values.  We’ll add a User-defined cell to the rectangle shape to calculate the percentage of the total range.  In the rectangle’s Shapesheet add a User-defined row named User.PercentFilled and enter this formula:

    =BOUND((Prop.msvCalloutField-Prop.msvCalloutPropMin)/IF((Prop.msvCalloutPropMax-Prop.msvCalloutPropMin)<>0,Prop.msvCalloutPropMax-Prop.msvCalloutPropMin,1),0,FALSE,0,1)

    This expression calculates the current percentage of the field value between Min and Max.  It also prevents division by zero and checks to make sure that the result stays between 0 and 1 so that our data bar behaves predictably.

     

     

     

    Value display

    The User.PercentFilled value will be used by the circle subshape to control its position and to display the value as text.  We’ll start with the value display.  In the circle’s Shapesheet insert a User-defined section and add a User.PercentFilled row that references the value from the rectangle.  Since we will use this value multiple times, it is good practice to use a single cross-sheet reference and then multiple local cell references.  (Note that your sheet ID’s may be different than those shown here.)

     

     

     

    Now select the circle in the drawing window and choose Insert > Field.  Choose User-defined Cells and select the PercentFilled cell.  Before closing the dialog click on the Data Format button.  Choose Percentage and 0 decimal places.  Then click OK twice.  Next we want to tie the size of the circle to the size of the text so that the text always fits.  Add another User-defined row named User.CircleDiameter to track the size of the circle.  Then add this expression for the value: “=CEILING(TEXTWIDTH(TheText),2 pt)”  (omit quotation marks).  This expression calculates the current width of the text and rounds it up to the nearest 2 pt to get rid of tiny variations in text width based on proportional character spacing.  We add formulas to the Width and Height cells of the circle to tie its size to User.CircleDiameter.  The formulas are GUARDed to prevent accidental resizes by the user.  Set the NoObjHandles cell to 1 to hide the resize handles since they are not needed.

     

     

     

    Value position

    We’re ready to tie the position of the circle to User.PercentFilled.  The circle should move from one end of the rectangle to the other.  We must account for the circle diameter when calculating the range of movement so that the circle does not move overlap the ends of the rectangle.  Add this formula to the PinX cell:

    =GUARD(User.CircleDiameter*0.5+User.PercentFilled*(Sheet.5!Width-User.CircleDiameter))

    Also set the PinY cell:  “GUARD(Sheet.1!Height*0.5)”.

     

     

     

    Finishing touches

    Our callout is now functional enough to test.  Open the rectangle’s Shapesheet and enter sample values for Prop.msvCalloutField as well as the Min and Max properties.  You should see the circle move and display the proper value as text.  The only remaining work is to enhance the appearance of the data bar.  The rectangle height should be a fraction of the circle diameter.  Actually, the height of the rectangle shape should encompass both the rectangle and the circle, so we’ll just make the geometry of the rectangle shape smaller.  Add a User-defined row named User.CircleDiameter to the rectangle and reference the circle’s User.CircleDiameter cell.  Then add a User-defined row named User.BarHeight and set it to be a fraction of the circle size.  The geometry of the rectangle is then modified to depend on User.BarHeight as shown in the screenshot below.

     

     

     

    The overall size of the callout should be fixed; the width is set to a constant value and the height is large enough to hold the circle.  Enter the formulas for Width and Height as shown in the image below.  Note that DropOnPageScale is a factor that adjusts the size in cases where a scale other than 1:1 is used in the drawing.  This is a good practice whenever hard-coding measurement values like the ones in these formulas.

     

     

     

    One final change is to set the LockFromGroupFormat cell to 1.  This prevents formatting changes applied to the main shape from propagating to the callout.  Generally we want the callout to retain its own formatting unless the user directly selects the shape and modifies it.  Our callout shape is complete.  The rest of the look is achieved through Themes.  Apply a color theme and effects theme to the page.  Our sample uses the “Office” color theme and “Button” effects theme, but the callout will pick up whatever theme is applied in your document.  Sub-select the circle shape and change the fill color to make it stand out from the rectangle.  Accent 2 is a good choice here.  The finished shape is below.

     

     

     

    Testing the callout

    To use this callout, we need to make it a master shape in the Document Stencil.  Go to File > Shapes > Show Document Stencil and then drag the shape in.  Rename the master to “Slider”.  Now we need to apply it to a shape.  Draw a text box on the page and type some text.  Then right-click on the shape and choose Data > Shape Data.  Answer Yes to define new shape data.  Add a Label, set the Type to Number and enter a sample Value before clicking OK.  Click OK once more to finish adding data to the text shape.

     

     

     

    Right-click the shape again and choose Data > Edit Data Graphic.  Choose New Item > Data Bar to open the New Data Bar dialog.  Choose “Rating” for the data field and make sure that our Slider master is selected as the callout.  Then turn off the label by setting Show Label to No.  Click OK twice to apply the data graphic.

     

     

     

    The final result is shown below.

     

     

     

    As you can see there are quite a few steps.  However, most of the work is creating the custom behavior and appearance you want.  The end result is quite professional and easily integrates into the Data Graphics feature.  In the next post we will create the final type of callout used in Data Graphics: the Icon Set.

     

  • Visio Insights

    Introducing the Bubble Chart

    • 4 Comments

      A Bubble Chart is a diagram that presents multi-dimensional data in a graphical form.  Each data field is tied to a particular visualization.  Most often data controls the Size and Position of elements in the chart.  Thus the diagrams often resemble a bunch of bubbles.  Taken to an extreme, data can be visualized in almost any way such as Color, Shape, Line Thickness, Shadow or any other formatting.  As the data grows more complex, it becomes more important to find effective ways to present it.  Bubble charts offer a compact graphical way to present information.

       

      Bubble Chart 

       

      Over the next few posts we will build our very own Bubble Chart stencil.  Using the custom Bubble Chart shapes in combination with the Data Link and Data Graphics features of Visio 2007, it is possible to generate Bubble charts from data in just a few steps.  In this post we look at the finished solution from a user perspective.  The Bubble Chart stencil is included as a file attachment to the post.  In subsequent posts, we create the stencil from scratch.  Understanding the details of construction will let you customize the solution if you desire.

       

      Using the Bubble Chart stencil

      To make a bubble chart, you need the BubbleChart.vss stencil and a data source with data in specially labeled fields.  Here is an Excel spreadsheet with the data we will use.  Note the column headings: Label, X, Y and Size.  Our bubble chart shapes are designed to pull information from fields with these names.

       

       

       

      To begin, start a new blank drawing and open the BubbleChart.vss stencil.  Go to Data > Link Data to Shapes to import the data from Excel.  In the Data Selector wizard, choose Microsoft Excel Workbook.  Then browse to the Excel file and click Finish.  The data appears in the External Data window.

       

       

       

      Next drag the Bubble Chart shape onto the page.  This shape forms the chart background.  It includes labels for the title and axes.  The chart shape defines the space where bubble shapes will be placed.  As the chart is moved or resized, the bubble shapes will reposition accordingly.  Dropping the shape automatically triggers the Shape Data dialog.  Fill in the ranges and labels for each axis.  The last Shape Data field is Max Size.  Enter the largest Size value you expect in your data.  Visio will scale the bubbles to make the largest size equal to 1 inch on the page.

       

       

       

      Now we are ready to add the bubbles.  Select the Bubble Data shape in the Shapes window, but do not drag it onto the page.  Instead click on a row in the External Data window and press Ctrl+A to select all the data rows.  Then drag the rows onto the page.  Data Link drops new Bubble Data shapes and automatically links them to the data.  The bubble shapes are placed into the chart according to their data values.  The Label and Size fields are displayed as data graphics.  The diagram is complete!  You can even use the Data Refresh feature to quickly update the diagram when the Excel data changes.

       

      Connect to your data set.  Add the Bubble Chart shape.  Select the Bubble Data shape and drag out all the data rows.  Instant diagram.  Next time we'll see how to build the BubbleChart.vss stencil to make it happen.

       

  • Visio Insights

    Visio as a Business Process Analysis Tool

    • 4 Comments

    Visio had the opportunity to present at Microsoft's SOA & BP conference last November on using Visio as a Business Process Analysis Tool.  A video of that presentation is now available for viewing.  Mark Nelson from the Visio team describes how Visio 2007 helps bring BPA to the masses through its in-box feature set and robust solutions platform.  Also Keith Sharp from partner Ascentn demonstrates their AgilePoint BPM product, which is built on the Visio platform.

     

  • Visio Insights

    Service Pack 2 available for Visio 2007

    • 4 Comments

    Yesterday, we released Service Pack 2 (SP2) for Visio 2007. You can download and install it from:

    http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=78e36742-8bda-471e-88e6-9b561bb06258

    Among the issues we've addressed in SP2 are these:

    • A crash caused by early versions of the Broadcom “Send To Bluetooth” add-in occurs every time Visio is shut down. The first crash on exit will still occur, but subsequent crashes will not. The add-in will be disabled until it is updated to a newer version from Broadcom. More information on this and similar add-in issues is available here: http://support.microsoft.com/kb/937997
    • When the Reports feature is used to export a report to Microsoft Office Excel, Excel opens without any user interface except the worksheet window. The ribbon does not appear.
    • Script errors occur when Internet Explorer 8 is used to browse Web pages that are saved from Visio.
    • When a Visio drawing is inserted as a linked object in PowerPoint, Word, or Excel, and the link is updated, the quality of the image degrades.
    • If a Visio file name contains the -r- or -s- characters (for example, “filename -r-”), it triggers a repair of the application when the file is opened in Visio.
    • When a shape is dragged between two instances of Visio, the open regions of the shape are opaque, and this makes it difficult to position the shape on the new page.
    • Appointments in a Microsoft Office Outlook calendar do not import into Visio when the language version of Visio and the Windows locale setting are different.
    • Visio crashes when the 117th layer is added to the page.
    • In a UML Model Diagram, changing the Flow Kind of a Message Object does not correctly reset the Operation field in the UML Message Properties dialog box.

    In addition, SP2 provides these new capabilities:

    • The ability to programmatically export an XML file compliant with the XMI standard from a UML diagram. This functionality was formerly available only as a separate download for Visio 2003.
    • The ability to disable access to CAD (*.dwg) files in Visio 2007. More information is available in this article: http://support.microsoft.com/kb/938803/
  • Visio Insights

    Visio 2007 Service Pack 1

    • 4 Comments

    It's been about a year since the release of Visio 2007 and Office 2007, and Microsoft has now published Service Pack 1.  Here is the download link for English.  You can choose another language from this link as well.

    http://www.microsoft.com/downloads/details.aspx?FamilyId=496BC7C1-ABD7-4BC7-8366-B8A4CC85803B&displaylang=en

    The goals of this service pack are to provide compatibility for upcoming releases such as Windows 2008 Server, improve security and address key performance and reliability issues.

    A specific fix to note for Visio:

    • Microsoft Office Visio 2007 now properly redraws shapes when users apply a dynamic connector that is part of a group of shapes in Office Visio 2007.

    The KB article with all the details is here:

    http://support.microsoft.com/kb/937155

     

  • Visio Insights

    The Point Along Path ShapeSheet Functions in Visio 2010

    • 4 Comments

    In a previous blog post about new ShapeSheet functions, we introduced a set of new functions called the Point Along Path functions. These functions allow interactions with geometry paths of shapes. This post provides more detail about these new functions.

    The following functions open up a broad set of shape interactions for shape and solution developers:

    Function/Syntax

    Description

    ANGLEALONGPATH(section,travel [,segment]) Returns the angle of the tangent to the path at a given point.
    DISTTOPATH(section,x,y) Returns the shortest distance from the point represented by the specified coordinates to a point on the path.
    NEARESTPOINTONPATH(section,x,y) Returns the percentage of the distance along the path of the point that is nearest to the specified coordinates, as a value between 0 and 1.
    PATHLENGTH(section[,segment]) Returns the length of the path that is defined in the specified Geometry section.
    PATHSEGMENT(section,travel) Returns the 1-based segment number at the specified percentage mark along the specified path.
    POINTALONGPATH(section,travel[,offset][,segment]) Returns the coordinates of a point on, or offset from, the path.
    SEGMENTCOUNT(pathRef) Returns the number of line segments that make up the path.

    In the above functions:

    • Arguments in brackets [ ] are optional
    • Section always refers to a Geometry path. The correct way to reference a geometry path section is to enter the section reference followed by “.Path” (for example, Sheet.1!Geometry2.Path)
    • Travel is a measure of the position along the path between the beginning and the end points, defined as a percentage. It is always represented by a number between 0 and 1, where 0 represents the beginning point, and 1 represents the end point
    • Segment is a 1-based index of a line segment in the path that corresponds to a row in the geometry section.

    To give you an idea of what you can do with these functions, we'll explore three examples.

    Adorning a Connector

    We've seen shape developers create connector adornments to convey additional information. With the Point Along Path functions, this is now easier than ever to do.

    Here's a simple triangle shape that sits at the midpoint of the connector, and changes direction with the connector. It works with curved and right angle connectors:

    triangle

    To create this adornment, you only need a few ShapeSheet formulas:

    • First, make sure that the adornment shape will be ignored by the Visio routing engine. To do this, select the shape, and click "Behavior" from the Developer tab. In the ensuing dialog, click on the "Placement" tab, and ensure that placement behavior is set to "Do not lay out and route around".
    • Create a user cell in the adornment shape (we'll call it User.ConnectorGluePoint, and use the POINTALONGPATH() function and reference the connector that the shape will adorn:
      • POINTALONGPATH(Dynamic connector.23!Geometry1.Path,0.5)
      • This returns a point in local coordinates to the connector
    • Create another user cell, User.PageCoord, and use the LOCTOPAR() function to translate the local coordinates to page coordinates:
      • LOCTOPAR(User.ConnectorGluePoint,Dynamic connector.23!User.msvThemeColors,User.msvThemeColors)
      • The LOCTOPAR function needs cell references for the source and destination of the translation. Here we arbitrarily use User.msvThemeColors because the property exists in both the source and destination.
    • Now, set PinX,PinY, and Angle cells on the adornment shape accordingly (found in the Shape Transform section):
      • PinX: GUARD(PNTX(User.PageCoord))
      • PinY: GUARD(PNTY(User.PageCoord))
      • Angle: ANGLEALONGPATH(Dynamic connector.23!Geometry1.Path,0.5)-PI()/2
        • We subtract PI/2 because we’re using a triangle and the point is not aligned with the 0 angle. The ANGLEALONGPATH() function returns the tangent angle to the specified point on the path.

    Finding the Nearest Point on a Path

    You can use the NEARESTPOINTONPATH() function to find the coordinates of a point along a path that is closest to a given point. In the picture below, the triangle shape is showing the nearest point along the path to the center of the circular shape:

    nearest point

    Here’s how we setup the triangle to do this:

    • Create a user cell in the triangle shape to store the point of the circle shape (we’ll call it User.LocalPoint) Use the following formula to transform the LocPin point of the circle into local coordinates relative to the curve:
      • LOCTOLOC(PNT(Circle!LocPinX,Circle!LocPinY),Circle!Height,ArcLine!Height)
      • We use the PNT function to turn the LocPinX and LocPinY into a point
    • Create another user cell in the triangle (we’ll call it User.Travel) to store the percentage along the path (the travel) that is nearest to the circle. Use the following formula:
      • NEARESTPOINTONPATH(ArcLine!Geometry1.Path,PNTX(User.LocalPoint),PNTY(User.LocalPoint))
      • This returns the percentage along ArcLine!Geometry1.Path that has the nearest point to the center of the circle shape
    • Create another user cell (we’ll call it User.ArcGluePoint) to store the point along the path of the arc that is closest to the circle. Use the following formula:
      • POINTALONGPATH(Sheet.1!Geometry1.Path,User.Travel)
      • This will return the point on the arc where the triangle should be glued, in local coordinates relative to the arc.

    Just like the example above, you then need to transform the local coordinates, and set the PinX and PinY of the triangle so that its glued to the arc.

    Curved Timelines

    The above two examples illustrate how you can use the Point Along Path functions. As an application of the same concepts above, we built a curved timeline:
    curvy timeline

    As you change the curve of the timeline, the milestone shapes stay attached to the curve, which allows you to create a great looking visual.

    The main difference between this example and the previous one is that we’ve introduced a mechanism for automatically attaching adornments to the arc geometry. Here we turned the arc shape into a custom container to give the milestone shapes a universal reference. Since they are members of the container, we use the CONTAINERSHEETREF() function to reference the geometry of the arc. When you make multiple copies of the milestone shape, their reference to the timeline arc geometry is preserved as long as they are members of the container. (For more info on custom containers, see our previous post ).

    To place the milestones accurately on the timeline arc, we used the POINTALONGPATH() function. Each timeline shape stores its own date. The timeline arc contains the “begin” and “end” dates of the timeline.

    The attached VSD file includes the curved timeline, and the other two examples, so you can take a look at the formulas and play around with them.

    We think these new functions will open up a new set of scenarios for shape developers. Some things you might try to create with them are:

    • Placing text or adornments at fixed distances from the beginning or end of a connector
    • Detecting whether a point is inside or outside a closed path
    • Calculating the lengths of curved paths in a diagram
    • Drawing a line that terminates on a complex path

    As usual, please tell us what you think by using the Send a Smile feedback tool or by commenting on this post.

  • Visio Insights

    Container, List and Callout API in Visio 2010

    • 4 Comments

    This post examines the programmability features for Containers, Lists and Callouts in Visio 2010.  It supplements an earlier post that describes how these special shapes are constructed and how they can be customized.  Collectively these shapes are known as Structured Diagram elements, and the part of the Visio API that manages these elements is known as the Structured Diagram API.  This API enables developers to use Structured Diagram elements in their solutions.  Developers can identify the relationships between these elements and other shapes, they can add or change the relationships with other shapes, and they can detect when the user makes changes to the relationships with other shapes.

     

    Structured Diagram API Overview

    Here are the key objects, properties and methods in the Structured Diagrams API:

    image

    There are two new objects in the API.  ContainerProperties is an extension of the Shape object.  It encapsulates the special properties and behaviors of containers and lists.  RelatedShapePairEvent is an object used with the Structured Diagram API events, where Visio can describe a relationship being formed or broken between two shapes.  The remaining parts of the API are additions to existing Visio objects.

    Note that lists are just another type of container as far as the API is concerned.  Therefore, lists use all the same objects, properties and methods as containers; and lists have a few additional properties and methods as well (those with “List” in their name).

     

    Enabling Structured Diagram Behaviors in Solutions

    Visio 2010 introduces a new feature called Diagram Services that manages what diagramming behaviors are enabled in the document.  There are diagram services that control the behavior of Auto Size Page and diagram services that control the behaviors of Containers, Lists and Callouts.  These services are turned on and off at the document level.  When a service is off, changes made in the diagram through automation will not trigger the diagramming behaviors related to that service.  (Changes made through the user interface are not subject to the diagram service state.)

    For example, the Auto Size Page feature will normally grow the page size if a shape is placed outside the page boundary.  However, when a shape is placed outside the page via automation, the Auto Size Page feature will only respond if the Auto Size Page diagram service is enabled.  Similarly, dropping a shape on top of a container will normally make it a member of the container and cause the container to resize to fit it.  However, when the shape is dropped via automation, the Containers feature will only respond if the Structured Diagram service is enabled.

    The reason Visio 2010 includes this capability is that solutions may not always want these diagramming behaviors to get triggered while they are manipulating shapes in the diagram.  This may especially be true for existing solutions that have no knowledge of the new Visio 2010 behaviors and have expectations that shapes respond in ways consistent with Visio 2007.  In order for existing solutions to work as originally designed, all diagram services in Visio 2010 are disabled by default.  Solutions must opt the document in to the new diagramming behaviors.  Note that diagram service states apply to automation properties and methods that existed in Visio 2007.  When a new Visio 2010 automation method is explicitly invoked by a solution - such as any of the examples below – the service state is ignored.  The presumption is that the solution wants the Visio 2010 behavior associated with that method.

    Diagram service states are checked or changed using the Document.DiagramServicesEnabled property.  The value of this property is a mask of all the services currently enabled.  Available services and values are listed in the table below.  It is possible for a solution to opt into just one service, all the services supported in Visio 2010, or even all existing and future services.

    VisDiagramServices values:

    Enum Value Description
    visServiceAll -1 All diagram services
    visServiceVersion140 7 Diagram services that exist in Visio 2010
    visServiceNone 0 No diagram services (default)
    visServiceAutoSizePage 1 AutoSize page behaviors
    visServiceStructureBasic 2 Behaviors that maintain existing Structured Diagram relationships but do not create new relationships
    visServiceStructureFull 4 Structured Diagram behaviors that match the behaviors in the user interface

    There are two services for Structured Diagram behaviors.  The StructureBasic service maintains relationships but will not form new ones.  This might be appropriate for a solution that wants to respect the user’s usage of Containers, Lists and Callouts but does not want the solution itself to inadvertently form relationships when shapes are moved around the page.  The StructureFull service maintains relationships and will form new relationships as well.  This matches the behaviors that are triggered in the user interface.  If both services are enabled, then Visio uses the StructureFull set of behaviors.

     

    Common Tasks with the Structured Diagram API

    Let’s look at some typical Structured Diagram tasks to explore the API in greater detail.  For a complete list of the special flags that can be passed into the methods, look at the Object Browser within the VBA editor in Visio.

    Add a container to the page

    Containers can be added to a page by calling the traditional Page.Drop method, which will add the shape at coordinates you specify without affecting the membership of existing shapes on the page.  However, there is a new Page method – Page.DropContainer - that will not only drop the container but will also size it around a set of shapes and make those shapes members of the container.  This is the behavior in the UI when using Insert > Container when a selection exists.  DropContainer needs an object for the container shape.  If you want to use one of the shapes in the Insert Container gallery, you can use the GetBuiltInStencilFile method to retrieve the hidden stencil where these containers are stored.

    Dim vsoDoc1 As Visio.Document
    Set vsoDoc1 = Application.Documents.OpenEx(Application.GetBuiltInStencilFile(visBuiltInStencilContainers, visMSUS), visOpenHidden)
    Application.ActivePage.DropContainer vsoDoc1.Masters.ItemU("Container 1"), Application.ActiveWindow.Selection
    vsoDoc1.Close

    Add a shape to a container

    Shapes are added to a container by moving or dropping them onto the container (if the StructureFull diagram service is enabled).  Shapes can be explicitly added to a container using the AddMember method.  This is useful when the shape already overlaps the container and is not yet a member.  It is also helpful if you want to force the container to expand to encompass the new member.

    vsoContainerShape.ContainerProperties.AddMember vsoShape, visMemberAddExpandContainer

    Find the containers on a page

    To discover what containers exist in a document, Visio provides a direct way to get the set of containers in a selection or on a page.  The GetContainers method returns an array of Shape IDs for the containers.  Containers nested within other containers can be included or excluded using flags.

    For Each containerID In vsoPage.GetContainers(visContainerIncludeNested)
        Set vsoContainerShape = vsoPage.Shapes.ItemFromID(containerID)
        '...
    Next

    Get the shapes in a container

    Solutions can identify the members of a container using the GetMemberShapes method, which returns an array of Shape IDs for the member shapes.  The flags allow certain kinds of member shapes to be filtered out of the array returned.

    For Each memberID In vsoContainerShape.ContainerProperties.GetMemberShapes(visContainerFlagsDefault)
        Set vsoShape = vsoPage.Shapes.ItemFromID(memberID)
        '...
    Next

    Reorder a list

    Every member of a list is placed in a specific position, and that ordinal value can be retrieved with the ContainerProperties.GetListMemberPosition method.  To reorder a member, you can call the ContainerProperties.ReorderListMember method.  Both methods use 1 to indicate the first position in the list.

    vsoListShape.ContainerProperties.ReorderListMember vsoShape, 2

    Add a callout to the page

    Callouts can be added to a page by calling the traditional Page.Drop method, which will add the shape at coordinates you specify.  However, there is a new Page method – Page.DropCallout - that will not only drop the callout but will associate it with a target shape and position it near the target shape.  This is the behavior in the UI when using Insert > Callout when a selection exists.  As with DropContainer, DropCallout needs an object for the callout shape.  If you want to use one of the shapes in the Insert Callout gallery, you can use the GetBuiltInStencilFile method to retrieve the hidden stencil where these containers are stored.

    Dim vsoDoc1 As Visio.Document
    Set vsoDoc1 = Application.Documents.OpenEx(Application.GetBuiltInStencilFile(visBuiltInStencilCallouts, visMSUS), visOpenHidden)
    Application.ActivePage.DropCallout vsoDoc1.Masters.ItemU("Callout 1"), vsoTargetShape
    vsoDoc1.Close

    Get the target shape for a callout

    A shape can have multiple callouts, but a callout can have only one target shape at a time.  The Shape.CalloutsAssociated property returns an array of callout shape IDs.  You can get or set the target shape of a callout using the Shape.CalloutTarget property.

    Set vsoShape = vsoCalloutShape.CalloutTarget

    Structured Diagram Events

    In addition to manipulating the containers, lists and callouts in a document, you can also respond to user actions that relate to these shapes.  Containers, lists and callouts work by establishing relationships with other shapes.  Visio fires an event whenever one of these relationships is formed or broken.  For example, adding a shape to a container forms a new relationship between the shape and the container.

    When a relationship event fires, Visio specifies the details in a RelatedShapePairEvent object.  The FromShapeID property of this object indicates the container, list or callout involved in the relationship.  The ToShapeID property indicates the other shape involved in the relationship.  Thus when adding a shape to a container, the ToShapeID would refer to the new member shape, and when associating a callout with a target shape, the ToShapeID would refer to the target shape.

    The following events are available for Application, Documents, Pages and Page event lists:

    ContainerRelationshipAdded

    ContainerRelationshipDeleted

    CalloutRelationshipAdded

    CalloutRelationshipDeleted

    Also the ShapeChanged event will now fire when members of a list shape are reordered.  The event passes the list shape as an argument and includes the string “/ListReorder” in the EventInfo argument.

     

    Feedback

    The Structured Diagrams feature set – Containers, Lists and Callouts – offers both end users and developers significant new diagramming capabilities in Visio 2010.  We’re interested to hear what developers think of this API functionality, so please use the Send a Smile feedback tool or leave a comment below.

  • Visio Insights

    New Visio 2010 API for Configuring Raster Export

    • 4 Comments

    When we talk to developers to get their feedback on the Visio development platform, a common request we hear is the ability, through the API, to control the settings used when exporting a diagram as a raster image in the PNG, JPG, BMP, or TIFF format. Typically, they want to automate the export of the pages in a document as images for use in a web page or other application that requires certain settings. In this post, we’ll talk about the additions to the Visio 2010 object model that let developers configure each of these raster export settings.

    When you save a diagram in one of the raster formats, a dialog box appears to let you configure various settings, such as the color format, resolution, or size of the image. For example, this is the dialog for the PNG format:

    image

    Until now, there hasn’t been a way to automate the settings in this dialog via the API. In Visio 2010, we’ve enhanced the object model to make it possible to drive these settings programmatically using a set of new methods and properties on the ApplicationSettings object. You can use the methods to get and set the raster-export resolution and size, and you can use the properties to get and set raster export attributes such as data format, data compression, color reduction, color format, background color, transparency, and quality. You can use these methods and properties with the existing Page.Export and Selection.Export methods to export a diagram in a raster file format.

    Here is the complete list of new raster export methods and properties on ApplicationSettings:

    Methods

    Name

    Description

    GetRasterExportResolution

    Returns the raster export resolution settings.

    GetRasterExportSize

    Gets the raster export size.

    SetRasterExportResolution

    Specifies the raster export resolution settings.

    SetRasterExportSize

    Sets the raster export size.

     

    Properties

    Name

    Description

    RasterExportBackgroundColor

    Determines the background color that is applied to the exported image.

    RasterExportColorFormat

    Determines the color format that is applied to the exported image.

    RasterExportColorReduction

    Determines the color reduction that is applied to the exported image.

    RasterExportDataCompression

    Determines the data compression algorithm that is applied to the exported image (BMP, TIFF).

    RasterExportDataFormat

    Determines whether the exported image is interlaced or non-interlaced (PNG, GIF).

    RasterExportFlip

    Determines the flip that is applied to the exported image.

    RasterExportOperation

    Determines the export operation that is applied to the exported image (JPG only).

    RasterExportQuality

    Determines the export quality that is applied to the exported image (JPG only).

    RasterExportRotation

    Determines the rotation that is applied to the exported image.

    RasterExportTransparencyColor

    Determines the transparency color that is applied to the exported image (PNG, GIF).

    RasterExportUseTransparencyColor

    Determines whether Visio applies, to the exported image, the transparency color that is specified in the RasterExportTransparencyColor property (PNG, GIF).

    For more details on these methods and properties, such as their parameters and constants, see the Visio Developer Reference in the Visio 2010 Beta.

    Example

    This VBA code executes the settings in the PNG Output Options dialog box as shown above and exports the diagram as a PNG:

    'Set the export resolution to the printer resolution at 600 x 600 pixels/inch
    Application.Settings.SetRasterExportResolution visRasterUsePrinterResolution, 600#, 600#, visRasterPixelsPerInch

    'Set the export size to custom 8 x 5 inches
    Application.Settings.SetRasterExportSize visRasterFitToCustomSize, 8#, 5#, visRasterInch

    'Set the data format to Interlace
    Application.Settings.RasterExportDataFormat = visRasterInterlace

    'Set the color format to 24-bit color
    Application.Settings.RasterExportColorFormat = visRaster24Bit

    'Rotate the image to the left
    Application.Settings.RasterExportRotation = visRasterRotateLeft

    'Don’t flip the image
    Application.Settings.RasterExportFlip = visRasterNoFlip

    'Set the background color
    Application.Settings.RasterExportBackgroundColor = 14798527

    'Set the transparency color
    Application.Settings.RasterExportTransparencyColor = 13269045

    'Use the transparency color
    Application.Settings.RasterExportUseTransparencyColor = True

    'Export the active page as a PNG to the specified path
    Application.ActiveWindow.Page.Export "<drive>:\<path>\Network Diagram.png"

    We hope these additions to the API for raster export open up some new possibilities for Visio developers, or at least make it easier and more efficient to build automated solutions. Let us know what you think by commenting on the blog or using Send a Smile.

  • Visio Insights

    Embedding a Web Drawing in a SharePoint Page

    • 4 Comments

    Previously we showed how Visio Services lets you view diagrams in the browser. By default Visio Web Drawings open in their own web page for a full screen viewing experience. Visio Services also allows Visio Web Drawings to be embedded in other SharePoint pages.

    Using the Visio Web Access web part you can embed either static or data-driven Visio Web Drawings in SharePoint pages adding visual flair and insights to portal pages and dashboards. By centralizing relevant information onto one page, viewers save time and can, at a glance, understand the state of their business.

    Take a look below at a Supply Chain Dashboard featuring a Visio Web Access web part in the top left – in this case the data-driven visual quickly helps ground viewers in the current state of a supply chain, and its proximity to a relevant Excel chart, documents and links makes decision making and implementation easy.

    image 

    Embedding the Visio Web Access Web part in a SharePoint page

    To embed a Web Drawing in a page, you must be a site administrator for that page with either "Contribute", "Approve", "Manage Hierarchy", "Design" or "Full Control" permissions. Given you are an administrator, adding a Web Drawing to a page is as easy as editing the page and placing a Visio Web Access web part on it. To do so, follow the steps below:

    1. Click on "Edit" tab and then hit the "Edit Page" button
    2. Click on a web part zone on the page
    3. Click on "Insert" tab and then hit the "Web Part" button
    4. Select the "Office Client Applications" category and select the "Visio Web Access" web part
    5. Press the "Add" button

    At this point, an empty Visio Web Access web part should appear on your page. It looks like this:

    image

    To assign an existing Web Drawing to display in this Web Part follow the “Click here to open the tool pane” link, this will surface the UI see below and will switch the page into Edit mode. This is called the web part’s the tool pane.

    image

    Type in the URL to the Web Drawing you want to display in the text box, or better yet, use the browser button to navigate the SharePoint folder structure to find the drawing in question. Once the URL is in the input field, hit either the “Apply” or “Ok” buttons at the bottom of the configuration panel and voilà – your Web Drawing is now embedded in the page.

    image

    Note that you can only embed Web Drawings that are hosted within the same SharePoint farm as the site hosting the web part. Also note that Visio Services checks the permissions of page viewers before it renders a Web Drawing -- if the viewer doesn’t have at least “View” permissions, Visio Services will not render the Web Drawing.

    To complete the dashboard shown at the beginning of this article, repeat the process by adding other SharePoint and Office web parts.

    Further Configuring the Visio Web Access Web Part

    If you look below the “Web Drawing URL” property in the tool pane (see the tool pane image above), you’ll see a host of other properties you can set to customize the Visio Web Access web part. They include: 

    Property Label

    What the customization does

    Override the Web Drawing's default initial view using the web part's current page, pan and zoom

    By default, when the web part displays a Web Drawing, it opens the page of the drawing that was open when the drawing was last saved, keeping the same zoom level and pan coordinates.

    You can override this to display, by checking this box and manipulating the diagram directly in the web part; Visio Services will persist the current pan, zoom and page settings when you click “Ok” or “Apply”.

    Force raster rendering

    If the person viewing the Web Drawing has Silverlight 3.0 or later installed, the Web Drawing will be rendered using Silverlight.Otherwise, the Web Drawing is rendered as an image file in PNG format.

    If you would prefer that the Web Part never use Silverlight, even if it is installed on the viewer’s computer, you can select this option.

    Automatic Refresh Interval

    If the Web Drawing is connected to an external data source, you can have the Web Part check the data source periodically to get the latest data.

    Type the number of minutes you would like for the interval between data refresh attempts. Leave this at 0 (zero) if you prefer that users refresh the data manually by clicking the Refresh button on the Visio Web Access web part . Values must be integers and greater or equal to 1.

    Note that while a page designer may set the automatic refresh rate to occur frequently, a high refresh rate may tax the server. The Visio Services service administration may throttle this centrally by using the “Minimum Cache Age” service setting to improve performance.

    Expose the following shape data items to web part connections

    If you’ve linked the Visio Web Access web part to another web part via the “Send Shape Data To” web part connection, the data fields that you specify in this box are sent to the other web part on each shape click. Make sure to separate data field names you want to send with semi-colons.

    If you’re not familiar with web part connections, don’t worry… we’ll have a detailed post about them in the future.

    Various options in the “Toolbar and User Interface” section

    The options available in this section of the tool pane are tools that are available to the Web Drawing viewer to navigate the Web Drawing.

    You can remove tools from the UI that you don’t want users to see by clearing the check box beside those items. However, users will still be able to perform some of the actions using the mouse or keyboard shortcuts. To disable functionality completely, use the options in the Web Drawing Interactivity section.

    Note that un-checking the last option “Show default background” will make the web part background, which is by default gray, transparent.

    Various options in the “Web Drawing Interactivity” section

    Select the check boxes beside the options that you want to disable for users of the Web Part.

    As with any SharePoint web part, the Visio Web Access web part inherits and will honor the settings found in the “Appearance”, “Layout” and “Advanced” sections of the web part configuration panel.

    Try it out!
    Try out various web part configurations to understand which configuration best suits your needs and tell us about it either by commenting on the blog or via Send a Smile.

  • Visio Insights

    Visio 2010 Release to Manufacturing

    • 4 Comments

    Today Microsoft announced that Microsoft Office 2010, SharePoint Server 2010, Project 2010 and Visio 2010 have released to manufacturing! As noted last month, Visio 2010 and the rest of the other Office 2010 products will be available to businesses worldwide on May 12th and to consumers online and on retail shelves this June. Many thanks to everyone who provided product feedback on our blog and through our Send a Smile tool in our Visio 2010 Beta. Your feedback has helped us ensure a high quality product as well as provided us feature input for future consideration. We hope to continue hearing from you after you install our final release.

    Over the last nine months, we have had an opportunity to cover the features of Visio 2010 over nearly 60 postings with information for users, shapes developers, IT professionals and developers. If you have recently started reading our blog or if you just want an easy reference to what we’ve already covered, below is a summary of the articles we’ve posted to date, organized by our main areas of investment for this release.

    Ease of Use

    Process Management

    Visio Services

    Office Fluent User Interface

    Visio Application Enhancements

    Diagramming Improvements

    Technical Reference

    Flowcharting

    Structured Diagrams

    SharePoint Server 2010 Integration

    Technical Reference

    Diagram Publishing, Rendering and Data Refresh

    Technical Reference

    As always, please continue to let us know what you think or want to hear more about.

  • Visio Insights

    Visualizing Operations Manager Data in Visio Services

    • 4 Comments

    We enjoy seeing the innovative solutions that are implemented on the Visio platform. Now, with Visio 2010 and Visio Services, we’re starting to see some great new solutions that weren’t possible before. A good example is the Visio 2010 add-in for System Center Operations Manager 2007 R2. This add-in, which was originally released for Visio 2007, lets you generate a data-linked Visio diagram from Microsoft System Center Operations Manager. Visio’s data graphics are used to show the health of applications, services, and infrastructure monitored by Operations Manager. For instance, the status of a database server can be shown with an icon on the shape or by changing the shape’s color.

    image

    The diagram can be customized in Visio to show the information in a variety of contexts, such as a network topology, datacenter floor plan, rack diagram, or map.

    The latest version of the add-in has been updated to work with Visio 2010 and allows the diagram to be viewed in SharePoint using Visio Services. The diagram remains connected to the Operations Manager data, and the data graphics will update as status changes occur. In this way, it can be used as a live dashboard that is viewable in a browser without requiring the Visio client.

    image 

    In short, this add-in demonstrates how Visio Services opens up new scenarios for visualizing real-time data in the browser and how Visio developers and partners can build powerful new solutions that take advantage of Visio Services.

    Please continue to let us know what you think and comment on our blog!

  • Visio Insights

    Visio Mailbag

    • 4 Comments

    We on the Visio product team receive lots of interesting questions from Visio users through our blog’s contact form. In this post, we’ll share our answers to several questions that we thought would be of interest to our blog readers.

    Q: I installed Visio 2010, but the BPMN shapes appear to be missing. Where can I find them?

    A: The BPMN shapes are part of Visio Premium 2010. You can check what edition you have by going to File > Help and looking in the top right.

    Here is a link to the feature set for each Visio edition:

    http://blogs.msdn.com/b/visio/archive/2010/04/09/visio-2010-editions.aspx

     

    Q: If I add hyperlinks to my Visio drawing, will they still work after using Visio Web Access to display them on a SharePoint page?

    A: Yes, hyperlinks will work in the Visio Web Part. Here are some more details:

    • You can hyperlink to web URLs as well as other Visio pages in the document.
    • If you have multiple hyperlinks on a shape, clicking on the shape will open the topmost link or the “Default” link.
    • Pressing Ctrl and clicking on a shape will open the Shape Data pane and select the shape. This will show you all the hyperlinks, and you can click each one.

     

    Q: I upgraded to Visio 2010 and am having difficulty finding the Shape Operations (Union, Combine, Fragment, Intersect, Subtract, Join, Trim, and Offset). Where are they?

    A: In Visio 2010, Shape Operations have been moved to the Developer tab of the Ribbon, which you can enable by turning on Developer mode in Visio Options:

    clip_image001

    Once this is done, click on “Operations” in the Developer Tab to get the menu of operations:

    clip_image002

     

    Q: I am creating a Visio 2010 Cross-Functional Flowchart. How can I select an individual band to specify its color fill?

    A: The easiest way to select a band (also called swimlane) is to click on its text heading, so that you see a dotted outline around the swimlane. You can then choose a fill color, and that will apply to the heading portion of the band, as follows:

    clip_image003

    To apply the fill to the body of the swimlane, go to the Cross-Functional Flowchart tab in the Ribbon and select a style in the Style gallery that has a fill:

    clip_image004

    This lets you color the whole swimlane as follows:

    clip_image005

    Q: Where can I get support for Visio or report a problem?

    A: The central support place for Visio is the Visio Solution Center.  It allows you to get product information, get self-support or community support, or contact a support representative.

    If you simply want to report a problem, you can choose one of the community support options such as the forums or our contact form. If you want help finding a resolution, you should choose the forums or contact a support representative.

  • Visio Insights

    How to create a strategy map using containers

    • 3 Comments

    The new Containers feature in Visio 2010 is great for adding structure and organization to Visio diagrams. In this post, we’ll walk through the creation of one diagram, the strategy map, which is easy to make using containers.

    The strategy map

    A strategy map is a way for companies to document their primary strategic objectives. It visually shows the goals being pursued by an organization and the relationships between these goals. Commonly, a strategy map is part of the documentation associated with the Balanced Scorecard, a framework used to help design and implement strategic performance management tools.

    A strategy map typically consists of three components:

    1. Objectives, representing the goals that the organization is pursuing,
    2. Perspectives, representing broad categories for classifying the objectives, and
    3. Arrows, representing causal relationships between objectives.

    It’s easy to build a great-looking strategy map in Visio 2010. Here’s a walkthrough of how we built the strategy map below.

    image

    Getting started

    Since the shapes in a strategy map are simple geometric shapes, we started with the Basic Diagram template located under the General template category on the New tab of the Microsoft Office Backstage View.

    Once we had a blank diagram, we did some simple steps to get the page ready for the strategy map:

    1. On the Design tab, we changed the Orientation to Landscape.
    2. On the View tab, we unchecked the Grid checkbox.

    This gave us a blank page with the correct orientation and grid lines turned off.

    Adding perspectives

    In a strategy map, objectives are organized into different perspectives. Traditionally, these perspectives focus on the areas of finance, marketing, process and organizational development. Using this convention, we started by creating "Financial", "Customer", "Internal Business Processes", "Learning & Growth” perspectives. These are best represented in Visio using containers.

    To get our first container on the page and formatted, we performed the following steps:

    1. On the Insert tab, we picked a container from the Container drop down menu. 
      image
    2. We selected the newly inserted container and resized it to the desired dimensions.
    3. On the Container Tools contextual tab, visible only when a container is selected, we used the Automatic Resize drop down menu to select No Automatic Resize.

      Tip: Turing off Automatic Resize is good for situations where you have many containers on the page that must be the same size. This prevents the containers from expanding to fit new shapes.

    4. We copied the container three more times, then positioned and labeled the containers.

    The foundation for the strategy map was now complete.

    image

    Adding objectives

    Objectives are the goals that the company identifies as areas of focus. Typically, each objective is represented by text appearing within a shape.

    For our diagram, we picked a different shape to represent the objectives in each perspective. We picked the Ellipse shape for financial objectives, the Star 5 shape for customer objectives, the Rounded rectangle shape for internal business processes objectives, and the Rectangle for learning and growth objectives.

    As we added shapes to the diagram, the dynamic grid made it easy to ensure that shapes were dropped on the page evenly space and centered.

    image

    Tip: You can also use the Position functionality on the Home tab to ensure that shapes are perfectly aligned.

    image

    At the top of the first perspective, we wanted to add some overarching goals for the company. We thought that these objectives would look best as upside-down triangles. We added a Triangle shape to the page, resized it and used the knob at the point of the triangle to rotate the shape.

    image

    Then, we added text.

    image

    Notice that the text was still upside down. On the Home tab, there is a Text Block tool for rotating text. With the tool turned on, a knob appears for rotating text. We used this tool to rotate the text. Once the text is rotated, remember to go back to Pointer Tool mode by selecting the Pointer Tool in the same ribbon chunk.

    image

    When we had one upside-down triangle, we used copy and paste to create two additional triangles.

    image

    Adding a background, theme and title

    Using the Text Box tool on the Insert tab, we added a title and subtitle for the diagram.

    Then, we wanted to add some color and formatting to the diagram. The first two things that came to mind were a background and a theme. We added these using the following steps.

    1. On the Design tab, we selected the Backgrounds drop down and picked the Horizontal Gradient background.
    2. Also on the Design tab, we selected a theme for the diagram.

    image

    The diagram above shows themes being live previewed. As the cursor moves over each thumbnail in the gallery, the theme’s formatting is previewed on the diagram. This lets you quickly experiment with various looks without forcing you to commit to the change.

    Adding graphics

    The Department, Work Flow Objects, Work Flow Steps, and Landmark Shapes stencils have a number of useful people, building and work-related shapes that will help add character to a diagram. You can open the Department stencil by clicking on More Shapes fly out in the area above where the shapes are displayed, then clicking Flowchart, and then clicking the Department stencil. The Work Flow Objects and Work Flow Steps stencils are also under the same Flowchart menu.

    image

    We used a number of different shapes from the Department stencil, including the International division, Headquarters, Finance, and Operations shapes. We also used the Customer shape from the Work Flow Objects stencil and the Research shape from the Work Flow Steps stencil.

    To find different building types, we opened the Landmark Shapes stencil by clicking on More Shapes fly out, then clicking Maps and Floor Plans, then Map, and then the Landmark Shapes stencil. We used the Warehouse shape from this stencil.

    image

    More shape customizations

    At this point, the diagram was mostly built, but the diagram still needed a bit more personality.

    We wanted to show that there are two main types of the objectives inside the internal business processes perspective. The first three objectives are related to “Standardized Execution”, while the last two objectives are related to “Manage for Innovation”. This was another occasion suited for containers.

    We selected the shapes to go in the container and inserted a container using the Container drop down on the Insert tab. The container was inserted around the selected shapes. Even though the shapes were already on the page, it was no trouble to get them grouped in a container.

    image

    We were quickly able to add a second container and then label them both. On the Home tab, we used the Align Left button in the Paragraph chunk to move the title text to the left of the container. Notice that the shape changed slightly to adapt to the new text position.

    image

    Tip: After a container is inserted on the page, it is still easy to change its look. On the Container Tools contextual tab, visible only when a container is selected, you can select a new style for the selected containers.

    To add some additional polish, we updated the fill, line and shadow properties on the shapes. We also changed the font, and added bold to some of the text in objectives. All these options can be accessed in the Home tab. Finally, we repositioned some the shapes so that the graphics did not overlap with the objectives.

    Tip: If you have formatted one shape and want other shapes to have the same formatting, you can use the Format Painter. Select the shape with the desired format, click the Format Painter button on the Home tab, and then click the shape that needs formatting. Voila! Both shapes have the same formatting.

    image

    Adding connectors

    The last step was adding connectors to the diagram to show causal relationships between objectives. We used the Connector tool on the Home tab to add the connectors. In some cases, we took advantage of the connection points on the containers, instead of connecting directly to objectives.

    To make the connectors look stylized, we went to the Design tab, clicked on the Connectors drop down, and then clicked Curved Lines.

    image

    Since no shapes were selected, this action updated all the connectors in the diagram to curved connectors. Note that we could have also decided to apply the style to a specific set of connectors by selecting these connectors before applying the style.

    image

    We then increased the line weight, added a shadow to the line, and changed the color slightly to make the connectors slightly easier to see. We could have made them even bolder and brighter, but decided not to make them the main focus of the diagram.

    image

    To reduce the number of connectors in the diagram, we also added two Triangle shapes to the bottom perspective to show that multiple objectives in this area had the same causal relationships.

    The final diagram

    Before long, we had the strategy map shown below.

    image

    This strategy map shows business objectives, their associated perspectives and the causal relationships between them. It was easy to create in Visio 2010 using basic geometry shapes, graphical shapes for emphasis, containers and connectors. If you want to download this strategy map, it is available here.

    If you have any questions or feedback about this post, feel free to comment on the blog and let us know.

  • Visio Insights

    Our new Visio blog

    • 3 Comments

    The Visio Insights blog is moving! If you’d like to stay informed on the latest Microsoft Visio news and announcements, head over to the new Visio blog. We also have a new RSS feed so you can stay up-to-date. You’ll still be able to access previous posts here, but as of today, no new posts will appear.

    Special thanks to all our readers for tuning in and hope hear from you on our new blog at http://blogs.office.com/b/visio/.

  • Visio Insights

    Introducing Visio Services

    • 3 Comments

    Last week at the SharePoint Conference, the Visio team unveiled Visio Services – a new feature of SharePoint 2010 that extends the reach of diagrams considerably. In a nutshell, Visio Services lets you:

    • View diagrams in the browser without needing Visio on your machine
    • Refresh data-driven diagrams in the browser
    • Integrate diagrams into SharePoint applications

    Let’s take a look in more detail at the features behind each of these scenarios.

    Viewing diagrams in the browser

    A Visio diagram, saved to a SharePoint document library as a Visio Web Drawing (a *.VDW file) using Visio Professional 2010 or Visio Premium 2010, can be viewed in any web browser by simply clicking on its file entry in the document library.

    image

    The diagram renders in full fidelity in the browser if the person viewing the diagram has Silverlight installed on their machine or as a PNG if not; Visio Services renders seamlessly anything you can draw in Visio. Take a look below to get a feel for the experience:

    image

    Visio Services enables you to navigate diagrams using easy to use and familiar metaphors for panning, zooming, switching pages, following hyperlinks and discovering shape data. You can also open any Visio Web Drawing in Visio using the “Open in Visio” button. Note that the person viewing the diagram can do so:

    • …in any browser (Internet Explorer, Firefox, Safari etc…)
    • …on any platform
    • …without leaving the browser
    • …without installing Visio, the Viewer or the Drawing Control
    • …without needing to accept multiple dialogs or browser warnings

    Also note that because the diagrams are stored in SharePoint document libraries, diagram creators get a variety of useful document management features from SharePoint such as diagram access control using permissions, diagram change tracking using versioning and the ability to attach diagrams to SharePoint workflows.

    Refreshing data-driven diagrams

    Visio Services has ported Visio’s data connectivity features to the browser! In case you’re not familiar with those features please take a look at “Show it like it is: connect data to your Visio diagram” for a quick summary. Note this demonstration is in done in Visio 2007, but these features are also available in Visio 2010.

    In a nutshell, before Visio Services renders a data-driven diagram it fetches the diagram's linked data from an external data source and updates diagram visuals accordingly. Note that once posted to SharePoint, your diagram is a living document that will always represent the current state of your data visually. You never need to update manually again!

    Visio Services supports refreshing diagrams connected to one or more of the following data sources:

    • SQL (using either Kerberos, Single Sign On & Unattended Authentication)
    • SharePoint Lists
    • Excel Workbooks hosted in SharePoint
    • Any OLEDB/ODBC data sources that have recent drivers

    If the data source you plan to connect your diagrams to isn’t in the list above, don’t worry: Visio Services supports “Custom Data Providers” which enable you, with a few lines of code, to wrap your existing data source into one that Visio Services can consume. We’ll talk about writing your own “Custom Data Provider” in subsequent blog posts.

    Finally, note that Visio Services supports refresh on open, user-triggered refresh as well as automatic periodic refresh.

    Integrating Visio diagrams into SharePoint Applications

    Visio Services also enables you to embed Visio Web Drawings, regardless of whether they are static or dynamic, into SharePoint applications. Depending on your skill level with web technologies there are three ways of doing so:

    Integration method

    Scenario enabled

    Skill set required

    The Visio Web Access web part

    You can now embed Visio diagrams into SharePoint pages.

    You should know how to create a web part page in SharePoint.

    Web Part Connections

    You can enable limited interactivity between the Visio Web Access web part and another on the page, without code. A typical example of this type of interactivity is to trigger one web part to show extra relevant information about a particular shape when it’s clicked in the Visio web part.

    You should know how to create a web part page in SharePoint as well as how to set-up Web Part Connections.

    The Visio Services Mash-up API

    You can enable rich interactivity on your web part page by manipulating the different Visio web diagram objects programmatically. A typical example of this type of interactivity is to show custom visual overlays when the person viewing the diagram hovers over a particular shape.

    You should know how to code JavaScript and/or ASPX pages.

    The main take-away is that with very little effort you can add visualization to your dashboards and with a bit more page authoring or some coding you can add rich interactivity between Visio Services and other components on the page. For those of you hungry for details, we’ll be delving into the details of all of these integration features in future blog posts.

    How it all works

    For the curious among you, here’s a recap of the architecture of Visio Services:

    architecture 

    Availability and Requirements

    Visio Services is scheduled to ship as part of the SharePoint Services 2010 ECAL and will be available in the up-and-coming Beta and RTM releases of SharePoint in both hosted and non-hosted flavors.

    In Conclusion

    The complete breadth of Visio diagrams can now be shared and refreshed in SharePoint, regardless of whether the person viewing them has Visio installed on their machine. What’s more you can now integrate rich data visualizations into SharePoint dashboards and applications with little effort.

    There is much, much more to tell you about this brave new world of browser-based data visualization called Visio Services… but for now, we’ll let you digest this high level overview and start thinking about how browser-based data visualization using Visio Services can be useful to your organization. Stay tuned to the blog, we should have instructions on how to set-up Visio Services and how to create Visio Web Drawings in the next few weeks.

    As you try out Visio Services, please let us know what you think, either by commenting on the blog or via Send a Smile.

  • Visio Insights

    User Interface Extensibility in Visio 2010

    • 3 Comments

    When Office 2007 was introduced, a new UI paradigm was adopted, and so was a new UI extensibility model, the RibbonX (Ribbon extensibility) model. RibbonX is a XML markup that allows developers to customize the Office UI. It enables 3rd party developers and solution providers to build custom tabs and groups on top of the Ribbon, and target scenarios unique to and optimized for their customers. As Visio 2010 adopts the Fluent UI, Visio developers now also have the opportunity to utilize this platform to build and customize Fluent UI to offer users a more discoverable and instructive UI experience.

    Existing Visio Solutions

    There are two existing mechanisms for UI extensibility in Visio: CommandBar and UIObject. Both would still work in Visio 2010: Visio 2010 automatically creates a new tab called “Add-Ins” with groups for these existing menu commands and toolbar commands and requires no extra work from developers. Here, as an example, we see a top-level menu item called Process Analysis.

    clip_image001

    In the Ribbon, this menu becomes a drop-down control that opens to show the menu commands. This automatically-generated tab and its controls require zero-effort for your solutions to migrate to the next release of Visio.

    Although the migration to ribbon can be zero-effort, this really is an ideal opportunity for solution developers to re-think their UI from a Ribbon perspective. The Ribbon provides contextually-relevant commands, and presents them in a way that is more results-oriented. Your UI can integrate more seamlessly with the rest of Visio, and look more like Office. Here is an example of how Visio 2010 reconfigured the Gantt Chart UI, allowing users to more easily discover commands and learn about them through controls of varying sizes, big icons and super tooltips:

    clip_image003

    Note, if you are using UIObject in your solution, we especially recommend upgrading to the ribbon. UIObject is a legacy Visio-specific model for defining UI and it may become deprecated in the future.

    RibbonX for Different Types of Add-in Technologies

    Depending on what add-in technology you were using, Visio provides a number of ways to import Fluent UI controls through RibbonX and improve users’ experience. Here is how you achieve that for each type of add-in technology.

    If you’re developing a Visual Studio Tools for Office (VSTO) add-in, you will have access to a visual Ribbon designer that provides a graphical construction environment, similar to other Visual Studio designers. Alternatively, you can specify your UI using RibbonX. Your add-in merely provides an override called CreateRibbonExtensibilityObject that returns an instance of your ribbon object. One-line, very simple to do.

    If you’re writing a shared COM add-in, in your Connect class (the class that implements IDTExtensibility), define an override called GetCustomUI that returns your RibbonX XML as a string. GetCustomUI is the single interface through which the Fluent UI communicates with a COM add-in. Two-to-three lines, still very simple to do.

    VSLs, or legacy Visio add-ons, may also use RibbonX. You add the RibbonX XML to your add-on’s resources. Your add-on defines the GetCustomUI callback and notifies the Visio Application that it has RibbonX XML by calling RegisterRibbonX.

    For VBA, you simply provide the contents of a RibbonX XML as a string directly to Visio through the CustomUI property.

    RibbonX and Visio XML file format

    The Visio XML file format (*.vdx) may also contain RibbonX. The RibbonX markup is stored inside a new element in the Visio XML schema, called, unsurprisingly, RibbonX. The customUI element is the top-level wrapper element in the RibbonX schema.

    clip_image005

    Since you can define custom UI directly in the Visio XML file, you have all the benefits of being able to read and write the file without Visio being present. For example, this enables an entire class of server-side scenarios where the server can not only manipulate diagram content, but can also make changes to custom UI in the document.

    Developing with Visual Studio 2010

    The recommended Visual Studio version to develop for Visio 2010 is Visual Studio 2010, which is currently available as Release Candidate. Visual Studio 2010 offers a friendly design environment with the Ribbon Designer, where developers can easily drag and drop ribbon groups and controls onto a graphical design canvas. Also, a Visio 2010 VSTO template is available for you to easily create a Visio add-in project. Multi-project deployment packages, post-deployment actions, and removing PIA dependencies are all benefits from using VS 2010. For more information on what’s new in VS 2010, see this MSDN article.

    Conclusion

    With Visio 2010 and the UI extensibility model available, you now have the opportunity to utilize our more intuitive attractive drawing surface to broaden your user base. We highly recommend moving existing solutions to the Fluent UI. It is worth the work to get rid of the old menu bars, and help your users realize the full capability of your solution by making it easier to use. For new and old solution developers alike, Visual Studio 2010 allows a great way to easily develop Fluent UI for Visio 2010 as well.

    To get more details about UI extensibility for Office 2010 applications, here are some helpful links:

    Microsoft Office 2010 Engineering blog

    UI Extensibility in Office 2010- Including details on customizing Office Menu and Backstage View

    MSDN documentation

    Office Development in Visual Studio 2010

    How to setup the Ribbon Visual Designer

    Ribbon best practices

    Do try implementing your own Visio ribbon and send us feedback through the Send a Smile feedback tool or comment on this post!

  • Visio Insights

    Live Rendering Shapes in Visio 2010

    • 3 Comments

    For several releases Visio has enhanced the appearance of shapes in diagrams by adding isometric projections or themes with gradients and shadows.  All the while, their appearance in the Shapes Window has been unchanged.  The 32x32 pixel icons have been limited to 16 colors (reminiscent of the EGA color palette  from 1984).  Thus the Shapes Window icons have not kept pace with the visual updates on the drawing surface.

    Visio 2010 remedies that with a feature called Live Rendering.  We briefly mentioned this feature in the Shapes Window article, but we’ll go a little deeper here. Live Rendering replaces a shape’s icon with an image of what the shape actually will look like on the page.  You can see the full color spectrum used in the gradient fills.  You can see the anti-aliasing applied to the geometry and text.  If there is currently a theme applied to the page, Visio will even show the shape with the theme applied.  What you see is what you get.

    image 

     

    Supporting Live Rendering in Your Custom Shapes

    Live Rendering is also available for any of your own custom shapes.  Visio 2010 takes the existing setting for automatically generating icons for shapes and repurposes it as a setting for Live Rendering.  If you right-click on one of your own shapes in the Shapes Window and choose Edit Master > Master Properties, you can see the revised property.

    image

    Of course, Live Rendering may not be the best option for every shape.  Perhaps you prefer the icon to be more of an abstraction than a realistic portrayal of the shape.  Sometimes the shape has so much detail that it is not understandable in 32x32 pixels.  Maybe the shape is oblong and does not scale down to a 1:1 aspect ratio well.  In these cases it is best to stick with the shape icon, which is still limited to 16 colors in order to maintain file compatibility with previous releases.

    Custom Crop Regions

    However, there is a common situation that we felt was important to support with Live Rendering.  Sometimes only a portion of a shape is visually distinct from other shapes in the same stencil.  After all, shapes that are found in the same stencil are probably related, so they may share some common visual attributes.  In these cases the distinction may be too small to be useful when displaying the shapes as icons.  To alleviate this problem, Live Rendering supports custom crop regions.  Instead of rendering the full extents of a shape and shrinking that to icon size, Visio can render a specific region of a shape and use that for the icon.

    Let’s see an example from the shapes in Visio 2010’s SharePoint Workflow content.  There are dozens of workflow shapes that correspond to activities you can perform with SharePoint.  Each shape consists of a rectangle with a text label and a thumbnail image.

    image

    You can see that the thumbnails are the most visually distinctive part of the shapes.  What happens when you put these in the Shapes Window and turn on Live Rendering?  Unfortunately the details are lost.  In prior releases your only option would be to manually draw an icon using the 16 color palette and live with a very poor representation of the shape.  With a custom crop region, Visio only displays the relevant portion of the shape.

    image

    A custom crop region is specified by adding a User-defined cell to the Pagesheet of the master shape in the Master Edit Window.  Add a cell named User.msvPreviewIconCropToPage and set the value to 1.  Then modify the size of the page and the position of the shape on the page such that only the portion of the shape you want rendered overlaps the page.  You can look at the masters for the SharePoint Workflow shapes or the Callouts for more examples.

     

    Live Rendering shapes in the Shapes Window is an important part of the overall user interface update in Visio 2010.  For shape designers, Live Rendering and custom crop regions provide new opportunities for showcasing your rich, graphical content.  Please let us know what you think by using the Send a Smile feedback tool or commenting on the blog.

  • Visio Insights

    Microsoft Office Visio 2007 Released

    • 3 Comments

    Yesterday Visio 2007 was made available to business customers along with the rest of the 2007 Office System.  Retail availability for Visio 2007 will be January 30, 2007.

    What’s so great about Visio 2007? 

    Our primary investment focuses on visualizing business information.  We’ve made it significantly easier to bring your business data into Visio and visualize it in a diagram.  Data Link is a new feature that imports data from external sources and associates that data with individual shapes in the drawing.  Data Graphics is a new feature that surfaces your data in graphical ways.  Combined with the ability to refresh from the data source, these features turn your Visio diagram into a living document.

     Data Link and Data Graphics

     

    While Data Link helps you add data to your existing diagram, Visio 2007 introduces a new drawing type called PivotDiagrams.  Similar in concept to Excel PivotTables, PivotDiagrams dynamically present tabular data in a hierarchical form.  By pivoting on different columns in the data, the diagram changes to aggregate information based on the breakdown specified.   PivotDiagrams are a great way to explore large data sets and present meaningful information visually.

    PivotDiagram 

     

    Visio 2007 also makes it easy to communicate with your audience.  A new Themes feature provides one click formatting to drawings, giving them a professional appearance.  Publish as PDF or XPS lets you distribute diagrams in a fixed format.  Also Outlook 2007 has the Visio Viewer built right in.  Sharing Visio drawings has never been easier.

     

    Links to More Information

    There’s much more to this release, and there are a number of resources already available to showcase what’s new.  Start with Microsoft Office Online and then look at MSDN and the other Visio blogs.

    Visio page on Office Online - http://office.microsoft.com/en-us/visio/default.aspx

     

    There are some great videos on the site demonstrating many of the new features:

    Video demos - http://office.microsoft.com/en-us/visio/CH100740891033.aspx?pid=CL100729281033

     

    For shape designers and developers, look for information on MSDN.  There are some good technical articles explaining what is new in automation and how to make use of the new features.

    MSDN Visio site – http://msdn2.microsoft.com/en-us/office/aa905480.aspx

    Visio 2007 SDK - http://www.microsoft.com/downloads/details.aspx?FamilyID=772ccdd1-7d06-4cc4-8ecd-de5864428c26&DisplayLang=en

     

    Eric Rockey, Lead Program Manager for Visio 2007, has a blog previewing many of the new Visio 2007 features.

    Eric Rockey’s Visio 12 blog - http://blogs.msdn.com/eric_rockey

     

    Bill Morein, Program Manager for Visio 2007, has a blog covering data visualization for Visio and includes several posts about the Visio 2007 feature set.

    Bill Morein’s Data Visualization blog - http://blogs.msdn.com/wmorein

     

    Finally, stay tuned to Visio Insights for more information about Visio 2007.  There’s quite a bit to cover.

     

  • Visio Insights

    Text Control Handles

    • 3 Comments

    Shape control handles offer users convenient ways to take advantage of the intelligence built into the shape by a designer.  Perhaps the most common use for a control handle is to link it to the text on a shape.  While Visio provides the Text Block Tool for manipulating shape text, this tool is not very discoverable (it’s underneath the Text tool in the Standard toolbar) and is cumbersome.  A control handle is a very convenient alternative.  In fact, Visio 2003 has a text control handle built into the default dynamic connector.

     

     

    The dynamic connector incorporates a couple of behaviors that you may find helpful in the design of your own shapes:

    ·         The control handle is not shown unless there is actual text in the shape

    ·         The user can use either the control handle or the text block to reposition the text

    Let’s look at the Shapesheet for a dynamic connector to see how these behaviors are implemented.

     

    The visibility of the control handle is determined by the X Behavior cell.  This cell describes how the control handle should resize with the shape, whether it can be moved at all and whether the control handle is visible.  An IF statement sets the behavior to 5 to hide the handle or 0 to show it.  The conditional statement verifies that the shape has no text or that it is currently not visible.  Note the use of the STRSAME function to check for text.  This is the recommended practice.

     

    SETATREF

    The synchronization of the control handle and text block is accomplished using the SETATREF function.  This is a very powerful and complicated function that needs some introduction.  We’ll look at the basic capability as it is used in the text control handle here, but there is quite a bit more to cover in a future post.

    Consider a typical formula dependency where cell A depends on cell B.  As long as the user modifies cell B, then A and B will both be up to date.  What happens if the user modifies cell A?  This change would blast the formula in cell A, decoupling it from cell B.  You could GUARD the formula in cell A to preserve the dependency on cell B, but now the user cannot manipulate cell A at all.  SETATREF solves this problem by preserving dependencies and forwarding inputs to the independent cell.  SETATREF allows cell A to depend on cell B while also allowing the user to change either A or B.

    In the case of the text control handle, the position of the text block is dependent on the position of the control handle.  Thus the TxtPinX and TxtPinY cells have formulas with references to Controls.TextPosition and Controls.TextPosition.Y respectively.  These references are then wrapped by a SETATREF formula.  To understand how SETATREF works, we need to separate what happens during recalculation versus what happens during cell input.

    Because TxtPinX and TxtPinY have formulas with references to the control handle position, these cells must be recalculated whenever the control handle position changes.  During the recalc operation, the SETATREF function is transparent.  SETATREF(x) = x.  In other words, the result of the recalc is just like if there were no SETATREF wrapped around the cell references.  On the other hand, when the user directly manipulates the TxtPinX or TxtPinY cells (by using the Text Block Tool), SETATREF influences how the new value updates the Shapesheet.  Rather than letting the new cell value replace the SETATREF formula, Visio forwards the value to the cell referenced in the SETATREF function.  Thus any change to the TxtPinX or TxtPinY cell is actually made to the Controls.TextPosition or Control.TextPosition.Y cell instead.  Then the TxtPinX and TxtPinY cells pick up the change through recalculation.

    This ability to preserve dependencies and forward input values is extremely versatile for shape development.  We’ll look at some more sophisticated uses for SETATREF in a future post.

     

  • Visio Insights

    What’s in a (File)Name?

    • 3 Comments

    This is the second topic in a series discussing the essential features that make up the Visio application.

     

    Essential Feature:  Drawings, Stencils and Templates

    In the previous post on Drag and Drop, we mentioned that Stencils were separate documents from the drawing and thus Visio has to make a local copy of a master shape when you drag one onto the page.  So what is the difference between a stencil and a drawing?  And what about templates?

     

    Actually, there is very little difference between these three types of Visio documents.  That's because there is really only one document type in Visio.  Drawings, stencils and templates are the same technically.  The difference is in the “view” of the document information presented to the user.

     

    Try this: make a simple flowchart by starting from the Basic Flowchart template.  Drag some shapes onto the drawing page from the Basic Flowchart Shapes stencil.  Save the drawing as MyDrawing.vsd and exit Visio.  Now rename the file, changing the extension from 'VSD' to 'VSS'.  Reopen the drawing in Visio.  What do you see?  You should see a stencil with just the master shapes you dragged into your drawing.  Close Visio and change the extension to 'VST'.  Now what do you see when the file is reopened?  You should see your drawing but with a generic filename like Drawing1.

     

    What's going on?  Every Visio document has a drawing surface - the page that you drop shapes on.  Every document also has a stencil containing masters, called the Document Stencil.  The file extension tells Visio whether to open a document showing the drawing surface or the stencil.  You can see the Document Stencil for your drawing by choosing File > Shapes > Show Document Stencil.  Templates are just like drawings.  The only difference is that Visio will open a template as a copy of the original document by default.  This explains the change in filename.

     

    Another part of a Visio document is the workspace information.  Whenever you save a drawing, Visio records the names of the stencils that were opened with your drawing.  These stencil documents are automatically reopened the next time your file is reopened.

     

    Those of you who are familiar with Visio's file format history know that there are now two sets of Visio file extensions.  VSD, VSS and VST are the drawing, stencil and template extensions for Visio's binary document format.  There is a companion set of VDX, VSX and VTX extensions for Visio's XML document format.  The XML document format is a full fidelity peer of the binary format that was introduced in Visio 2002.  The XML formats offer an under the hood view of the contents of a Visio document.  They allow developers to write programs that build new drawings from scratch or read the contents of a drawing – all without having to launch the Visio application.

     

    Try saving out a drawing as XML and then opening the file in a text editor.  You can rename the file to give it a .XML extension and view it in Internet Explorer too.  There is a lot of information, but if you dig around you'll find the Masters collection that makes up the Document Stencil and the Pages collection that makes up the drawing.  You may even find the workspace information.

     

  • Visio Insights

    How It All Began

    • 3 Comments

    We're going to wrap up our look at Visio's essential features with the most significant innovation of all - the SHAPE.

     

    Essential Feature: Shapes

    A central concept in Visio is assembling a diagram from a pre-packaged set of content.  Users do not need to construct drawings from scratch using geometric primitives, nor do they need to be artists to draw great-looking symbols.  You only have to find a shape in one of Visio's stencils and drag it into the drawing.

     

    Visio shapes differ from Clip-Art in three important ways:

     

    ·         Shapes are vector-based graphics meaning that they size and scale well (yes, some Clip-Art is vector-based too).

    ·         Shapes can have behaviors that control their appearance or interactivity with the user. 

    ·         Users can customize shapes or build new ones from scratch to easily create new content. 

     

    We refer to Visio's content as SmartShapes because they react in an intelligent manner when you manipulate them in a diagram.

     

    There are many, many things to say about designing and using shapes in Visio, but for now let's look at one shape in particular.  Looking back at the history of Visio, you could say it all began with a single SmartShape - the block arrow.

     

     

    If you want to see an example of this shape in the current product, open the Basic Shapes template (File > New > Block Diagram > Basic Diagram) and drag out the 45 degree single shape from the Basic Shapes stencil.  There are two special behaviors on this shape.  First, you can stretch the width of the arrow without affecting the size of the arrowhead.  Second, you can control the size of the arrowhead by changing the height of the shape.  These behaviors preserve the 45 degree angle of the arrowhead across a wide range of shape sizes.

     

     

    Compare this resize behavior to a standard symbol.  Every arrowhead has a different angle.

     

     

    How does this work?  Every Visio shape is actually a collection of properties that are defined using parametric expressions.  Unlike many objects that have properties with static values, a Visio shape has properties with either a static value or a dynamic value that is calculated from a formula.  Other shape properties are often used as parameters in the formula, and that gives the shape its behavior.  For example, I can make a rectangle whose Width property is a function of Height.  If I set Width = Height * 2, then I have made a behavior that changes the Width automatically whenever the user adjusts the Height of the shape.

     

    Visio shapes have hundreds of properties, each of which can have a formula.  These properties are organized into a spreadsheet interface called the ShapeSheet.  Just as in a spreadsheet, the properties are called Cells in the ShapeSheet.  Cells are organized into rows, columns and sections.  See for yourself.  Select the arrow shape on the page and choose Window > Show ShapeSheet from the menu.  The ShapeSheet Window opens, showing you the real power behind shapes.

     

     

    If you look at the ShapeSheet for the 45 degree single arrow shape, you can see some of the parametric formulas that give this shape its special behaviors.  The 1-D Endpoints section tracks the current begin and end points of the arrow.  The Shape Transform section has formulas that depend on the endpoints.  For example, the Width of the shape uses the Pythagorean theorem to compute its value from the endpoints.

     

    The Geometry section lists the points that make up the line segments you see on the screen.  If you tile the drawing window and ShapeSheet window together (Window > Tile), you can select a cell in the Geometry section and Visio will highlight that point on the arrow in the drawing window.  Notice that all these points are expressed in terms of Width and Height and also a pair of Scratch cells.  The smarts behind this arrow shape are found in the Scratch.X1 cell.  This cell has a formula that determines the correct size of the arrowhead in order to maintain a 45 degree angle.

     

    One of the best ways to learn how to make shapes is to look at the ShapeSheets of existing Visio shapes.  You can see the formulas those shapes use.  You may just need to customize an existing shape slightly to make the SmartShape you want.  There are thousands of shapes that ship with Visio.  Or you may want to make a shape from scratch incorporating behaviors you discovered in other shapes.  The ShapeSheet is a powerful tool that Visio exposes to all users so that they can create shapes that have the visual appearance users need and behaviors that make diagramming with them easy.

     

  • Visio Insights

    Sizing Shapes to Text

    • 3 Comments

    In a previous post, we saw how to use the ShapeSheet to resize text based on a shape’s size.  A related question we sometimes hear is how to make a shape automatically resize to contain its text.  Visio includes some shapes that resize based on their text.  Go to File > Shapes > Visio Extras > Callouts and try out the shapes near the top of the stencil.  Let’s see how to build this into a shape.

    People often want to fit more text into flowchart shapes.  We can make the text smaller for shapes that cannot fit all the text, but this sometimes makes diagrams difficult to read.  In other cases, it is OK to resize shapes based on the amount of text they contain.  Let’s say we have this piece of a process flowchart.

    The size of the Document shapes is unimportant, so we can create a formula to control the height of the shape.  Select the shape and open its ShapeSheet by choosing Window > Show ShapeSheet.  Visio opens a new window that shows the properties that drive the shape’s behavior.

    The shape is taller, but the text still doesn’t fit right.  In this case, the Document shape is designed to keep the bottom of the text block above the rounded part of the shape, preventing it from being obscured.  We can just add a little buffer to the height of the shape.

    But if the shape is resized manually by adjusting the green handles shown when the shape is selected, the formula will be lost.  We want the shape to always be at least as tall as the text it holds.  We can use the SETATREFEXPR formula to “pick up” the height that is set by manipulating the green handles.  Then, use MAX to compare that to the height from the formula above and use the larger of the two.

    The shape still looks the same, but now if we resize the height manually, the formula is not lost.  And if we try to make the shape smaller, Visio only allows it to shrink small enough to contain all the text.

    If this formula were applied to all Document shapes, each one would be a different size based on the amount of text it contains.  We can add a condition that keeps the shape at least as large as it was originally.  With this, shapes may resize larger but never smaller.  Another MAX condition ensures that Visio chooses the largest of the original size (0.75 in.), the calculated size and the manually set size.

    The SETATREF trio of functions can be a little tricky to learn, but contain a lot of power for building formulas that interact well with manual changes made through Visio’s user interface.  More on these in a future post.

     

Page 4 of 8 (181 items) «23456»