Develop > Custom Widgets > Modify the Visio shape

Modify the Visio shape

Custom widgets require a Visio shape that represents their appearance in the dashboard. You can create the shape when you design the dashboard in Visio. Additionally, you can make it reusable by saving it as a stencil. The shape that you create in Visio is the visual representation of your widget in the dashboard. In its simplest form, it is just a shape. But it can be extended to provide interactive elements that define graphical attributes, like the hole size of a donut chart.

To identify a shape as a custom widget, you must define at least two properties for the shape: opr_item_type and opr_dashboard_item.

You can define these properties in Visio's shape data menu:

  1. Make sure that Visio is running in Developer mode (Options > Advanced > General > Run in developer mode).
  2. Design your dashboard and add any shape that will later be used as the custom widget.
  3. Right click on the shape and select Data > Define Shape Data...
  4. In the Define Shape Data dialog box, enter the required properties:

    Name: opr_item_type
    Type: string
    Value: <type-of-your-widget>

    Name: opr_dashboard_item
    Type: Boolean
    Value: TRUE

    These properties will tell BVD that this shape is a widget and needs to be treated like one.

    opr_item_type is used to internally identify the widget type. When BVD finds such a shape, it looks for a JavaScript file according to the value of the opr_item_type property and adds the code to the running dashboard. Do not use opr as a prefix for the widget type, as this prefix is reserved for BVD internal use.

    Example: The following is an example for a pumping circle (the full pumping circle example is available on GitHub):

    opr_item_type: pumping_circle
    opr_dashboard_item: TRUE

  5. Optional. Define the additional shape data property opr_grouping_item. For details, see Widget shape type.
  6. Save and export the dashboard as SVG.
  7. Optional. Save the custom widget's shape as stencil. For details, see Save shape as stencil.