The Designer Tutorial walks you through using the Designer interface to configure your solution. Learn to navigate between modules, use productivity features, and understand the workspace layout for efficient solution development. You'll practice essential skills like Quick Navigation shortcuts, rapid tag creation, copy-paste workflows between modules, and workspace customization. These hands-on exercises focus on mastering the Designer tool itself rather than specific configurations, giving you the foundation to work efficiently across all modules.

Prerequisites:

  • FrameworX installed
  • Solution created in Solution Center

In this page:


    

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


In this section...