×

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.
Items Controls
Items controls display collections of child controls. These controls have inherent behaviors that manage the appearance of their child controls.
Add a toolbar to a toolbar tray

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.
      - Add a menu item to a combo or list box
      - Sort items in a combo or list box or a list view
        Although there is no property available that enables alphabetical sorting of contents, code can be used to sort them.
      - Add a menu item to a menu control
      - Add a menu item to a menu item
        The Designer allows you to nest menu items within another menu item. When menu items are nested, a right arrow automatically displays when the top-level menu item is clicked in run mode.
      - Add a separator to an items control
        Separators are commonly used with items controls, such as menus and menu items, toolbars, and status bars.
      - Add a status bar item to a status bar
        This procedure applies only to status bar item controls.
      - Add a control to a status bar
        This procedure applies to all controls other than a status bar item control.
      - Add a tab item to a tab control
      - Add a control to a tab item
        This procedure provides an example of how to add a control to a tab item.
      - Add a control to a toolbar
      - Add a toolbar to a toolbar tray
      - Add a tree view item to a tree view
      - Add a tree view item to a tree view item
      - Combo Box
        A Combo Box control consists of a list and a selection field. The list presents the options that you can select, and the selection field displays the selected list item.
      - Combo Item [add]
        The Combo Item [add] control is used to add list items to a combo box.
      - Group Box
        A Group Box is a WPF control that is a rectangle that surrounds a set of controls, such as check boxes or radio buttons, under a heading.
      - Items Control
        The Items Control is a Silverlight control that is used to contain another control. Whereas other controls in the Items Control group are used to contain a collection of specific child contols (for example, a list box is used to contain a collection of list box items), the Items Control can contain any control.
      - List Box
        A List Box control displays a collection of selectable items. A list box typically contains list box items; however, it can also contain a list of any of the available controls.
      - List Box Item [add]
        The List Box Item [add] control is used to add list items to a list box. The list items are visible in design mode if the list box size is configured to allow this.
      - List View
        The List View is a WPF control that can be added to a form or user display with list view items added to it.
      - List View Item [add]
        The List View Item [add] is a WPF control that is used to add list items to a list view. The list items are visible in design mode if the list view size is configured to allow this.
      - Menu
        The Menu control allows you to create both statically and dynamically displayed menus. You can manually configure the contents of the menu, or you can bind to a data source.
      - Menu Item [add]
        The Menu Item [add] control is used to add list items to a menu. The list items are visible in design mode if the menu size is configured to allow this.
      - Separator
        A Separator is a control without a Header or Content properties. It cannot accept any child controls. It resembles a horizontal or vertical line (depending on the items control it is placed into), and is used as a simple divider to split or separate items within an items collection into groups.
      - Status Bar
        A Status Bar is a WPF control that is usually located across the bottom of an application window and contains hints, tips, or other information about the status of what is happening inside an active (that is, running) application.
      - Status Bar Item [add]
        The Status Bar Item is a WPF control that is combined with a status bar.
      - Tab
        The Tab control is an items control configured to display its items collection as tabs within a defined area.
      - Tab Item [add]
        Tab Item [add] controls are combined with a Tab control. The Header property sets the text or any control to display on the tab of the Tab Item.
      - Tool Bar
        The Tool Bar is a WPF control that is used as a container for groups of commands or controls that are typically related in their function. A tool bar usually contains buttons that invoke commands.
      - Tool Bar Tray
        A Tool Bar Tray is a WPF control that is a container for toolbars. A tool bar tray allows limited repositioning of its child toolbars using drag and drop. Tool bar trays can have multiple rows of toolbars.
      - Tree View
        A Tree View control organizes its tree view item collection into groups in a hierarchal fashion. While the hierarchal structure is somewhat similar to a menu (for example, the tree view also uses a main item and a list of sub-items to build an organized list of its items collection), the tree view uses a somewhat different layout. Tree view items with connected sub-items are expandable and collapsible.
      - Tree View Item [add]
        Tree View Item [add] controls are combined with the tree view control. The Header property contains the title or any control for the title of the node. The tree view items collection can be other tree view items or other 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

Add a toolbar to a toolbar tray

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
From the Toolbox, click and drag a control to the document tree and drop it on the toolbar control.
The Applying <control (control name)> to Target dialog box appears.
Select the As a Child option, and then click OK.
Configure the properties, as required.

Note: To view the full list of properties, select the Advanced check box.
Add a Tool Bar Tray control to the form.
Right-click the Tool Bar control, and then select Cut.
In the Document Tree, right-click the Toolbar Tray control and select Paste Special.
The Applying <control (control name)> to Target dialog box appears.
Select the As a Child option, and then click OK.

Tip: If there are space constraints on the form, you can resize the toolbar tray to hide entire toolbar controls or the controls on the toolbar control. When you use the toolbar tray in run time, the hidden controls can be expanded using the drop-down arrow on the toolbar.
Configure the properties, as required.

Note: To view the full list of properties, select the Advanced check box.
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