Have a Question?

Custom View Editor

Print

Introduction

Several applications within the Shop Management Suite allow for customized data entry screens. Previously, in order to configure one of these ‘custom views’ the user performing the customization was required to know XAML.

While we have had an editor for some time, Shop Manager 6.6.3.55 introduces a new ‘drag-and-drop’ interface and ‘property panel’ to help users customize their screens and even add new data collection elements. To access the Custom View Editor from the Options dialog, users must have ManageShops and ManageGlobalSettings permissions. Typically, this is only assigned to Admins.

Definitions

  • XAML (Extensible Application Markup Language) – A language used to define the user interface (UI).
  • UI (User interface) – the visible portion of an application that the user interacts. We often refer to this as a ‘View’ or ‘Custom View’.
  • Child/Children – A term used to describe a control or group of controls contained within the current control.
  • Parent – A term used to describe a control that contains the current control.
  • Drag and drop – a term used to describe the transfer of data using a mouse or other pointing device to specify the source and destination of the data. For the purposes of the Custom View Editor it describes the act of adding or moving controls that make up the view.
  • Drag – The act of left-clicking an item and moving the mouse while continuing to hold the left mouse button.
  • Drop – The act of releasing the left mouse button to end a drag operation.
  • Control – a generic term for the things that make up the user interface.
  • TextBox – a control for letting a user enter text characters or numbers.
  • ComboBox – a control that displays a drop-down list of items the user can pick from.
  • DatePicker – a control that lets a user select a date.
  • Label – a control to display content to the user (typically text).
  • TextBlock – a control to display text to the user.
  • GroupBox – a container for a single child that has a border and header.
  • Grid – a layout panel for positioning controls in a table format using columns and rows.
  • Canvas – a layout panel for positioning controls using based on screen coordinates starting at the top left corner of the screen.
  • StackPanel – a layout panel for positioning controls either vertically or horizontally.
  • ViewBox – A container that can scale and stretch a single child to fill the available space.
  • Context menu – a popup menu that is accessed by right-clicking on an item or group of items.
  • Toolbox – a predetermined list of items that can be added to the view.
  • Designer – The area of the application used to define and modify the view.
  • Outline – A list of all controls currently defined in the view organized into a hierarchy.
  • Property Panel – a list of properties for the selected control.
  • X Axis – the horizontal axis of the computer screen. Typically referenced from the left edge of the screen.
  • Y Axis – the vertical axis of the computer screen, Typically referenced from the Top edge of the screen.
  • Z Axis – The depth axis when viewing a screen in 3D. While custom views are technically only 2D, controls can overlap and the Z axis determines which control is ‘on top’ of the others. Typically referenced from the screen toward the user, meaning a control with the largest z axis value is the one displayed to the user.
  • Data Binding (Binding) – A relationship configured on data entry controls such as TextBox to specify that the data entered is stored in the application so it can be saved to the database properly. It can also be used to specify a source of text for a label

Settings

The settings section lets you specify the name of the custom view, as well as the application and inspection (if applicable) that you are designing for. This information will be used to populate the appropriate tools in the Toolbox.

Toolbox

The toolbox contains a list of items that can be added to your view using the designer. To add an item to your view simply drag it from the toolbox onto the designer. The following is a brief description of the types of toolbox items you have access to.

  • Assembly/Component properties – while you cannot add an entire assembly, you can select properties of an assembly or component such as CID, WIP ID, Assembly Configuration, Disposition. All of these tools generate a label with the name of the property as well as a data entry field appropriate to the type of property. For example, CID and WIP ID generate a textbox, while Assembly Configuration and Disposition generate a drop-down list.
  • Component group – selecting a component group will add a groupbox with the name of the component along with controls for all of the properties and elements defined for the component.
  • Component element group – selecting an element group will add a groupbox with the controls for all of the elements defined for the component
  • Component element – selecting an individual element will place a label with the element Display Name and a data entry field appropriate for the type of element (text, drop-down, date picker, yes/no buttons, etc).
  • Inspection name – selecting the inspection Name tool generates a label with the name of the inspection.
  • Inspection Element group – selecting an element group will add a groupbox with the controls for all elements defined in the inspection.
  • Inspection element – selecting an individual element will place a label with the element Display Name and a data entry field appropriate for the type of element (text, drop-down, date picker, yes/no buttons, etc).
  • Images – display one of the Image resources already defined in the system. To add a new image, use the Images menu in the Options dialog.
  • Barcodes – displays a barcode with default settings for the specified type (CID, WIP ID, AAR Component) or create a custom barcode by specifying the size, symbology, and payload.
  • Labels – display the specified ‘barcode label’ within your custom view. Typically used for previewing a label that will be printed at the station where this custom view will be used.
  • Static Text – lets the user enter some static text to display in the view.

Designer

The designer is the area of the application used to define and modify the view. There are two modes: Design and XAML. Design mode is a drag and drop visual editor and this mode is what we will be referencing throughout this article. XAML is for advanced users who want to define the custom view using XAML syntax. It will not be covered here.

To add new controls to the view, select them from the toolbox by clicking and holding the left mouse button over a toolbox item. Move (drag) the mouse pointer to the location on the view where you want to add the new item and then release the left mouse button (drop).

You can also resize and reposition most controls using the mouse. Select the item you want to change by clicking on it. A box will be drawn around the selected item along with small squares in the corners and a move tool in the top left corner that looks a little like a compass.

To resize in only one direction (width or height) drag one edge of the box in the direction you wish to resize. To resize both width and height drag the corner of the box in the direction you wish to resize. To reposition, drag the move tool in the top left corner to the new location. In most cases you can also drag anywhere inside the box, just not on the edges or corners as that is only for resizing.

Most operations (resize, move, etc.) can be performed on one item or on multiple items at once. To select multiple items, hold the control key (Ctrl) on the keyboard while clicking an item to include it in the selection. While holding Ctrl, you can click an item again to remove it from the selection.

Most items have a context menu with shortcuts for actions that can be performed. Some examples of context menu shortcuts include Cut, Copy, Paste, Delete, Undo/Redo. Other actions include ‘Bring to Front’, ‘Forward’, ‘Backward’, ‘Send to Back’. These actions are used to position the controls along the Z axis with ‘Front’ being the largest Z axis value and therefore what the user sees even if other controls overlap its position.

Other context menu shortcuts are available based on the type of control selected, or the number of controls selected. For example, if multiple controls are selected the user will see shortcuts for grouping them together in a GroupBox, StackPanel, ViewBox, etc.

Outline

The Outline is a hierarchical list of all controls that make up the view. Sometimes it is difficult to select the control you want to modify because it a child of another control. For example, a StackPanel inside a GroupBox. You may intend to select the GroupBox so you can resize or move it. Because the StackPanel is a child of the GroupBox and takes up the entire GroupBox, clicking inside the GroupBox actually selects the StackPanel or one of its children. You can use the Outline to see which control is selected and to change the selection by clicking on the item. You can actually drag controls to move them between containers or reposition them within certain containers (like StackPanel). You also have access to most of the same Context Menu shortcuts that you do from the Designer.

Outline

Property Panel

The property panel contains information about the settings for the selected control(s). You can change a setting by typing the property value in the box or selecting from a list. The most common properties for the selected control are at the top under ‘Popular’. The rest of the properties are in the ‘Other’ section.

There are dozens of properties for most controls, most of which you will probably never need to change. Here is a list of the most common properties:

  • Background – Sets the background color of the control.
  • Foreground – Sets the foreground color which in most controls affects the color of the Text that is displayed.
  • BorderBrush – For controls that have a border (like GroupBox) this sets the color of the border.
  • BorderThickness – For controls that have a border (like GroupBox) this sets the thickness (in pixels) of the border.
  • FontFamily – Sets the name of the font used to display test.
  • FontWeight – Sets the ‘thickness’ of text (examples: normal or Bold).
  • FontSize – Sets the size the text.
  • Width – Sets the width of the control in pixels.
  • Height – Sets the height of the control in pixels.
  • VerticalAlignment – Sets the vertical positioning of a control within its parent by aligning it to the top, bottom, or center.
  • HorizontalAligment – Sets the horiontal positioning of a control within its parent by aligning it the left, right, or center.
  • TextAlignment – Sets the horizontal alignment of text (left, right, center, justify). Only valid for controls that have a Text property such as TextBox.
  • Margin – Sets the amount of space between this control and other controls. You can specify a margin for each side of a control (left, top, right, bottom) such as “5,5,5,5” or specify the same margin for all sides as “5”.
  • Padding – Sets the amount of space inside this control. Padding can be specified for each side of a control (left, top, right, bottom) such as “5,5,5,5” or by specifying the same pading for all sides such as “5”.
  • Text – Sets the text that is displayed in controls contain text such as TextBlock and TextBox. Controls used for data entry like TextBox will need to specify a Binding.
  • Content – Sets the content that is displayed in a content control such as a Label. Labels can contain text or other controls like Images, TextBlocks, TextBoxes, etc. although they typically are used to display text. Often the Content property is specified by a Binding.

Preview

The Preview button will create a new window that will display the custom view as it would appear in the application where it will be used. This will allow you to test your custom view for things like data entry, appearance, layout, etc. While you will not be able to save data or load existing data, you can interact with the preview to test entering text, verifying combo box items, etc. Not all features that may be used by your custom view are supported at this time, but it should be a good approximation.

Tags: