Supercharge your Proficy solution! Download a free trial of Proficy Operations Hub, CSense analytics, and more. Explore our Proficy 2024 releases!

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.
Add a rectangle
The rectangle control adds a rectangular shape to the designer.

Workflow IPI
Get Started
Tutorials
Orientation
Configure Your Environment
Security
Resource Information and Configuration
Data Administration
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
Building and Configuring Workflows
eSOP
ActiveX Task Controls
Service Interfaces
Operator Task List in the Workflow Client
Best Practices

Add a rectangle

The rectangle control adds a rectangular shape to the designer.

About this task

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.
From the Shapes list, select the polyline pencil control.

Note: In WPF forms, the mouse pointer changes to a cross-hair.
In the designer, click and drag the cross-hair to draw the shape you want.
When the rectangle is complete, release the mouse to stop drawing.

Note: Any time you select the shape, each of the points is visible. You can then click and drag one point at a time to reshape the drawing.
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

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