Displays Module How-to Guide

Create, customize, and manage visual displays.

How-to → Pillars → Operator → Displays | Concept | Tutorial | How-to Guide | Reference

Quick Start: Your First Display

1. Create a Display

1. Navigate to Displays → Draw
2. Click New Document button
3. Configure:
   • Name: MainDisplay
   • Engine: Portable (works on all platforms)
   • Template: Canvas (for process graphics) or Dashboard (for KPIs)
4. Click OK

2. Add Basic Elements

Quick Method - Drag Tags:

1. From right panel, drag tags directly to canvas
2. System auto-creates appropriate visualization

Manual Method - Add Components:

1. From left panel, select component (Button, Gauge, etc.)
2. Drag to display
3. Double-click to configure

3. Test Your Display

1. Click Preview button in toolbar
2. Or keep solution running and save display
3. View in Rich Client or refresh Web Client

Display Types and When to Use Them

Platform Deployment

Engine Options

RESS Technology

For mobile devices, RESS (Responsive + Server-Side) automatically:

• Detects device type (phone/tablet/desktop)
• Delivers optimized content
• Maintains responsive behavior within each class

Basic Configuration Workflow

Step 1: Plan Your Application

1. Define Layout Structure
   • Header: Navigation/title
   • Menu: Main navigation
   • Content: Primary displays
   • Footer: Status/information
2. Identify Display Types
   • Process overviews (Canvas)
   • KPI dashboards (Dashboard)
   • Detail popups (Popup)
   • User inputs (Dialog)

Step 2: Create Layout

1. Go to Displays → Layouts
2. Click Add button
3. Name: "MainLayout"
4. Map displays to regions:
   • Header → HeaderDisplay
   • Menu → NavigationMenu
   • Content → (changes dynamically)

Step 3: Configure Startup

1. Navigate to Displays → Client Settings
2. Set Initial Layout: MainLayout
3. Configure display behavior:
   • Theme selection
   • Security indicators
   • Multi-monitor (if needed)

Essential Display Elements

Common Components

Adding Dynamics

Quick dynamic properties (double-click element):

• Visibility: Show/hide based on tag
• Color: Change based on value
• Position: Move with tag value
• Size: Scale with data
• Rotation: Rotate based on angle

Display Navigation

Opening Displays

From Script:

csharp

// Replace content area
@Display.ProcessOverview.Open();

// Open as popup
@Display.TrendPopup.OpenPopup();

// Open as dialog
@Display.ConfirmDialog.OpenDialog();

From Button:

1. Select button
2. Set Action property
3. Choose "OpenDisplay"
4. Select target display

Changing Layouts

csharp

// Switch entire layout
@Client.OpenLayout("OperatorLayout");

// Just change content
@Display.NewDisplay.Open();

Display CodeBehind

Basic Structure

csharp

public void DisplayOpening()
{
    // Initialize before display opens
    LoadUserPreferences();
}

public void DisplayIsOpen() 
{
    // Execute after display is visible
    StartDataRefresh();
}

public void DisplayClosing()
{
    // Cleanup when closing
    SaveUserSettings();
}

Handling User Input

csharp

public void Button1_Click(object sender, EventArgs e)
{
    @Tag.PumpStart = 1;
    @Display.PumpDetails.OpenPopup();
}

Common Tasks

Making Displays Responsive

1. Use Dashboard template
2. Set OnResize: Responsive
3. Configure grid columns/rows
4. Test on different screen sizes

Supporting Multiple Languages

1. Create dictionaries in Displays → Localization
2. Use syntax: @(LocalizationKey)
3. Switch at runtime: @Client.Localization = "Spanish"

Optimizing for Mobile

1. Create mobile-specific displays
2. In Layout, configure Mobile column
3. Use larger buttons and fonts
4. Minimize text input

Performance Tips

? Limit elements per display - Keep under 500 elements ? Use symbols - Reuse instead of recreating ? Optimize images - Compress and resize appropriately ? Minimize animations - Use only necessary dynamics ? Test on target platform - Verify performance early

Troubleshooting

Display Won't Open

• Check BuildStatus for errors
• Verify display name spelling
• Confirm RunSecurity permissions
• Check layout configuration

Poor Performance

• Reduce element count
• Simplify animations
• Check CodeBehind for loops
• Use async methods

Platform Differences

• Verify Engine setting
• Test on target platform
• Check component compatibility
• Review feature limitations

Next Steps

Detailed Guides

• Creating Canvas Displays → Process graphics tutorial
• Building Dashboards → Responsive layouts guide
• Symbol Library → Using and customizing symbols
• Advanced Dynamics → Complex animations

Related Topics

• [Client Settings →] Runtime configuration
• [Themes →] Visual customization
• [Localization →] Multi-language support

This structure provides a solid overview while acknowledging that detailed coverage requires separate guides for each major area. Would you like me to create one of the child guides (like "Creating Canvas Displays" or "Building Dashboards") to show how they would complement this main guide?

Claude can make mistakes.
Please double-check responses.

In this section...