×

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.
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.

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

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.

When a grid panel is set as the active layer, an orange border indicates that you can add additional objects.

When a grid is the active layer, headers appear across the top and sides of the grid to define its rows and columns. By default, the grid has one row and one column and is zero-based; that is, the first row is Row 0 and the first column is Column 0. The grid panel provides three editing buttons for adding rows and columns, deleting rows and columns, and changing the row/column width type.

Grid Anchors

When an object is added to a grid, the object receives a set of anchors. These four anchors appear just above the object’s blue move/resize handles, on the object’s top, bottom and sides. These grid anchors allow you to position objects within the grid by attaching the object to the top, bottom, or sides of the grid cell. Attaching the object to the grid cell keeps the object in that position when the grid is resized.

Grid anchors are either black or grey. A black anchor indicates that the object is locked in the current position, whereas a grey anchor indicates the object is unlocked and can be repositioned. Clicking the grid anchors changes them from black to grey and vice versa. By default, an object is locked to the top and left side of a grid cell.

Sizing Rows and Columns

The Forms Designer supports advanced editing of grid cell height and width sizing. This functionality is accessed through the grid’s context menu. You can choose automatic, Star (relational), or pixel resizing.

See Grids and Panels to view the usage and description of the properties for this control.