Designer Tutorial

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

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 tags
3. Copy (Ctrl+C)
4. Navigate to Alarms → Items
5. Paste (Ctrl+V)
6. Notice tags automatically create alarm rows
7. 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

1. Go to Runtime → Startup
2. Select Development profile
3. Click Run Startup
4. The solution will start the runtime
5. 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...