×

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.
Grids and Panels
Workflow provides a series of grids and panels to use in forms and user display authoring.
Use grid anchors
When a control is added to a grid, the control gets an extra set of handles called anchors. These four anchors appear outside the control's blue resize handles on the top, bottom, and sides, and assist with positioning objects within the grid.

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.
      - Add a child object to a border
        The Border control acts as a base for other layout objects that do not have border and border thickness properties, such as a canvas or a grid.
      - Add an object to a dock panel
      - Add rows and columns to a grid
      - Size rows and columns for a grid
      - Use a grid splitter
        Grid splitter controls can only be used with grid controls.
      - Use grid anchors
        When a control is added to a grid, the control gets an extra set of handles called anchors. These four anchors appear outside the control's blue resize handles on the top, bottom, and sides, and assist with positioning objects within the grid.
      - Border
        The Border control is a decorator typically used to draw a curved border around another container.
      - Canvas
        The Canvas panel explicitly positions objects starting from the canvas’ upper left-hand corner, according to exact X,Y coordinates.
      - Data Grid
        The Data Grid is a WPF control that uses a DataTable as input to populate a two-dimensional grid and to automatically determine its appearance. You can also hide columns on the input table that are not required.
      - Dock Panel
        The Dock Panel is a WPF control that arranges its child controls horizontally or vertically, relative to each other, in a defined area.
      - Grid
        The Grid panel consists of adaptable rows and columns and has resizing capabilities for itself and its child controls. Using the Margin property, you can set precise spacing for columns and rows.
      - Grid Splitter
        The Grid Splitter is used to automatically add resize behavior to a row or column in a grid.
      - Ink Presenter
        The Ink Presenter is a Silverlight control that displays ink on a surface.
      - Stack Panel
        The Stack Panel is a WPF control that is similar to a dock panel, except that it stacks its child controls in either a horizontal or vertical single line, depending on its orientation, in a defined area. Stack panels are not capable of wrapping their child controls. Controls are added to a stack panel in the same way as a dock panel.
      - Uniform Grid
        The Uniform Grid is a WPF control that uses an invisible grid-type layout to evenly space and arrange its child controls. Controls are added to a uniform grid in the same manner as they are added to a dock panel.
      - View Box
        The View Box is a container that can scale its content to any size. It has a single child property. If you need the contents of a canvas to scale, it can be added as a child of a view box to get the desired effect.
      - Viewport 3D
        The Viewport 3D panel is a WPF control that provides a rendering surface for three-dimensional visual content while providing properties consistent with two-dimensional layouts, such as clipping, height and width, and mouse events.
      - Wrap Panel
        The Wrap Panel is a WPF control that arranges child controls sequentially and linearly from left to right within a defined area and wraps (that is, breaks) to the next line when a control reaches the edge of the defined area.
    - 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.
    - 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

Use grid anchors

When a control is added to a grid, the control gets an extra set of handles called anchors. These four anchors appear outside the control's blue resize handles on the top, bottom, and sides, and assist with positioning objects within the grid.

Before you begin

Note: The blue dots are the resize handles; the black/grey dots are the anchors. Black anchors indicate that the control is anchored into position. By default, the top and left anchors are set.

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.
Click the black anchors to unlock the control's position.
Move the control to the desired position, and then click the anchors to lock the position.
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