×

Have You Seen Workflow Lately? Click here to check out all the new features in the latest version.

Supercharge your GE solution! Download a free trial of Proficy Operations Hub, CSense analytics, and more. Learn more about the Proficy 2024 releases, by signing up for one of our upcoming events.

Home
Forms and User Displays
Designer Panels
Designer: Control Toolbox
The Designer supports native .NET 4.5 controls and containers, third party .NET 4.5 controls, and has many of its own .NET controls available. The Designer does not support Silverlight controls or 2D shapes or drawing capabilities.
Shapes
Shapes, such as the rectangle, ellipse, line, and path, are an important foundation for creating drawings and graphic designs. Shapes are normally used on a canvas, but can be used in other containers as well.
Configure a path control

Workflow Products Documentation

Forms and User Displays
- Forms Introduction
- Designer Panels
  - Designer Panels
    The Designer workspace is comprised of a number of panels that are used for designing your forms and user displays. Each panel performs a different function and may or may not be required for your design purposes.
  - Designer: Project Panel
    The Project panel in the Designer allows you to view the project structure and provides the ability to create new XAML and library (DLL) files, open existing files, and add new folders and/or classes to your project. You can also choose to build or build and run your project. These tasks can all be performed from the right-click menu.
  - Designer: Document Tree
    The Document Tree panel contains the document tree that corresponds to the XAML document you are currently editing. The document tree is a hierarchal visual representation of all the elements in your workspace.
  - Designer: Control Toolbox
    The Designer supports native .NET 4.5 controls and containers, third party .NET 4.5 controls, and has many of its own .NET controls available. The Designer does not support Silverlight controls or 2D shapes or drawing capabilities.
    - Add a control
    - Configure control properties
    - Set up control layout
      This information applies to both the WPF and Silverlight Designers. In the WPF Designer, some .NET Winforms controls (and controls written for other technologies) have the same names, but have different properties, methods, and events exposed than their WPF counterparts.
    - Batch Controls
      Batch controls cause multiple events to occur.
    - Button Controls
      A button is a control that causes an event to occur each time it is pressed and released.
    - Common Controls
      Workflow provides a series of common controls to use in forms and user display authoring.
    - Container Controls
      Container controls can contain a single child control that is manipulated by the parent control.
    - Date and Time Controls
      Date and time controls allow you to add clocks and interactive calendars to a display.
    - Gauge Controls
      Gauge controls are data-bound controls that allow you to view quantitative information in a visual format.
    - Grids and Panels
      Workflow provides a series of grids and panels to use in forms and user display authoring.
    - Indicator Controls
      Indicator controls are used to graphically display states and values. A standard indicator has an on and off state and is not dependent on a numeric value. A level indicator displays the state associated with the value assigned to the control.
    - Input Controls
      Input controls are used to input data to write to a server.
    - Items Controls
      Items controls display collections of child controls. These controls have inherent behaviors that manage the appearance of their child controls.
    - Label Controls
      Label controls are used to display text and/or numeric values for real-time data.
    - Language Switching
      The Designer provides a language switching control that allows you to change the text in a form or user display from one language to another during run time.
    - LED Controls
      LED controls have on, off, and pulse abilities and, when grouped, can display alphabetical, numerical, or symbolic characters.
    - Media Controls
      The media of a communications session is the form in which the data is transmitted. Media controls allow an application to recognize a variety of media types and adjust aspects of the media stream, such as the volume of voice transmission.
    - Miscellaneous Controls
      The Miscellaneous controls group contains controls that would otherwise be ungrouped.
    - Motor and Fan Controls
      Motors controls are graphical representations of motors, fans, and pumps, and rotary controls.
    - Pipe and Tank Controls
      Pipe controls are used to display the directional movement of vapors, liquids, or semi-solids. Tank controls display the level of the tank content relative to the top or bottom, and as a percent of the total tank capacity level.
    - Custom Controls
      The Designer provides the following group of custom controls.
    - Scrolling Controls
      Scrolling controls provide the ability to display text in a scrolling manner.
    - Shapes
      Shapes, such as the rectangle, ellipse, line, and path, are an important foundation for creating drawings and graphic designs. Shapes are normally used on a canvas, but can be used in other containers as well.
      - Configure a path control
      - Add an ellipse
        The ellipse control creates a circular shape.
      - Add a line
        Shapes are typically used on a canvas, but can be used in other containers as well.
      - Add a polygon
        The polygon control allows you to draw multi-sided shapes.
      - Add a polygon pencil
        The polygon pencil control allows you to draw freeform shapes.
      - Add a polyline
        The polyline control functions like the polygon, but it does not automatically close the shape for you.
      - Add a polyline pencil
        The polyline pencil control functions like the polygon pencil, but it does not automatically close the shape for you.
      - Add a rectangle
        The rectangle control adds a rectangular shape to the designer.
      - Ellipse
        The Ellipse control draws a simple ellipse shape.
      - Line
        The Line control is a graphical control that displays a horizontal, vertical, or diagonal line that cannot be changed directly.
      - Path
        A Path control is a two-dimensional graphic derived from the Shape class. It draws a series of connected lines and curves. Paths can be very simple or very complex forming elaborate images and diagrams.
      - Polygon
        The Polyogn control is a shape defined by a series of end points and linear lines that is useful for drawings, graphic designes, and user interfaces.
      - Polygon Pencil
        The Polygon Pencil control allows you to draw a series of points connected to one another as dictated by your hand movements.
      - Polyline
        The Polyline control is used to create drawings, graphic designs, and user interfaces. A polyline draws linear (that is, straight) lines by connecting a number of specified points. Whereas a simple line control contains only one line between two end points, a polyline can contain an infinite number of points.
      - Polyline Pencil
        The Polyline Pencil control allows you to draw a series of points connected to one another as dictated by your hand movements.
      - Rectangle
        The Rectangle control draws a basic rectangle shape.
    - Slider Controls
      Sliders allow you to graphically manipulate the value of the control within a finite range by moving a thumb or value indicator along a track.
    - Viewer Controls
      The Designer provides the following group of custom viewer controls.
  - Designer: Resources
    The Resources tab contains images that you can use in your forms or user displays.
  - Designer: Properties Panel
    Each control available in the Toolbox has properties that you can configure. These properties can be used to change the appearance of the control, as well as certain functionality.
  - Navigate URI
    The Navigate URI dialog box is used throughout the Designer to select source files to use within a form or user display.
  - Designer: Parameters Panel
    The Parameters panel allows you to configure input and output parameters that you can use to bind control properties to.
  - Designer: Data Items Panel
    The Data Items panel allows you to configure data items that you can use to bind control properties to.
  - Designer: Form Events Panel
    The Form Events panel allows you to configure events that can be raised from this form. The form events you configure are available to workflows using this form.
  - Designer: Server Methods
    The Server Methods panel allows you to configure service interfaces that can be called from the current form or user display. The server methods available are also used to configure call methods in workflows.
  - Designer: Client Methods
    The Client Methods panel allows you to configure client-specific methods that can be called from the current form or user display.
  - Server and Client Methods Events
    Each method exposes event triggers that you can use to further configure your form or display.
  - Designer: Test Panel
    The Test panel allows you to view the results of a form or user display when you build and run in the Designer.
  - Designer: Default Properties
    The Default Properties panel allows you to configure default drawing properties for the control currently set as the active layer.
  - Designer: Preview Panel
    The Preview panel allows you to view the form or user display before you build it.
- Display and Group Duplication
- Form Templates
- Basic Forms and Displays
- Web-Based Forms and Displays
- Existing Assembly Options
- Form Development in Visual Studio
- Form Development in Silverlight

Configure a path control

Procedure

In the navigator, click Global Displays > Forms.
From the Forms list, select the resource you want to work with.
Click Display Editor > Designer.
Click the Toolbox tab.
Expand the control group you want to work with.
Click and drag the control to the desired position in the Designer.

Note: To apply the properties of a control to another control, click and drag the control to another control in the document tree. The Applying <control (control name)> to Target dialog box appears where you can select the option you want to use to apply to the control.
Save the form or user display.
Click Save on the... To save...
toolbar locally for WPF forms; to the server for Silverlight forms
title bar to the server for WPF forms
Resize the path control using the resize handles, as required.
Right-click the path control and select Edit Layer.
The control's outline color changes to orange to indicate that it is the active layer, and the contents of the Toolbox tab changes to display the list of Geometry shapes.
Click the geometry shape you want to add to the path control, and then move the mouse to the active layer area.
The mouse pointer changes to a cross-hair.
Depending on the geometry shape you are adding, you can click and drag the mouse in the active layer to create the shape you want, or click multiple times to add start and end points for the shape you want to create.
Tip:
- To clear the shape while you are still designing it, right-click the shape, and then press the delete button.
- To clear a previously created shape, click the shape, and then press the delete button.
To close the active layer, click Close Active Geometry, and then click in the active layer.
Save the form or user display.
Click Save on the... To save...
toolbar locally for WPF forms; to the server for Silverlight forms
title bar to the server for WPF forms