View Source

Displays and Symbols

Displays are the graphic regions or windows that make up the overall layout of the FactoryStudio user interface. Symbols are the individual elements included in a display. The following sections describe how to work with the user interface:

Selecting and Creating Displays describes how to create displays and select existing displays for editing.
Creating Layouts discusses how to compose displays in an overall user interface layout.
Designer Drawing Tools explains the many drawing tools provided to create and manipulate shapes and symbols.
Dynamics and Animation discusses how objects may be given various dynamic changes when certain events occur.
User Controls presents the settings panels that can be used to configure various types of data presentations such as pie charts, bar charts, and trend charts.
Managing Images and Symbols discusses the use of graphic elements including Images, Symbols from the Symbol Factory, and Local Symbols.
Linking Tags and Symbols explains how to use a symbol to represent a tag type.
Displays Code Behind discusses how to write code for a display to be executed when certain events occur.
Desktop and iOS Client Settings describes the special settings required depending on whether the display is to be presented on a desktop, a web browser, or an iOS device.
The Display Namespace presents the complete runtime namespace for Display objects.

Selecting and Creating Displays.i.creating:displays;
.i.displays:creating;
Displays are components of the user interface for your application. A display can have multiple elements in it, including controls, data display areas, static areas that always display and more. Elements of the display can be static, that is, they always display, such as a menu bar, toolbar, or status bar. Displays can also change depending on what the user clicks or selects.
.i.application interface:creating;
.i.user interface:creating;
To select displays:

Go to Edit > Displays > Displays.
Select CardView or TableView.

See the list of available displays.

Column	Description
Name	Read-only. Name of the Display. Configured in Draw.
ClientType	Read-only. Shows the type of the client, either NET or HTML5.
Mode	Read-only. Shows whether the display is used as a Page, a Popup, or a Dialog. Configured in Draw.
Preview	Read-only. Shows a thumbnail of the display.
AllowSelection	Select to allow users to select the display from the PageSelector.
Width	Read-only. Display width in WPF units (one WPF unit = 1/96 inch). Configured in Draw
Height	Read-only. Display height in WPF units. Configured in Draw
Left	Read-only. Left margin, in WPF units, for Canvas layouts. Configured in Draw
Top	Read-only. Top margin, in WPF units, for Canvas layouts. Configured in Draw
Dimension	Read-only. Configured in Draw
Size	Read-only. Configured in Draw
EditSecurity	Select which categories of users have access to edit this display.
RunSecurity	Select which categories of users have access to this display at runtime.
Description	Enter a description for this display.

Version 8 > Displays and Symbols > worddave4c17b1f914eb55b95a5e8d31f3e37ea.png

In order to edit a display, select the display and press the Version 8 > Displays and Symbols > worddav6cc48426f2595eceedd2431211dbb4fe.png

DRAW button.
When you are in the Drawing environment you can also switch displays using the dropdown list on the top toolbar.
To create a new display:

Go to Draw > Drawing.
Click Close Display and Create New One. (If you do not see this button in the toolbar, make your window wider.) The New Display window displays.

Enter information, as needed.

Column	Description
Display Name	Enter a name for the display.
Description	Enter a description for the display.
.NET Smart Client	Select this option if the display is designed to be presented natively on the host platform.
HTML5	If you plan to use this display as HTML5 on browsers, select this option when you create the display. You cannot change it later.

Select to be able to use this display with any browser. When you select this option, display settings in other parts of the Draw area only show options that are compatible with the HTML5 feature.|

iPad/iPhone iOS Target

If you plan to use this display for iPad and iPhone users, select this option when you create the display. You cannot change it later.
Select to be able to use this display with iPads and iPhones. When you select this option, display settings in other parts of the Draw area only show options that are applicable to both Windows and iPads/iPhones.
Select the default view for iPad and iPhone users: Landscape or Portrait.|
Click OK.

On the left side of the window in the DisplaySettings, enter or select information, as needed. If you selected the iPad/iPhone iOS Target or HTML5 option when you created the display, not all of the DisplaySettings are available.

Column

Description

Mode

Select the type of display you want to create:

Page—Default. Opening a page automatically closes the last page on the current layout and displays in the area last in the list on Displays > Layouts page. Only pages display in the layout.
Popup—A popup opens on the top of all other displays. When you open a new page, by default, all popup displays are closed. Controls on other displays are available.

Dialog—A dialog opens as a modal dialog, which disables the controls on all other open displays until you close the dialog. Clicking OK executes an appropriate method on the display CodeBehind.|

Background	Select the background color for the display.
Width	Enter the width of the display, in WPF units (device-independent pixels; one WPF unit = 1/96 inch). Be sure to take into account the size of the layout.
Height	Enter the width of the display, in WPF units (device-independent pixels; one WPF unit = 1/96 inch). Be sure to take into account the size of the layout.
Border	Select the type of border.
CloseButton	Select to display Close button. Available only for Popups and Dialogs.
Animation	Select the type of animation to use when starting this display.
Show on PageSelector Object	Select to include this display in the page selector that lets users go directly to a different display in the application.
iPad/iPhone iOS target	Read-only. Shows whether you selected the iPad/iPhone iOS Target option when you created the display.
Placement	Select where on the layout you want to place the display. Available only for Popups and Dialogs.
Target	Select whether the display appears relative to the mouse position or relative to the whole window. Available only for Popups and Dialogs.
DialogButtons	Select the buttons you want on the dialog. Available only for Dialogs.
Title	Enter a title that appears at the top the display.
Title Background	Select a color for the title background.
Stays Open on Page Change	Leave the popup window open when the user clicks something that opens a different display. Available only for Popups.
Stays Open After Losing Focus	Leave the popup window open when the user clicks a different display. Available only for Popups.
Left	Enter how far from the left of the layout the display should appear, in WPF units. Available only for Canvas layouts.
Top	Enter how far from the top of the layout the display should appear, in WPF units). Available only for Canvas layouts.

Use the drawing tools to create the display.

Select a button in the vertical toolbar. Place the cursor on the display area, then click and hold the left mouse button while dragging the cursor across the display area.
To see a menu of options, right-click the drawing object. The context menu provides actions that are specific to the selected object.
To select multiple objects, press Shift + left mouse-click on each object.

When selecting multiple objects, the last object selected is the "master," whose properties are shown on the left. If you then align the objects, the alignment is based on the master. If you change other properties, the properties are changed for all selected objects.
The horizontal toolbar (at the bottom of the Drawing tab) contains buttons to group, combine, align, and lock the selected objects. For more information about the drawing tools, see Designer Drawing Tools, below.

Click Save Display.
Continue with Creating Layouts.

Creating Layouts
.i.user interface:creating layouts for;
.i.creating:layouts;
.i.layouts:creating;
A layout defines the size of the application window and the basic arrangement of display components in the runtime application. Be sure to plan how you want to use displays. For example, consider whether you want a menu bar, toolbar, or other elements to always display at the top of the application window.
You may need only one layout to handle the information in the application.
The last display listed in the Layout tab is the one that is replaced when you change the display. For example, new projects include a default layout called Startup. The MainPage display that is listed last is the default area that changes when you tell the application to open a display.
To create a layout:

Go to Edit > Displays > Layouts.
Click New.
Enter or select information, as needed.

Column

Description

Layout name

Enter a name for the layout.

Layout

Select the layout type:
DockPanel—Select to position displays relative to the layout and other displays.
Canvas—Select to position displays in an absolute position by entering the position in WPF units (device-independent pixels; one WPF = 1/96 inch).|

Description

Enter a description of this layout.
Click OK.

At the top right of the Layouts tab, enter or select information, as needed.

Column	Description
Width	Enter the width, in WPF units (device-independent pixels), of the layout. This is the width of the runtime application.
Height	Enter the height, in WPF units (device-independent pixels), of the layout. This is the height of the runtime application.
Background	Set the background color of the layout. This is the background color of the runtime application

Click Add Row to add a row for a display.
The displays you add here are the first displays the layout uses.
Enter or select information, as needed.

Column

Description

Page

Select a display you want to include in the layout. Only page displays are available for use in a layout.

Docking

Select the docking location for this display:
Left
Top
Right
Bottom|

HorizontalAlign

Select the horizontal alignment for this layout:
Left
Center
Right|

VerticalAlign

Select the vertical alignment for this layout:
Top
Center
Bottom|

Margins

Set the margin for this layout.

Left

Set the left position of the layout

Top

Set the top position of the layout

Designer Drawing Tools
.i.toolbars:drawing, described;
.i.drawing tools:using;
The Drawing tab has the following controls to create, format, and configure displays:
Vertical toolbar—On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows. For more information, see Table 1.
Horizontal toolbar—Across the bottom of the Drawing tab. Use these buttons to group, combine, align, and lock the selected objects. For more information, see Table 2.
Appearance, DisplaySettings, and other settings—Below the main menu buttons, these settings vary based on the type of object selected.

To configure dynamic graphic displays, from the Main Menu, click on the "Draw" icon.
Version 8 > Displays and Symbols > worddav3ceafeb2cde03731bfdab23fbb8992e8.png The Appearance parameters dictate the brush style used when drawing objects in the display, including colors. Clicking on the Fill option lets you specify Colors, gradients, or objects with which to fill the graphic.
The DisplaySettings dictate the attributes of the display. Displays can be configured as Pop Ups, Dialogs, or normal page displays.
Like with any graphical object, displays can have varying colors and patterns, borders, titles and more.
One special feature is that you can specify a transition animation to use when entering the display much like you have in PowerPoint presentations.
Table 1 describes the vertical toolbar commands.

Vertical toolbar commands
Commands	Description
Selection Tool	Click an object to select it. CTRL+click to select multiple objects (and object groups), one at a time. Hold down the CTRL key as you click each object. Shift+click to toggle selected object from among more than one selected objects. Click in an open area of the display then select a group of elements by highlighting the elements while holding down the left mouse button. Double-click an object to open the Dynamics Configuration window, which provides settings for dynamic object properties.
Direct Selection Tool	Use this tool to select an object inside a group (and modify its properties). Click the object to select it. You can also add, remove, and modify the points in a Polyline with the Direct Selection Tool: To move the point select it by clicking the point and holding the left mouse button down. Drag the point to its new position. Double-click a point to add a new point adjacent to the selected point. Right-click a point to delete the selected point.
Hand Tool	Use the Hand Tool to modify the view window by clicking the display background and holding down the left mouse button then shift the display to the desired position.
Geometric objects tools	Right-click to end use of each tool. To add, modify, and remove points after creating a polygon or polyline, use the Direct Selection Tool.
Rectangle	Creates a rectangle object.
Ellipse	Creates an ellipse object.
Polygon	Creates a polygon object.
Polyline	Creates a polyline object.
Button	Creates a button object.
LabelBox	Creates a label box.
Text Output	Creates a text output object.
Text Box	Creates a text input/output (I/O) object. To link the text I/O object with a tag, double-click the text I/O object, under the Dynamic configuration window select the TextIO dynamic.
CheckBox	Creates a check box object. Right-click this button to access the following tools: Creates a radio button object. Creates a combo box. Creates a list box. Creates a password box. Creates a menu item. Creates a date picker. Creates a date/time text box. Creates a slider control. After selecting a tool from this menu, it becomes the default tool for that button in the vertical toolbar.
Open Symbol Library	The symbol library includes both built-in and user-defined symbols.
Open Symbol Factory	The Symbol Factory is an external symbol library that contains a lot of symbols precreated to be used on the projects.
Insert Image Resource	Insert an image to be used on the entire project.
Web Browser	Creates a Web Browser object. Hover over this button to access the following tools: Creates a Report Viewer object. Creates an XPS Viewer object. Creates a PDF Viewer object. Creates a Page Selector object. Creates an Assets component. Creates a Remote Assets component. Creates a Child Window object. Creates an external WPF component. After you click the option "Creates an external WPF component", the following components will be available: Creates a Pie Chart object. For more information, see Configuring a Pie Chart. Creates a Map Control object. Creates a Report Preview object. Creates a Calculator object. Creates a Bar Chart object. For more information, see Configuring a Bar Chart. Creates an Advanced Pie Chart object. Creates a 3D Pipe Viewer object. Creates a Circular Panel object. For more information, see Configuring a Circular Panel. Import external dlls. After selecting a tool from this menu, it becomes the default tool for that button in the vertical toolbar.
Alarm Window	Creates an alarm window. Position the alarm window and double-click to configure the alarm window settings. For more information, see Configuring an Alarm Window.
Alarm Area	Creates an Alarm Area control, that allows to view the existing alarm tree.
Trend Window	Creates a trend window. Position the trend window and double-click to configure the trend window settings. For more information, see Configuring a Trend Window.
Drilling Chart	Creates a drilling chart trend window. Position the trend window and double-click to configure the trend window settings. For more information, see Configuring a Trend Window.
DataGrid Window	Creates a data grid window. Position the data grid window and double-click to configure the data grid window settings. For more information, see Configuring a DataGrid Window.

Table 2 describes the horizontal toolbar commands.

Horizontal toolbar commands (Continued)
Commands	Description
	Grid definition
	Screen Zoom
	Group
	Ungroup
	Union
	Intersect
	Exclude
	Exclusive-Or
	AlignLeft
	AlignHorizontalCenter
	AlignRight
	AlignTop
	AlignVerticalCenter
	AlignBottom
	Move To The Front
	Move To The Back
	Change Z-Oder
	Resize Width
	Resize Height
	SpaceEvenlyHorizontal
	SpaceEvenlyVertical
	FlipHorizontally
	Flip Vertically
	Lock element
	Unlock element
	Unlock All Elements
	Show All Elements
	Hide Selected Element

Examples
Here you will see examples showing the functionality of the commands of the horizontal toolbar.
The shapes used can be any object without Dynamics, like polygons, ellipses, rectangles. Version 8 > Displays and Symbols > worddav62dc348f0f95f89e8ba4b2e8d16a6e75.png
Union Intersect
Exclude Exclusive-Or

Lock element command. : Select both rectangles then click to lock. Now the rectangles can not be selected.
To unlock only one rectangle:
Click on Direct Selection Tool command on the vertical toolbar.
Select the on the desired rectangle and click on Unlock Element .
To Unlock all elements just click on Unlock All Elements command .

Dynamics and Animations
.i.displays:configuring dynamics for;
.i.configuring:dynamics;
.i.dynamics:configuring;
Dynamics let you configure real-time changes on the object look, position, size, colors, the value the object reflects, user action to take when a user clicks, and more. That dynamic behavior is configured by creating links from the object properties to tags or other project runtime properties.
In some systems, the name "animation" is used to refer to those dynamic runtime changes; in FactoryStudio we elected to use the term "Dynamics" to make a clear distinction with the WPF animations features; WPF animations also refers to changes in the graphics object properties when running the displays, but using timers and other objects status to guide the animation, not the real-time database values.
When you double click on an object, or press the Dynamics button, or select it on the right-click context menu, a list of compatible dynamics that can be applied to the selected object is presented.
Table 3 lists the available dynamics.

Table 3: Dynamics animations
Setting	Description
Action	Executes actions and commands triggered by the user interface.
Shine	Changes the object appearance dynamically.
TextIO	Text input and text output Dynamic.
HyperLink	Opens a hyperlink.
Security	Sets the object runtime permissions to execute actions.
FillColor	Changes the object fill color dynamically.
LineColor	Changes the object line color dynamically.
TextColor	Changes the object text color dynamically.
Bargraph	Bargraph dynamic.
Visibility	Changes the object visibility and opacity dynamically.
MoveDrag	Moves the object dynamically.
Scale	Changes the object size dynamically.
Rotate	Rotates the object dynamically.
Skew	Skews the object dynamically.
TextOutput	Text output dynamic.

Version 8 > Displays and Symbols > worddav9391dc22479cd3ae1c300e1001333470.png
Get, Apply, and Replace
After associating a dynamic with an object you can use the buttons Get and Apply to move dynamics settings configuration from one object to another. Select the object with the dynamics you want to use, and press Get. You can right click the dynamic name at the left panel, in order to enable or disable the ones that will be applied. Select one or more target objects and press Apply.
You can use the Replace button to change the Tags in the dynamics on the selected objects. The String button is used to change all strings at the selected objects.
Settings
The tables below present the detailed settings available for each type of dynamic.
Action Dynamic

Table 4: Action Dynamic configuration
Setting	Description
Action	Executes an action triggered by the user interface:.
Event	Choose one of the Mouse events. More than one event can be selected for each action. For example, you can set one action for MouseLeftButtonDown and another action for MouseLeftButtonUp.
Action	Select an action for the given event: None—No action. SetValue—Sets the value of the object. Object—The object that will receive the value. Value—The value that will be passed to the object. Toggle—Toggles the object value. If the object current value is zer o, the value will be 1. If the object current value is different from zero, the value will be 0. Object—The object that will be toggled. OpenDisplay—Opens a display. Display—The name of the display that will be opened. CloseDisplay—Closes a display. Display—The name of the display that will be closed. OpenLayout—Opens a layout. Layout—The name of the layout that will be opened. RunScript—Runs a script that is placed in the display CodeBehind tab. Do one of the following: Enter the new method name and click New. Select one of the existing methods in the comboBox. RunExpressions—Runs the given expression. Expression—Enter the expression. For example: Tag.a + 1, or Tag.a + Tag.b, or Math.Cos(Tag.angle) * Math.PI. Result (optional)—Enter the tag or the property that will receive the expression value.

Run Expressions Examples:

Sum two values and pass the result to another tag.

Expression—Tag.quantity1 + Tag.quantity2.
Result—Tag.totalQuantity.

Increment a tag.

Expression—tagCounter + 1.
Result—tagCounter.

Increment a tag (0 - 10).

Expression—If(tagCounter < 10,tagCounter + 1,0).
Result:—tagCounter.
For more information, see "Configuring Expressions" on page 118.
Shine Dynamic

Table 5: Shine Dynamic configuration
Setting	Description
Shine	Changes the object appearance dynamically.
IsMouseOver	Enter a tag that will receive the OverValue or the NotOverValue.
OverValue	The IsMouseOver value when the mouse is over the object.
NotOverValue	The IsMouseOver value when the mouse is not over the object.
Mouse Over Appearance	The object appearance when the mouse is over it. Opacity—The object opacity (0 = transparent, 1 = opaque). Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size). OuterGlow—Defines the OuterGlow color, the check box enables or disables it. TextColor—Defines the text color, the check box enables or disables it.
Mouse Not Over Appearance	The object appearance when the mouse is Not over it: Opacity—The object opacity (0 = transparent, 1 = opaque). Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size).
Is Selected Appearance	The object appearance when it is selected: IsSelected—Defines whether the object is selected. Opacity—The object opacity (0 = transparent, 1 = opaque). Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size).
Scale Reference	Center Left Up Right Down
ShowUid	Set to show the Uid of the object on hover
Tooltip	Set to show as a tooltip on hover

Text I/O dynamic

Table 6: Text I/O Dynamic configuration
Setting	Description
TextIO	Text input and text output Dynamic. If text is a tag value or a property, it must be between curly brackets. For example: {Tag.analogInt1}
Binding Mode	Associate an object with a tag: TwoWay—Input and output allowed. InputOnly—Only input allowed (the current tag value is not shown, but new values can be entered). OutputOnly—Only output allowed.
Object or Expression	Object (input) or Expression (output only) connected with the Text Box.
DesignModeCaption	The value shown in design mode: ShowObjectNames—The content of the text field is shown exactly as it is. ShowPlaceHolders—The characters ### are shown, the number of characters is defined by the MaxLength field.
Input Range	Defines the numeric range for the entered value.
MaxLength	Defines the maximum number of characters.
Format	Defines the text format for the field

Hyperlink and Security dynamic

Table 7: Hyperlink Dynamic configuration
Setting	Description
HyperLink	Opens a hyperlink.
HyperLinkType	Select the hyperlink type: http ftp file mailto telnet
Url	Set the URL to open.

Table 8: Security Dynamic configuration
Setting	Description
Security	Set the object runtime permissions.
Disable	Enter a tag, a property, or an expression returning a value. If the resulting value is: Zero—Object will be enabled. Greater than zero—Object will be disabled. For more information, see Configuring Expressions.
Verify Permissions	When selected, only the chosen permission groups can access the object.
Confirm Message	Shows a confirmation dialog before taking some action: textBox—Enter the message that will appear in the dialog. checkBox—Enables or Disables the Confirm Message.
ESign Required	Set if the Esign is required

Fill, Line and Text Color Dynamic

Table 9: Fill, Line and Text Color Dynamic configuration
Setting	Description
FillColor	Changes the object fill color dynamically.
Expression	the value used for the FillColor dynamic.
Change Color	UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits. AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF" Example Limits: 1 - Red 10 - Blue When the value is 0, the object will have its own color (fill color dynamic will not do anything) When the value is 1 to 9, the object will have the red color. When the value is greater than 10, the object will have the blue color.
Bad Quality	Select color when the related tag quality is bad
Undefined Quality	Select color when the related tag quality is undefined
LineColor	Changes the object line color dynamically:.
Expression	the value used for the LineColor dynamic.
Change Color	UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits. AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF" Example Limits: 1 - Red 10 - Blue When the value is 0, the object will have its own color (fill color dynamic will not do anything) When the value is 1 to 9, the object will have the red color. When the value is greater than 10, the object will have the blue color.
TextColor	Changes the object text color dynamically:.
Expression	the value used for the TextColor dynamic.
Change Color	UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits. AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF" Example Limits: 1 - Red 10 - Blue When the value is 0, the object will have its own color (fill color dynamic will not do anything) When the value is 1 to 9, the object will have the red color. When the value is greater than 10, the object will have the blue color.

Bargraph Dynamic

Table 10: Bargraph Dynamic configuration
Setting	Description
Bargraph	Bargraph dynamic.
Expression	the value used for the bargraph dynamic.
Value Range	The minimum and maximum values that will correspond to the minimum and maximum fill percentage.
Fill (%)	The minimum and maximum bargraph fill percentage.
Bar Color	The bar graph color.
Orientation	The bar graph orientation: to up horizontal center to down to right vertical center to left

Visibility Dynamic

Table 11: Visibility Dynamic configuration
Setting	Description
Visibility	Changes the object visibility and opacity dynamically.
Visible	Enter a tag, a property, or an expression returning a value. If the resulting value is: Zero - Object will be visible. Greater than zero - Object will be hidden. For more information, see Configuring Expressions.
Hide when security is enabled	Hides the component when security is enabled for the current user
Opacity	Expression—The value used to set the opacity. Range—The minimum and maximum values that will correspond to the minimum and maximum opacity. Opacity—The minimum and maximum opacity (0 - invisible, 0.5 - a bit transparent, 1 - opaque).

MoveDrag Dynamic

Table 12: MoveDrag Dynamic configuration
Setting	Description
MoveDrag	Moves the object dynamically.
BindingMode	TwoWay—Input moving and output moving. InputOnly—Input moving only. The object does not move when the object value changes. OutputOnly—Output moving only. The object does not move with user interaction.
Horizontal Move	Expression with the horizontal move reference. Range—The minimum and maximum values that will correspond to the minimum and maximum horizontal position. Position—The minimum and maximum horizontal position.
Vertical Move	Expression with the vertical move range. Range—The minimum and maximum values that will correspond to the minimum and maximum vertical position. Position—The minimum and maximum vertical position.
Use previous object for position reference	Reference the current object position based on the directly previous object

Scale Dynamic

Table 13: Scale Dynamic configuration
Setting	Description
Scale	Changes the object size dynamically.
Width Scale	Object—the value used for the width scaling. Range—The minimum and maximum values that will correspond to the minimum and maximum width scale percentage. Scale (%)—The minimum and maximum width scaling percentage.
Height Scale	Object—the value used for the height scaling. Range—The minimum and maximum values that will correspond to the minimum and maximum height scale percentage. Scale (%)—The minimum and maximum height scaling percentage.
Scale Reference:	Center Left Up Right Down

Rotate Dynamic

Table 14: Rotate Dynamic configuration
Setting	Description
Rotate	Rotates the object dynamically.
Expression	the value used for the rotation.
Value Range	The minimum and maximum values that will correspond to the minimum and maximum angle. For example: 0 to 100
Angle	The minimum and maximum rotation angle. For example: 0 to 360
RPM	Number of rotations per minute, that value can be defined on Expression.
Center Reference	Clockwise – Check if you want Clockwise. Center Left Up Right Down Offset X – Defines the distance of the center of the Rotation in X axis. Offset Y – Defines the distance of the center of the Rotation in Y axis.
ON/OFF	Enter with the object property that will turn ON/OFF the Rotation Dynamic

Skew Dynamic

Table 15: Skew Dynamic configuration
Setting	Description
Skew	Skews the object dynamically.
X-axis Skew	ObjectValue— the value used for the X-axis skewing. Range—The minimum and maximum values that will correspond to the minimum and maximum X-axis skewing angle. For example: 0 to 100. Skew (º)— The minimum and maximum X-axis skewing angle. For example: 0 to 180º.
Y axis skew	ObjectValue— the value used for the Y-axis skewing. Range—The minimum and maximum values that will correspond to the minimum and maximum Y-axis skewing angle. For example: 0 to 100. Skew (º)— The minimum and maximum Y-axis skewing angle. For example: 0 to 180º.
Skew Reference	Center Left Up Right Down

TextOutput Dynamic

Table 15: TextOuput Dynamic configuration
Setting	Description
TextOutput	Text output dynamic.
Expression	Indicates the text that will be shown in the object.
Localizable	Indicates whether the text must be translated when the dictionary changes.
DesignModeCaption	The value shown in design mode: ShowObjectNames—The content of the text field is shown exactly as it is. ShowPlaceHolders—The characters ### are shown, the number of characters is defined by the MaxLength field.
MaxLength	Defines the maximum number of characters.
Format	Specify the format of the field

User Controls
This section discusses how to configure various types of displays that present data.
Configuring a Circular Panel
Double-click any Circular Panel object in the display, or use the left panel PieChart to configure it. Table 16: describes the Circular Panel configuration.

Table 16: Circular Panel configuration
Field	Description
Control Name	Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind.
Selected Value	Select an object to represent the selected value
SelectedIndex	Select an object to represent the selected index
ImageSize	Size of the selected image
FontSize	Size of the font used on the component
Columns	For each value that you want to include, select a section and configure the settings to the right of the list (described below). The panel displays a section for each column.
FieldName	Name of the field to be used
Title	Name to be shown on the component
Image	Select a resource image to display.
Preview	Read-only display of selected image.

Configuring a PieChart
Double-click any PieChart object in the display to configure it. Table 17 describes the Pie Chart configuration.

Table 17: Pie Chart configuration
Field	Description
Control Name	Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind
ChartType	Select the type of chart: Percent, Angles, or Section
Data Items	For each value that you want to include, select a section and configure the settings to the right of the list (described below). The chart displays a section for each data item.
FieldName	Enter a name for the data item.
LinkedValue	Enter a tag name as the data source for the data item.
Brush	Click to select the color for the data item.

Configuring a BarChart
Double-click any BarChart object in the display to configure it. Table 18 describes the Bar Chart configuration.

Table 18: Bar Chart configuration
Field	Description
Control Name	Defines a name for the control, so it can be accessed in the CodeBehind script. See "Displays Code Behind" on page 129.
Type	Select the type of chart.
Data Source	Enter the dataset table or query to use for the chart.
Grid Lines	Click to select the color for the grid lines.
Window	Click to select the color for the window background.
Labels	Click to select the color for the labels.
Show Horizontal Labels 45°	Select to angle the labels below each bar at 45°.
Show value over bar	Select to display the bar value above the bar.
Hide all Zero Series	Set the series that has values 0 to be hidden
Show value labels 90°	Select to show the labels on each bar at 90°.
Y Axis Range	Set the range of the Y axis (from and to)
Y Axis Height	Set the Height of the Y axis
Y Axis Labels	Set the quantity of the labels to show on Y axis
Auto Scale Y Axis	Set to make the Y axis auto scalable
Format	Set the format of the Y axis values
Data Items	For each column in the data source that you want to include, select a bar and configure the settings to the right of the list (described below). The chart displays a bar for each row.
FieldTitle	Title to be show in the display to the current column
FieldValue	Name of the column in the database.
Min.	Enter a tag to define the minimum value.
Max.	Enter a tag to define the maximum value.
Brush	Click to select the color for the data item.

Configuring an Alarm Window
Double-click any Alarm window object in the display to configure it. Table 19 describes the Alarm window configuration.

Table 19: Alarm window configuration
Field	Description
Control Name	Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind.
MaxLines	Maximum number of lines to display in the window.
List	Select the type of alarms to display in the window: OnlineAlarms—Displays only active alarms. Alarms only display while the alarm is in the alarm state. AlarmHistory—Displays only past alarms. AuditTrail—Displays only the SystemEvents (Edit > Alarms > Groups). AlarmHistory+Events—Displays past alarms and SystemEvents.
Merge Hi and HiHi Lines	Combines alarms configured as Hi and HiHi into a single row.
History Interval/To	Enter the start and end dates for the alarms.
Show Column Titles	Select to display the column titles.
Ack by Page	Enter a tag name, which when triggered, acknowledges the alarms in the alarm window.
Show Header	Enter text to display above the column titles.
AllowSort	Select to let users sort the data by column.
Allow Column Reorder	Select to let users change the order of the columns.
Display value column as string	Set the format of the value column to string
Filter	Enter SQL statement to limit the alarms displayed.
Display Millisecond	Select to include milliseconds in the alarm time.
Ack Selected Line	Configure settings for acknowledging an alarm.
Columns	For each column in the list, select the column and configure the settings to the right of the list (described below).
Visible	Select for column to display in the alarm window.
Allow Filter	Select to let users filter the column.
Show in Column Chooser	Select to include the column in the column chooser, which lets users select the columns to display.
Title	Enter the text for the column title.
Width	Enter the initial column width, in WPF units (device-independent pixels).
Sort	Select how to initially sort the column.

Configuring the Trend Window
The drawing tool has two trend objects, the TrendChart and the TrendChartLegacy. The TrendChart is the newest that should be used by default, the other was kept to ensure compatibility with projects created in previous release, the iOS displays are using the previous object.
Double-click any Trend window object in the display to configure it. Table 20 describes the Trend window configuration.

Table 20: Trend window settings
Field	Description
Control Name	Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind.
Bind to Tag	Enter with an object property where the Trend configuration will be saved.
Bind Pens to Tag	Enter with an object property where the Pen values will be saved.
Orientation	Horizontal. Vertical, top to bottom. Vertical, bottom to top.
Window	Set the trend control background color.
Labels	Set the color of the trend control labels.
Grid Lines	Set the color of the Grid lines
Grid Lines Stroke	Set the Grid line settings.
Cursor	Enables (selected) or disables (deselected) the cursor settings.
Y Axis	Y scale for each pen - Based on min and max of each pen. Y range - Defines the minimum and maximum values for the Y-axis The format of the values in the Y-axis. For valid numeric formats, see "Tag Formats" on page 66. For example, N1 (number with 1 decimal place). Stack Y scales - Check to stack similar Y scales. Merge similar Y Scales - Check to merge the similar Y scales.
X Axis	Duration - Define the X-axis time span. XY Chart - Check to define a X axis range Labels - Define the quantity of horizontal grid lines. The X-axis format is defined by two fields: first line format and second line format. This is especially useful to define label marks that require two lines of information. For valid date and time formats, see Tag Formats. For example, T (Time) for the first line format, d (short date) for the second line format. Navigation Control - Check to make navigation controls visible
Legend	Defines the position of the legends in the Trend Window. None. Top Left. Top Right. Bottom Left. Right Panel. Bottom Panel.
Pens
Tag	Set tag that will provide the value for the pen.
Pen Settings	Set the configuration of the Line color, Line stroke, Fill area and the type of Marker.
MinValue	Linear scale reference for the tag value, according to the Y-axis range.
MaxValue	Linear scale reference for the tag value, according to the Y-axis range.
Auto	Set the value to auto, instead use MinValue and MaxValue
SPCEnable	Enable or disable the SPC settings.
SPCSettings	Click to open the SPC settings.
Show Value Area	Fill the pen area with the specified color
PenLabel	Set the pen name.
Filter level	An integer number that "group" points on XY axis, calculating the average between then.
LimitMinMaxValue	Remove the points less than Tag.Min and greater than Tag.Max.
Square	Fill the pen points with a square wave.

Double-click any Trend window legacy object in the display to configure it. Table 21 describes the Trend window legacy configuration.

Table 21: Trend window legacy settings
Field	Description
Control Name	Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind.
0(online) 1(history)	0 - the control shows the online data. 1 - the control shows the history data. For example: Tag.onLineHist.
OnlineTrigger	The refresh rate of the online trend control. For example, 00:00:01 or {Tag.trendTimeSpan}.
Time Before Now
HistoryDateTime	The initial point for the history trend control. For example, {Tag.initialTrendHistory}.
Grid Line	Set the color of the Grid lines
Window	Set the trend control background color.
Labels	Set the color of the trend control labels.
Off line Marker	Set the marker when the trend is in off line mode
Cursor Enable	Enables (selected) or disables (deselected) the vertical cursor.
Pens Legend	Defines the position of the pens legend in the trend control.
Y Axis
Range	Defines the minimum and maximum values for the Y-axis.
Labels	Defines the quantity of horizontal grid lines.
Format	The format of the values in the Y-axis. For valid numeric formats, see Tag Formats. For example, N1 (number with 1 decimal place).
X Axis
Interval	Defines the X-axis time span.
Labels	Defines the quantity of horizontal grid lines.
Format	The X-axis format is defined by two fields: first line format and second line format. This is especially useful to define label marks that require two lines of information. For valid date and time formats, see Tag Formats. For example, T (Time) for the first line format, d (short date) for the second line format.
Pens
Visible	Shows (1) or hides (0) the selected pen. Ex 1 or {showPen1}.
Tag	Set tag that will provide the value for the pen.
Min	Linear scale reference for the tag value, according to the Y-axis range.
Max	Linear scale reference for the tag value, according to the Y-axis range.
Pen	Choose the style, the color, and the thickness of the pen line.
CursorValue	Set the tag that will receive the real value of the Y-axis, according to the cursor position. For example: Tag.pen1CursorValue.
FieldName	Set the pen name.
SPC	Check to enable SPC
MouseActions	Check to enable mouse actions on trend
Tooltips	Check to enable tool tip on hover
Allow edit pens/labels	Check to enable allow the pens and labels to be edited
Y scale for each pen	Y scale for each pen based on min and max of each pen.
Merge same Y scale	Check to merge the similar Y scales.

Using Y Axis Scaling
Considering:
Y-axis Min = 0;
Y-axis Max = 100;
The trend control allows many pens to be displayed together. When your pens do not have the same range, you can use the tips below to fit your data in the same chart, for better visualization:

If a pen has a lower range, 0 to 1 for example, you can set the Max property of the pen to 1, so when the real tag value is 1, the value 100 will be displayed in the chart. (100/1 scale).
If a pen has a higher range, 0 to 1000 for example, you can set the Max property of the pen to 1000, so when the real tag value is 1000, the value 100 will be displayed in the chart. (1/10 scale).

Configuring a DataGrid Window
Double-click any DataGrid window object in the display to configure it. Table 22 describes the Data Grid window configuration. Critical fields that you must configure are shown with an *.

Table 22: Data Grid window configuration
Field	Description
Control Name	Defines a name for the control, so it can be accessed in the code-behind script. See Displays Code Behind
Data Source	Enter the dataset table or query to use for the window.
SelectedValues	Enter a string tag or array tag to receive the contents of the selected row.
SelectedIndex	Enter a tag to receive the number of the currently selected row. Row numbering starts with 0.
LinesCount	Select a tag to receive the number of lines in the window.
Pause	Set an object to defines if the datagrid will be updated or not when the data changes.
Theme	Select the theme for the window.
BindindMode	Select the binding mode to use. See http://msdn.microsoft.com/en-us/library/system.windows.data.bindingmode.aspx.
AllowInsert	Select to let users add rows.
Column Titles	Select to display column titles.
Transpose	Select to transpose columns to rows
OneClick Edit	Select to edit cells on first click
Allow Delete	Select to allow delete data from grid
AllowSort	Select to let users sort the data by column.
Auto Column	Select to have the system automatically include all table or query columns in the window. If selected, you do not have to configure the columns below. To customize specific columns, add the column to the column list and configure the settings to the right (described below). Deselect to manually configure each column that you want to include using the Columns list and settings to the right (described below).
Multiple Selection	Check to make multiple selection possible
Edit SelectedValues	Check to make it possible to edit multiple selected values
Show Header	Check to show headers on grid
Filter	Enter SQL statement to limit the data displayed.
Columns	For each column you want to customize or include manually, add the column and configure the settings to the right of the list (described below).
Visible	Select to allow the column to display in the data grid window.
Editable	Select to let users edit the column.
Show in Column Chooser	Select to include the column in the column chooser, which lets users select the columns to display.
FieldName	Enter a name for the column.
Editor	Select the column data type.
Title	Enter the text for the column header.
Width	Enter the initial column width, in WPF units (device-independent pixels; one WPF = 1/96 inch).
Sort	Select how to initially sort the column.

Managing Images and Symbols
FactoryStudio has great features to improve the productivity on creating graphical displays to your application. The drawing tools allows you to easily manage symbols, image files, import objects from a 5000 objects gallery, create your own symbols with dynamic properties, and map tags and templates to its default graphical user interface.
There are three main repositories for reusable components, the Images, the Symbol Factory library, and the Local Symbols Gallery. Let's explore each one.
Images: Used to insert an external image file from your computer into the project configuration, like an icon, wallpaper, object, or background image. You can manage the imported images at Edit > Displays > Resources. After the image is imported, you no longer need the original file. Images can be used as color brushes for any drawing object, and they can even be used as "color" or the ColorFill dynamic attributes.
Symbol Factory: This is an extensive library of elements, with more than 5000 symbols, all using vector graphics, that you can use for creating your displays or use as a template to create your own custom symbols. Those objects can be applied statically, just as an image or icon, or you can add Dynamics and save them to the Local Symbols library.
Local Symbols: These are the most frequently used symbols. They include the symbols you create in the scope of a project. The symbols in this library can be kept synchronized with the library, in this way, when you change a symbol in this library, the change will be automatically applied to all displays using that symbol. Local Symbols also can have dynamics properties that you can easily map to tags in displays; they can also be defined to be the default graphical representation of tags.
Image Resources
You can import any image file at the Edit > Displays > Resources tab. This creates a repository of images for the application that is stored inside the project database file, so you don't need the original files anymore. These images can be used to be the fill of an object, such as rectangles, ellipses, LabelBoxes, paths, page background, or target color in runtime dynamics using colors.
If you need to update an image with a new version, you can replace it, and it will be updated throughout the application. Be sure to keep the resource name the same.
You can use any image file to fill or "paint" an object when creating displays from Draw > Drawing.
You can import the following file types:

.bmp
.gif
.ico
.jpg
.png
.tiff
.wdp

To manage resources:

Go to Edit > Displays > Resources.
Click Import Images.
Navigate to where the images are that you want to import.
Select the image files and click Open.

In each row, enter or select information, as needed.

Column	Description
Name	Edit the default name.
Description	Enter a description of this image.
Folder	Specify the folder where the resource is
ResourceType	Specify the type of the resource
Dimension	Read-only. Show the dimension of the resource file
Size	Read-only. Show the size of the resource file

Adding an image to a display
Version 8 > Displays and Symbols > worddav832eb732d2321b9d579f2bf3b2e1b4d6.png

Go to Draw Environment, and click on the Insert Image Resource.
A new window will open. Now Click on Import file button.
The new image becomes the fill for the rectangle. Click on Fill to change the image settings.
You can change the Stretch to None, Fill, Uniform and UniformToFill. Also you can see all image files that are in the project and change between then using the Select Resource button or just click on the image in the top toolbar .

Typically you should use UNIFORM or FILL for image stretching. The image (using the Appearance menu at the left, can be applied to any graphical shape at the display)
The Symbol Factory
The symbols from the Symbol Factory are efficient and well designed vector graphics images. If you need an object like a pump, valve or others in your applications, just open the library and browse for the element or search by name. The difference between the symbols from the Symbol Factory and Local Symbols is that symbols from the Symbol Factory, once included in a display, become part of that display, and have no further connection with the library. In contrast, Local Symbols can keep an active link with the library, and can also have dynamic properties.

Go to the Draw Environment then click on the Symbol Factory Icon on the vertical toolbar.
After clicking on the icon the Symbol Factory will open, to insert a symbol just choose one category and symbol then double-click on the symbol and click in any place on the screen.

Adding color change animation to Symbol Factory elements
If you want to insert a color change animation, without changing anything on the symbol, you can copy the symbol and overlay a transparent image on top of your image.
For example, suppose we have two pumps. To insert a simple animation that shows when the pump is ON or OFF follow these steps:

First make a copy of the object, select the symbol and click Ctrl+D to duplicate it (you can also select the Symbol, hold the CTRL key and drag the object, or you can copy/paste it).

Version 8 > Displays and Symbols > worddav1a9601957bafe71ff53b9218e0f3b174.png

Then select the second pump and click on the Union button on the horizontal toolbar.
Now with this new pump, locate the OPACITY property at the left panel, select an Opacity from 0.2 to 0.5, according the desired visual effect, and select the color for your initial brush (red or green, for instance).

Version 8 > Displays and Symbols > worddav330c5b3ed4ff8c8304c219cdfb8d5a8a.png

Double click on the second pump and change the setting of the Fill Dynamic.

Version 8 > Displays and Symbols > worddaveb4b68c52d38497cfbf0a79ab0ed3285.png
Note: Use the Client.SimulationDigital to simulate a controller changing between 0 and 1.
If you want to control the value yourself, use Client.DigitalValue or Client.NumericValue

Select both pumps and click on the Align Horizontal Center button and Align Vertical Center button.

Version 8 > Displays and Symbols > worddavb8c45fff53ea2b69b2e15cb156d6c7e5.png

If the pump with the Opacity changes stays behind the other pump, click on the Move to The Front button to bring it to the front.

Version 8 > Displays and Symbols > worddav0869df482561949a939ac1668cad006c.png

You can now click on the Display Preview button on the top toolbar to see the new pump's animation.

Version 8 > Displays and Symbols > worddav248c6e83515f09efa353b452008776de.png
Local symbols
The Local symbols library includes the most frequently used graphics. You can also create symbols and add them to the project local library. Symbols can just be a static image or they can have dynamic properties and tags links.
To view the symbols used by your project, do one of the following:

To see only the symbols used in this project, go to Draw > Symbols. In that page you can export, import or delete symbols.
To see all available symbols, go to Draw > Drawing, and click Open Symbol Library

Creating new Symbols
You can use the drawing tools and the COMBINE commands at the horizontal toolbar to draw your own symbols.
You can also bring symbols from Symbol Factory and click at the UNGROUP command at the horizontal toolbar to edit the imported symbols.
You can also use the "Direct Selection" cursor to edit internal elements without needing to ungroup.
If you want to save the new symbol to the Local Symbols Library, just select the object or objects that you want to be part of the symbol, then right-click and select "Make a new symbol". Version 8 > Displays and Symbols > worddav419d6aa1cd47a1b83482dfe269e09c10.png

Enter the Name, Folder and the description of the Symbol.

Version 8 > Displays and Symbols > worddavaeb2e8ab27c17396b2c5afe28b9ccc55.png

Now you can open the Symbol Library and choose the symbol to use at your displays.

Version 8 > Displays and Symbols > worddav578f4210b9d9f9f29c70275d2c3e86bc.png
The components in the Local Symbol library may have built-in dynamic properties and an easy way to map them to realtime tags in your application. This is explained in the following section.
If you have dynamic properties and tags being used in that symbol, the system will automatically create the symbol label parameters. After making the new symbol, double click it to verify its configuration parameters.
In order to Edit a symbol that is already in the Local Symbol library, insert the symbol in a display, right click on the symbol, and select "Edit Symbol", that will change the drawing tool, locking the other elements in the page, so you change the symbol. When you finish, right-click at any position to select Save to Library, Save Only to Local display, or Cancel your editing.
The objects from "Local Symbols" are composed of some default symbols from the file SymbolLibrary.tproj, added with the product installation, and the symbols you created for your specific project. If you change, delete or insert a symbol in the SymbolLibrary.Tproj, it will be accessible to all projects in that computer. The symbols you are using in your project are saved inside the PROJECT file; therefore they are completely independent of any external file.
Inserting a Local Symbol

Go to the Draw Environment, right-click any place of the screen and select "Insert Symbol". Alternately, you can click on the "Local Symbol icon" on the vertical toolbar.

Version 8 > Displays and Symbols > worddavb502d5b3a5433f7ca736d977852f4dc6.png

After selecting the category and symbol, click on the symbol and then click on the screen to position the symbol. You can also drag-drop symbols to the screen. If you double-click on a symbol, that will close the Library window, allowing you to insert the selected object.
Double-click on the symbol to see its runtime properties and map it to tags in your application.

Note: Some symbols do not have custom parameters. In this case, the double click will show the Dynamics dialog.
Version 8 > Displays and Symbols > worddav6603fb00a7a16b90887042a3642c8966.png
Symbol Parameters
When you insert a symbol from the Symbol Library it may some parameters, like in the example the VerticalTank symbol has the parameters LevelValue, MaxScale and MinScale. To change the linked tags to those parameters, just edit the new tag names in the dialog.
Editing and modifying symbols
Right-click on the VerticalTank symbol and select Edit Symbol. Now you enter in the Edit mode, you can see all objects that are part of the Vertical Tank.
Version 8 > Displays and Symbols > worddavc0b2e610dc0866908d259ee8c3749c70.png
Click on the Black rectangle to see its Dynamics.

As you see we use #<PropertyName>:TagName
That syntax will create exposed label parameters for the symbol, making it easier to map the linked tags when using the symbol. In this examples, the symbol has the labels "Level","MinScale" and "MaxScale". When you insert this symbol, you will be able to set values for those parameters. After the ":" character, you have the default value.
Example.: "#LevelValue:Client.SimulationAnalog", we are creating a property called "LevelValue" which has "Client.SimulationAnalog" as the default value.
You can use any name for the Label parameter.
When creating symbols, it is useful to initially map the properties to client.SimulationDigital, Client.SimulationAnalog or Client.SimulationDouble, which are variables with values changing every second so you can see the result of your dynamic properties. You can use the internal variables Client.DigitalValue, Client.NumericValue and Client.TextValue, when you just want to put a placeholder value, with no built-in simulation.
In order to save the symbol, right-click on the symbol or on the display and press Save to Symbol Library, or click the Save icon on the top toolbar. Double-click on the symbol to verify its properties.
Linking Tags and Symbols
You can configure a symbol to be the default representation of a Tag Type. In this way, every time you paste a tag into the Draw Environment, a symbol will be automatically created mapping to the inserted tag.
The tags of type Digital, Integer, Double, Decimal, Text, DateTime and TimeSpan have a default visualization that is the name of tag and an input/output text box. If you select multiple lines at Edit>Tags>Objects (click in one line, shift click in another line to mark a range), right-click to copy those lines to the clipboard, and paste into the displays, the system will automatically create one object to each of those tags.
If you want to change the properties of the objects created, for instance change the TextIO dynamic from "TwoWay" to "OutputOnly", select all the TextBox objects (clicking with the mouse on the display, and keeping it pressed, select the area with the objects), and double-click at any selected object to open the "Edit Combined Dynamics" dialog.
Hint: You can also copy the lines from Edit > Tags > Objects to Excel, add the columns Left and Top into the Excel table, then copy and paste that table, including the header column, back to the display; in this case the system will position the objects using the coordinates found in the table. Version 8 > Displays and Symbols > worddavd96c618e4a04f1e65293ae516af3f35b.png
Note: If you create a symbol with one dynamic parameter, and save it with the name "Integer", that will became the default visualization for the "Integer" tags. The same applies to any tag type.
Mapping a Symbol to a Tag Template
You can also define a symbol to be the default view for a tag template.

Go to Edit > Tags > Templates to create a new template.

Version 8 > Displays and Symbols > worddav6571cd8e945ad70700c31c5e5d134d98.png Go to Edit > Tags > Objects and create Tags with Type: Demo.

Back at the Draw environment insert some objects that you want to be part of the symbol.

In the example we use a TextBlock and TextBox with the parameters #Tag: (Tag.Demo.Integer1) in their dynamic properties
Version 8 > Displays and Symbols > worddav8e02a85667006f3e23ccf57aa9d787d9.png

Now select the TextBox and the TextBlock and right-click and make it a New Symbol with the Name and Folder called "Demo".
The parentheses () in the expression of the TextBox and TextBlock, defined the scope, on what should be replaced when you map the symbol. The hash tag syntax #Label: when you paste the Tags, it is the placeholder that will show where in the dynamic animations or expressions the name of tag should be replaced.
Go to Edit>Tags and copy all tags with Type:Demo.

Version 8 > Displays and Symbols > worddavb5d22785c6c26ed35195a8231e6a2273.png

Back to Draw environment and paste the tags.

When inserting tags of that template type, the system will look for a Symbol with the same name of Template. If a match is found, that symbol is created and linked to the Tag you were inserting at the display.
Version 8 > Displays and Symbols > worddav2ccd3c4b2346e431ce5e379ab5b1f0a1.png
Note: If you create symbols using only Tag Elements, not expressions, you don't need to explicitly use the full syntax: #Label:(tag.Demo).Integer1 to define the label parameters. If you just use your tag at in the object dynamic properties and execute the Make Symbol command, the system will automatically search for tags in the symbol and create the related parameters. When using expressions, or when having multiple tags and templates in the same symbol, it is necessary to explicitly use the hash tag # and the parentheses in order to define the scope of your symbol's customizable parameters.
Linking Tags and Symbols using Categories
If you want to map a Symbol with a group of Tags, but you don't want to make this symbol map all Tags with the same Type. you can use the Category column to link which symbols should be used as the default interface to each group of tags.

Go to Run > Dictionaries > Categories and create new categories.
Back to Draw Environment and insert one symbol.
Go to Draw > Symbols Tab and on the Category Column chose the respective category for the symbol.

Note: If the Category column is not visible, right-click in any Column name and select the check columns you want to see.
Version 8 > Displays and Symbols > worddav352f3dcd34004b5ab987a4eda059b040.png
Go to Edit > Tags and define the category for the tags.

Select all Tags, copy then paste then into the Draw Environment. Each Tag will map to the respective symbol, according to the association defined in the Category column.
Displays Code Behind
.i.creating:code for displays;
.i.displays:creating code behind;
.i.code:creating for displays;
Use the CodeBehind tab to define a set of functions connected with a display. You can write code in either standard VB.Net or CSharp. You can also switch between the two. If you change your language selection, the system automatically converts existing code to the selected language.
If you need references to your own assemblies, use Run > Build > References.
CodeBehind functions can be executed when opening or closing, or while the display is open, depending on how you configure the code. You can use CodeBehind to define mouse and input command handling methods to be executed on a specific display.
For Dialog displays, use the built-in DialogOnOK method, which is called when the built-in OK button on the dialog is pressed. If "True" is returned on that method, the dialog is closed; if "False" is returned, the dialog remains open. This method is commonly used to ensure data validation on the dialog (which prompts the user to correct incorrect entries before closing the dialog).
The Code Behind of the Displays has the following pre-defined methods:

DisplayOpening()Executed when display is opening.
DisplayIsOpen()Called in a regular intervals while the display is open.
DisplayClosing()Executed when display is closing.
DialogOnOK()Called when the OK button on a Dialog display is pressed. Returning 1 allows the dialog to close.Returning 0 prevents the dialog from closing.

You can add your own .NET variables and methods to this page.
Because the client displays are designed to run on distributed and web environments, we recommend avoiding the use of functions that do not allow partial trust execution or that refer to physical file paths.
Desktop and IOS Client Settings
.i.displays:configuring desktop client settings for;
.i.user interface:configuring desktop client settings for;
.i.Windows clients:configuring settings for;
.i.desktop clients:configuring settings for;
.i.clients:configuring settings for desktop;
.i.iPad/iPhone clients:configuring settings for;
.i.iOS clients:configuring settings for;
.i.displays:configuring iOS client settings for;
.i.user interface:configuring iOS client settings for;
The desktop client settings control how the application displays on client computers. You configure Windows clients separately from iOS clients.
To configure the desktop client settings:

Go to Edit > Displays > Displays.
If needed, configure the Desktop Settings for Windows client by clicking Clients.
Enter or select information, as needed, and click OK.

Column

Description

Maximize When Open

Select to maximize the client window to fit the monitor.

Stretch

Select how the layout stretches when clients use the application:
None—Layout does not resize; it displays the exact size you configured for the layout. We recommend selecting the Scrollbar option.
Fill—Layout resizes to completely fill the available space on the client's monitor., without regard to the layout's aspect ratio.
Uniform—Layout resizes proportionally to the client's monitor size, maintaining the layout's aspect ratio.

UniformToFill—Layout resizes to both maintain the aspect ratio and to completely fill the available space on the client's monitor. This can result in cutting off some parts of the layout.|

Scrollbar	Select to have a scrollbar display in the client window.
Title	Enter a title for the client window.
MinimizeBox	Select to display the standard minimize button.
MaximizeBox	Select to display the standard maximize button.
CloseBox	Select to display the standard close button.
ResizeBox	Select to display the standard resize handle.
Menus	Select which menus to display:

File
Tools

Security|

Always shows titles and menus in Test Mode	Select to always show the Minimize, Maximize, Close and Resize buttons when running a project in Test Mode.
OnScreen KeyBoard	Select to display a virtual keyboard
When Mouse Is Over Command Areas	Select behavior when mouse is over:

Show object edges— Creates edges on command objects

Cursor—Select the type of cursor.|

Mouse Cursor Visible	Select for the mouse pointer to be visible.
Verify Tag Quality on Client Displays	Tag Security protection show—Select option and character to show in the place of the Tag value if the user does not have the necessary security level.

On undefined quality show—Select option and character to show when PLC determines the data quality is undefined.

On OPC Bad quality show—Select option and character to show when OPC server determines data quality is bad.|

Disable Web Commands	Select to prohibit application users from sending commands to the PLC.
Multiple windows on same computer share user logon	Users can run multiple instances of the application on the same computer. The user may need to log in as a different user from time to time. Select this option to automatically change the logged in user in all running instances of the application on the same computer.

If needed, configure the Desktop Settings for iOS client by clicking iOS devices.

Enter or select information, as needed, and click OK.

Column	Description
Disable Commands	Select to prohibit application users from sending commands to the PLC.
iPad Initial Page	Select the display that iPad users see when they start the application.
iPhone Initial Page	Select the display that iPhone users see when they start the application.
Stretch Fill	Select to resize the application to fill the device screen.
iPad Landscape	Select if the alignment is landscape
iPhone Landscape	Select if the alignment is landscape

If needed, configure the Desktop Settings for HTML5 client by clicking HTML5 page.

Enter or select information, as needed, and click OK.

Column	Description
Disable Commands	Select to prohibit application users from sending commands to the PLC.
Desktop Initial Page	Select the display that Desktops users see when they start the application.
Mobile Initial Page	Select the display that Mobile users see when they start the application.

Enter the Number of Monitors clients will use.
Select the monitor and layout to show when the application starts.

The Display Namespace
The namespace Display lists all displays with their properties and open and close methods.
The namespace Layout lists all layouts with their properties and open and close methods.
The namespace Client has the properties of the environment on each connected client computer or mobile device.
See http://www.tatsoft.com/help/fs-2014/runtime/index.html for the complete programming reference on runtime objects.

Column	Description
Layout name	Enter a name for the layout.
Layout	Select the layout type:

Column	Description
Page	Select a display you want to include in the layout. Only page displays are available for use in a layout.
Docking	Select the docking location for this display:

Margins	Set the margin for this layout.
Left	Set the left position of the layout
Top	Set the top position of the layout

Column	Description
Maximize When Open	Select to maximize the client window to fit the monitor.
Stretch	Select how the layout stretches when clients use the application: