Page History

Designer →  Tutorial | Concept | How-to Guide | Reference

Create Solution Structure

1. Open Designer and Set Preferences

Launch Designer

1. From Solution Center, open your solution
2. Designer launches automatically
3. Welcome page displays solution information

Configure Your Workspace

1. On Welcome page, find Designer User Preferences
2. Select your preferred Theme:
   • Try Sky (light mode → Navy at night)
   • Notice how UI changes with theme selection
3. Set Auto-save to Every 10 minutes

2. Explore Navigation

Quick Navigation Bar

Test each shortcut on the top left navigation bar:

1. Click Go to Designer Home Page icon - returns to Welcome page
2. Click Go to AssetTree icon - jumps to Unified Namespace
3. Click Go to Displays Draw icon - opens display editor
4. Click Go to Runtime Startup icon - shows startup configuration
5. Use Navigate Back arrows to navigate history

3. Create Quick Tags

Rapid Tag Creation

1. Go to Unified Namespace → Tags
2. Create placeholder tags quickly:
3. Click "New Item" or use the fast creation shortcut, by clicking on the "Name" cell, pressing "Space" then "Enter", create three tags using this procedure

Multiple Tags Edition

1. Select all three tags (Ctrl+Click or Shift+Click)
2. Right click the selection and click on "Edit Combined Rows"
3. Change the tag type to Double or Decimal

4. Test Drawing Environment

Create Simple Display

1. Go to Displays → List
2. Click on the "New Item" button, choose Basic → Page (Canvas) and name it "Test"
3. The draw environment will open automatically

Draw Basic Elements

1. From left toolbar, select Rectangle tool
2. Draw a rectangle on canvas
3. With rectangle selected, look at Properties Panel (right side)
4. Change Fill Color to element blue

Add Tags to Display

1. On the right side of the display, under "Drag Tags to Display", drag and drop the created tags to the canvas area
2. Choose "Insert Textbox"
3. Arrange them on the display, using the alignment buttons on the top menu

5. Explore Alarms Module

Copy-Paste Workflow

1. Return to Tags (use Quick Nav icon)
2. Select your three

Create New Solution

1. Open Solution Center
2. Click New
3. Select Product Edition FrameworX then click Next
4. Select Multiplatform then click Next
5. Configure:
   • Name: TankFarmMonitor
   • Template: HeaderLayout
6. Click Create New Solution
7. Designer opens automatically

Create Asset Folders

1. Go to Unified Namespace → AssetTree
2. Click on the "New Asset Folder..." button
3. Name it TankFarm
4. Under TankFarm, create three more Asset Folder and name it Tank1, Tank2 and Tank3 respectively

Configure Tags

Create Basic Tags

Using simple types (no UserTypes yet):

1. Go to Unified Namespace → Tags
2. Create these tags:

Tank 1 Tags:

1. Copy-Paste for Tank 2 and 3:

• Select all Tank1 rows (Ctrl+Click)
• • Copy (Ctrl+C)
  • Paste (Ctrl+V)
  • Find/Replace: Tank1 → Tank2
  • Paste again and replace Tank2 → Tank3

Add Simulation

For testing without real devices:

1. Select Tank1_Level
2. In properties, set:
   • Min: 0
   • Max: 100
   • Simulation: Ramp
   • Period: 60 seconds
3. For temperatures:
   • Tank1_Temp: Random, 20-30°C
   • Tank2_Temp: Random, 20-30°C
   • Tank3_Temp: Random, 20-30°C

Setup Alarms (3 min)

Copy Tags to Alarms

1. Go back to Tags table
2. Select level tags:
   • Tank1_Level
   • Tank2_Level
   • Tank3_Level
3. Copy (Ctrl+C)
4. Go to Alarms → Items
5. Paste (Ctrl+V)
6. Configure each row:

1. Copy first row, paste, modify for Tank2 and Tank3

Configure Historian (3 min)

Copy Tags to Historian

1. Go to Tags table
2. Select all level and temperature tags
3. Copy (Ctrl+C)
4. Go to Historian → Tags
5. Paste (Ctrl+V)
6. Set intervals:
   • Level tags: 10 seconds
   • Temperature tags: 30 seconds

Storage Configuration

1. Go to Historian → Storage
2. Use default SQLite for testing
3. Set retention: 30 days

Create Main Display (7 min)

Setup Display

1. Go to Displays → Draw
2. Create new display: Overview

Quick Tank Creation

For each tank:

1. Draw Rectangle (tank body)
   • Size: 200x300
   • Fill: Light gray
   • Border: Dark gray, 2px
2. Copy Tag to Display:
   • Go to Tags table
   • Select Tank1_Level
   • Copy (Ctrl+C)
   • Go back to display
   • Paste (Ctrl+V)
   • Text box appears with tag binding
3. Add Bargraph:
   • Draw rectangle inside tank
   • Double-click for properties
   • Dynamics → Bargraph
   • Expression: Tag.Tank1_Level
   • Direction: Bottom to Top
4. Add Values Display:
   • Add TextBox
   • Type: Level: #Tag.Tank1_Level# %
   • Copy, paste, change to: Temp: #Tag.Tank1_Temp# °C
5. Status Indicator:
   • Draw circle
   • Dynamics → FillColor
   • Expression: Tag.Tank1_Status
   • Limits: 0=Gray, 1=Yellow, 2=Green
6. Duplicate for Other Tanks:
   • Select all Tank1 graphics
   • Copy and paste twice
   • Use Replace (Ctrl+H): Tank1 → Tank2, Tank3

Create Trend Display (3 min)

Add Trend from Historian

1. tags
2. Copy (Ctrl+C)

1. Navigate to Alarms → Items
2. Paste (Ctrl+V)

1. Notice tags automatically create alarm rows
2. Set simple limits (e.g., Hi: 80, Lo: 20)

6. Review Track Changes

See Your Modifications

1. Click Track Changes
2. View list of all changes you've made:
   • Tag creations
   • Display modifications
   • Alarm configurations
3. Notice "RowState", "ChangedObject" and  "Date Created/Modified" (you can right click the grid header and enable the columns visibility)
4. This helps with team collaboration

7. Build and Test

Build Solution

1. Go to Runtime → Build and Publish
2. Click Build button
3. Check Output panel at bottom for any errors
4. Green checkmark = successful build

Quick Test

Configure Chart

1. Set time range: Last hour
2. Add navigation buttons to return to Overview

Create Simple Report (3 min)

Production Report

1. Go to Reports → Text
2. Create new: DailyReport
3. Add content:

   DAILY TANK REPORT
   Date: @Info.Date@
   
   Tank 1: @Tag.Tank1_Level@ %
   Tank 2: @Tag.Tank2_Level@ %
   Tank 3: @Tag.Tank3_Level@ %
   
   Average: @Tag.Average@

4. Go to Scripts → Tasks
5. Create task to calculate average:

   csharp

   @Tag.Average = (@Tag.Tank1_Level + 
                   @Tag.Tank2_Level + 
                   @Tag.Tank3_Level) / 3;

Test Solution (2 min)

Start Test Mode

1. Press F5 or click Run shortcut
2. Verify:
   • Levels changing (simulation)
   • Alarms triggering
   • Trends updating
   • Navigation working

Test Checklist

• All tags showing values
• Bargraphs animating
• Alarms at 90% and 10%
• Trend showing history
• Report generating

Run Solution (2 min)

1. Go to Runtime → Startup
2. Select Development profile
3. Click Run Startup

Open Clients

1. Web Browser
2. Mobile: Use tablet browser
3. Navigate through displays

Productivity Tips

Copy-Paste Workflow

The power of copy-paste:

1. Create once in Tags
2. Copy to Alarms, Historian, Points
3. Automatic binding when pasted to displays
4. Bulk operations with Find/Replace

Quick Duplication

For similar equipment:

1. Configure one completely
2. Copy all related items
3. Paste and Find/Replace names
4. Saves 70% configuration time

Direct Tag Dropping

Alternative to copy-paste:

1. Select tags in tree
2. Drag directly to display
3. Auto-creates appropriate control

Next Steps

Add Complexity Gradually

Now that basics work, add:

1. Device Connection (10 min)
   • Replace simulation with real PLCs
   • Map points to tags
2. User Security (10 min)
   • Add login screen
   • Configure permissions
3. Advanced Graphics (15 min)
   • Import P&ID backgrounds
   • Add animations
   • Create popups
4. Business Logic (15 min)
   • Calculate KPIs
   • Add recipes
   • Create schedules

Learning Resources

• Tutorial: Connecting to Devices
• Tutorial: Adding Scripts
• Tutorial: Security Configuration
• Video: Advanced Graphics

Troubleshooting

Tags not updating:

• Check simulation enabled
• Verify runtime started
• Look for typos in names

Copy-paste not working:

• Ensure compatible types
• Check column mapping
• Verify destination table

Alarms not triggering:

• Check limits are correct
• Verify tag values reaching limits
• Ensure alarm group enabled

2. The solution will start the runtime
3. Click Stop when done (it forces the application to stop running)

8. Explore Output Panels 

Bottom Workspace Area

1. Look at bottom of Designer window
2. Click different tabs:
   • Output - build messages
   • Find Results - cross-reference searches
   • Error List - validation issues

Key Takeaways

You've learned to:

• Navigate Designer using Quick Nav shortcuts
• Configure preferences and themes
• Create tags with rapid entry methods
• Copy-paste between modules for efficiency
• Draw basic displays with tag bindings
• Explore Data Explorer and Track Changes
• Build and test your solution

Productivity Tips Discovered

1. Space-Enter rapid tag creation
2. Copy-paste tags to any module
3. IntelliSense everywhere with @
4. Quick Nav icons for fast jumping

Troubleshooting

Can't find a module?

• Check Pillar Filter setting
• Try "All Modules" view

Changes not saving?

• Check auto-save settings
• Look for save icon in tabs
• Verify user permissions

IntelliSense not appearing?

• Type @ to trigger
• Check if in valid context
• Ensure solution is saved

In this section...