Skip to main content
Have a Question?

Custom View Editor

Print

The Custom View Editor lets you design your own custom screens (“views”) inside Shop Manager without needing to know any programming. You can drag and drop fields, labels, and other elements onto a design surface, connect them to your shop’s data, and save the result for use in other SMS applications like Component Inspection.

Overview of the Editor Layout

When you open a custom view for editing, the screen is divided into several panels (sometimes called “panes”) that you can rearrange, resize, or hide by dragging their title bars. The main areas are:

  • Left side: Custom View Settings and the Toolbox of available items you can add.
  • Center: The Design Surface, where you build your view visually.
  • Right side: Properties, Behaviors, Triggers, Elements, Styles, Outline, and the AI Assistant.
  • Bottom: Buttons for Preview, Save, Cancel, and Make Current.

Each panel can be temporarily hidden (auto-hidden) by clicking the pin icon in its title bar, giving you more room to work. Click the panel’s tab along the edge of the screen to bring it back.

Custom View Settings Panel

Located in the upper-left corner, this panel lets you configure the basic properties of your custom view:

  • Name – The name of the custom view. Choose something descriptive so you can find it later.
  • Application – Which Shop Manager application this view belongs to.
  • Inspection – The inspection definition this view is associated with, if applicable.
  • Resolution – The screen resolution the view is designed for.
  • Legacy Mode – Turn this on if the view needs to remain compatible with older versions of SMS applications. When enabled, the view is wrapped in a container when it is saved.
  • Revision – Shows the current revision number of the view (only shown for views that support version history).
  • Notes – A free-text field where you can describe what changed in this revision.
  • View History – A button that opens the Version History panel (see below).

Version History

For views that support revisions, clicking View History opens a pop-up list showing every saved version of the view, including:

  • Revision number
  • Last Modified date and time
  • Modified By – the user who made the change
  • Notes describing the change
  • Is Active – whether this revision is the one currently in use
  • Activation Date and Activated By – when and by whom the revision was made active

The row for the revision you are currently viewing is shown in bold. Right-click any row to Compare to Current, which shows you the differences between that older revision and the one you are currently editing.

Click the small “X” icon in the top-right corner of the pop-up to close the Version History panel.

Toolbox

The Toolbox, located below the Settings panel, contains every item you can add to your custom view, such as:

  • Text fields and labels
  • Data-driven fields (fields tied to specific pieces of shop data)
  • Inspection elements
  • Layout components (groups, containers, etc.)

Items in the Toolbox are organized into expandable groups. Click a group’s arrow to expand or collapse it and see the items inside.

To add an item to your view: click and drag it from the Toolbox onto the Design Surface in the location where you want it to appear.

Design Surface

The Design Surface is the large area in the center of the screen. This is a “what you see is what you get” preview of your custom view – items placed here will appear the same way when the view is used in the application.

Design / Split / Xaml Toggle Buttons

At the top of the Design Surface area, three buttons let you choose how you want to work:

  • Design – Shows only the visual Design Surface (default, recommended for most users).
  • Split – Shows the Design Surface and the underlying technical code side-by-side.
  • Xaml – Shows only the underlying technical code (for advanced users).

A Swap Sides button is also available, which switches which side of the screen the Design Surface and code editor appear on when using Split view.

Code View and Error List

When using Split or Xaml mode, you’ll see the underlying technical description of your view. This is intended for advanced users who are comfortable editing code directly.

Below the code editor, an error list displays any problems found in the code, showing the line and column number where the issue occurs along with a description of the problem. Most everyday users will not need to use this area, since the Design Surface and Toolbox handle these details automatically.

Properties Panel

The Properties panel, on the right side of the screen, lets you fine-tune the item you currently have selected on the Design Surface. It has several tabs:

Properties Tab

Shows a list of settings for the selected item, such as its size, color, text, and alignment. Change a value and the Design Surface updates immediately.

Elements Tab

If the item you selected is linked to one or more data elements, this tab shows a separate sub-tab for each linked element, letting you review or adjust its basic settings. Each sub-tab includes a small menu with:

  • Save – Save your changes to the Element (does not save changes to the View)
    • Save for current shop – Saves changes to the Element only for the currently selected shop.
    • Save for all shops – Saves change to the Element, applying your changes to all shops.
  • Cancel – Discards changes made to that element.

Data Bindings

“Data Bindings” connect an item on your Design Surface to a real piece of information in Shop Manager, such as a specific inspection value or a piece of work order information. This section only appears for items that support this feature.

  • Click the dropdown showing the currently bound item (or “(none)” if nothing is bound yet).
  • A tree list appears, organized into categories. Expand the categories and click the item you want to bind to.
  • Some items support binding to multiple pieces of data at once. Use the Add Binding button to add another binding “slot,” and the small x button next to a slot to remove it.
  • Once you’ve selected the data you want, click the Bind button to connect the selected Design Surface item to that data.

Styles Panel

The Styles panel lets you create and manage reusable visual styles (fonts, colors, borders, etc.) that can be applied consistently to multiple items throughout your custom view, similar to styles in a word processor.

Outline Panel

The Outline panel shows a simplified, hierarchical list (like a table of contents) of every item in your custom view, nested to show which items are contained inside others. This is useful for quickly locating and selecting an item, especially in a complex view where items may overlap visually on the Design Surface.

Bottom Toolbar

Along the bottom of the screen you’ll find the primary action buttons:

  • Preview – Opens a preview of your custom view exactly as it will appear to end users, without saving anything.
  • Camera icon (Save as image) – Captures a snapshot image of your current design, which can be useful for documentation or sharing with colleagues.
  • Make Current – (Only shown for views that support version history) Marks the revision you are currently editing as the active version that will be used throughout the application.
  • Save – Saves your changes.
  • Cancel – Closes the editor without saving your changes.

Tips for Building Custom Views

  • Start by placing your labels and fields roughly where you want them, then fine-tune spacing and alignment using the Properties panel.
  • Use the Outline panel if you lose track of an item that’s hidden behind another one.
  • Always use Preview to check your work before saving, especially after making layout changes.
  • If your organization uses version history, add clear notes each time you save so others (or future you) understand what changed.
  • Only enable Legacy Mode if you know the view needs to work with an older version of a Shop Manager application – ask your administrator if you’re not sure.

Tags: