Edit properties of display elements.
How-to Guides → Pillars → Operator → Displays → Workspace → Dashboards | Settings | Properties | Tags
Drawing Properties Panel (Reference) displays context-sensitive properties for selected elements, organized in expandable sections within the Properties Sidebar.
Properties Panel provides:
- Element-specific settings
- Visual configuration
- Layout control
- Dynamic bindings
- Transform effects
- Replace operations
Table of Contents maxLevel 2 minLevel 2 indent 10px exclude Steps style none
roperty Sections
Drawing Properties
Core element identification:
- Element - Object type
- Uid - Custom identifier
- Replace Element - Swap symbols preserving bindings
| Info | ||
|---|---|---|
| ||
The context menu, Replace Element, or the icon at the right side of the Drawing Properties element identified, allow to select another component, still preserving the tag binding. |
Appearance
Visual styling controls:
- Theme - Preview theme (design-time only)
- Fill - Background color/pattern
- Line - Border properties
- Opacity - Transparency level
Connections
Enable shape connectors:
- Links shapes with polylines
- Auto-adjusts on movement
- Visual relationship indicators
Layout
Position and responsive settings:
| Property | Function | Responsive |
|---|---|---|
| Left/Top | Position | ? Enable |
| Width/Height | Size | ? Enable |
Checked properties scale proportionally when display resizes.
Advanced Properties
Transform
Visual effects:
- DropShadow - Shadow effects
- Rotation - Angular rotation
- Skew - Distortion effects
Border Radius
Rectangle corners (Rectangle only):
- X - Horizontal radius
- Y - Vertical radius
Text
Typography settings:
- Font family, size, style
- Alignment and wrapping
- Localization options
Contents Align
Internal alignment:
- Left, Center, Right
- Top, Middle, Bottom
Dynamic Operations
Dynamics Clipboard
- GET - Copy dynamics to clipboard
- APPLY - Paste dynamics to selection
- EDIT - Open dynamics editor
Right-click dynamic names to hide from apply.
Replace Tags/Strings
Batch replacement:
- Select source tag
- Enter replacement
- Updates all instances
Draw Tool Options
Visibility Helpers
- Highlight Location - Shows element boundaries
- Apply Shadow on TextBlocks - Improves text visibility (design-time only)
Insert Tags to Displays (Reference)
Insert Tags enables direct integration of solution tags into displays by dragging or pasting, automatically creating appropriate visual elements with data bindings.
Overview
Tag insertion provides:
- Automatic UI generation
- Symbol integration
- Array handling
- Custom type support
- Asset conversion
- Batch operations
Basic Tag Insertion
Copy and Paste Method
- Navigate to Unified Namespace → Tags
- Right-click tag row
- Select Copy Selected Row
- In Draw workspace, right-click
- Select Paste
Drag and Drop Method
- Open Tags Panel (right side)
- Locate desired tag
- Drag to display canvas
- Auto-creates appropriate control
Auto-Generated Elements
Simple Tags
Creates label and value display:
[Tag Name] [TextBox with Value]Array Tags
Generates elements for all indices:
Tag.Array[0] [Value]
Tag.Array[1] [Value]
Tag.Array[2] [Value]
...Custom Types
Creates hierarchical display:
Parent.Element1 [Value]
Parent.Element2 [Value]Symbol Integration
When tag name matches symbol:
- Symbol automatically selected
- Tag binding pre-configured
- Dynamic properties set
Configure at Displays → Symbols for tag-symbol mapping.
Asset Usage in Displays
Portable/HTML5 Displays
Assets require type conversion:
csharp
// Convert asset to integer
@TK.ToInt(Asset.Path)
// Convert to string
@TK.ToString(Asset.Path)
// Use in visibility
Visible = @TK.ToInt(Asset.Status) == 1WPF-Only Displays
Direct dynamic handling:
csharp
// Direct asset usage
Value = @Asset.Path.ValueBest Practices Checklist
- Organize Tags First - Structure before inserting
- Use Consistent Naming - Enables symbol matching
- Test Array Limits - Verify all elements
- Preview Layout - Check spacing
- Configure Symbols - Set up matching names
- Handle Assets Properly - Convert for portability
Troubleshooting
Tags not pasting:
- Verify tag exists
- Check clipboard content
- Ensure draw area focus
Wrong element type:
- Check data type
- Review symbol mappings
- Verify tag configuration
Assets not working:
- Check display engine
- Apply type conversion
- Verify asset path
In this section...
| Page Tree | ||
|---|---|---|
|
Overview
Drawing Properties are sets of attributes that define the appearance of the selected element in the display. They allow fine-tuning the appearance and behavior of each element, including options for fill, line, opacity, and various display parameters like mode, background, and resizing behavior.
Those properties are shown at the Properties SideBar, at the right side of the Draw environment.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Properties Expander
The properties are organized in expander controls.
The visible expanders are shown based on the selected elements, appearing only if all selected elements have the corresponding properties. However, the Find UI Element, Appearance, and Display settings boxes are always visible, as they pertain to general display settings rather than any specific element.
Drawing Properties
Element: Displays the TYPE of the selected object.
Uid: Allows putting a string (or number) for a custom identification of the element.
Replace Element: This option is available only when selecting a symbol in the Drawing area. It allows you to replace the UI element while retaining tag links and their dynamics. There are two ways to use it: (1) right-click the selected symbol and choose Replace Element, or (2) go to the Displays/Draw section in the right panel. Under Drawing Properties, click the button next to Symbol UID to open the dialog where you will select the new symbol to replace it.
Appearance
Theme: Changes the runtime Theme preview in the drawing area. This configuration is not used when running the solution. The initial Theme the solution will use is defined at Displays Client Settings, and it can be changed in the runtime setting the property Client.Theme.
The other properties are Fill, Line, Stroke and Opacity.
Connections
Rectangles, Elipses, and combination of Shapes elements, can have the properties to act as a connector.
When that property of the shape is enabled, using a PolyLine, or a GridLine, you can connect the two shapes, to the PolyLine will adjust automatically when moving the objects.
Layout
Set position and size using parameters: Left, Top, Width, Height.
The CheckBoxes on the side of the layout coordinates are used when creating displays with OnResize property set to Responsive.
When set, it will change that layout element, proportionally, when the displays is resized.
For example, if you've set the width checkbox, when resizing the display in runtime, the width of that element will also resize proportionally.
Transform
Apply visual effects: DropShadow, Rotation, Skew. Customizable parameters for each effect.
Border Radius
Adjust corner curvature with X (horizontal) and Y (vertical) values. Available only for Rectangle objects.
Text
Manage text content and appearance. Options include font, localization, and text wrapping.
Contents Align
Manage content alignment within an object: options like left, right, and center.
Dynamics
GET button: Copy the dynamic properties of the selected element to an internal clipboard.
APPLY button: Apply the dynamics in the internal clipboard to the selected elements.
EDIT button: Open the dynamics window, allowing you to edit the dynamics for the selected components.
You can hide some dynamics from being applied, right-click on the text showing the dynamic name under the buttons.
Replace Tags/Strings
Replace tags and strings on the select elements in the displays. In the example below, it would automatically change all mentions of "Button" to "Button New" the the selected elements.
Draw Tool Options
Highlight Location: When using the Direct Select Cursor (Black Arrow), or using the Display TreeView, this CheckBox allows to add lines to clearly identify the location of the element in the display.
Apply Shadow on TextBlocks: When checked it will apply a Shadow in all TextBlock elements in the display. This configuration affects only the drawing tool, it doesn't change the appearance in the runtime. The reason to use this checkbox is to facilitate to locate some Texts, when the FontColor is to close to the Background color of the display.
In this section: