Basics 1

Installation 2
Using WinCC Unified JS
Connector 3

WinCC Unified JS Connector

System Manual
Legal information
Warning notice system
This manual contains notices you have to observe in order to ensure your personal safety, as well as to prevent
damage to property. The notices referring to your personal safety are highlighted in the manual by a safety alert
symbol, notices referring only to property damage have no safety alert symbol. These notices shown below are
graded according to the degree of danger.

DANGER
indicates that death or severe personal injury will result if proper precautions are not taken.

WARNING
indicates that death or severe personal injury may result if proper precautions are not taken.

CAUTION
indicates that minor personal injury can result if proper precautions are not taken.

NOTICE
indicates that property damage can result if proper precautions are not taken.
If more than one degree of danger is present, the warning notice representing the highest degree of danger will
be used. A notice warning of injury to persons with a safety alert symbol may also include a warning relating to
property damage.
Qualified Personnel
The product/system described in this documentation may be operated only by personnel qualified for the specific
task in accordance with the relevant documentation, in particular its warning notices and safety instructions.
Qualified personnel are those who, based on their training and experience, are capable of identifying risks and
avoiding potential hazards when working with these products/systems.
Proper use of Siemens products
Note the following:

WARNING
Siemens products may only be used for the applications described in the catalog and in the relevant technical
documentation. If products and components from other manufacturers are used, these must be recommended or
approved by Siemens. Proper transport, storage, installation, assembly, commissioning, operation and maintenance
are required to ensure that the products operate safely and without any problems. The permissible ambient
conditions must be complied with. The information in the relevant documentation must be observed.

Trademarks
All names identified by ® are registered trademarks of Siemens Aktiengesellschaft. The remaining trademarks in
this publication may be trademarks whose use by third parties for their own purposes could violate the rights of
the owner.
Disclaimer of Liability
We have reviewed the contents of this publication to ensure consistency with the hardware and software
described. Since variance cannot be precluded entirely, we cannot guarantee full consistency. However, the
information in this publication is reviewed regularly and any necessary corrections are included in subsequent
editions.

Siemens Aktiengesellschaft Copyright © Siemens .

Digital Industries Ⓟ 12/2023 Subject to change All rights reserved
Postfach 48 48
90026 NÜRNBERG
GERMANY
Table of contents

1 Basics ..................................................................................................................................................... 5
2 Installation............................................................................................................................................. 7
2.1 Installing an extension ......................................................................................................... 7
2.2 Enable network port ............................................................................................................ 8
3 Using WinCC Unified JS Connector ........................................................................................................ 9
3.1 Establishing a connection to the TIA Portal instance ............................................................. 9
3.2 Exporting scripts from global modules................................................................................ 11
3.3 Importing scripts from global modules ............................................................................... 12

System Manual 3
Table of contents

4 System Manual
Basics 1
The Microsoft Visual Studio Code extension "WinCC Unified JS Connector" manages the export
and import of script modules.
The extension can export script modules from TIA Portal for editing in Visual Studio Code.
There, use all the advantages of the supporting functions such as autofill, versioning and
many others.
After editing, you can import the script modules back into the TIA environment.
Working with global modules is supported as of TIA Portal V19.
Working with script module types is supported as of TIA Portal V19 Update 2.

System Manual 5
Basics

See also
Installation (Page 7)
Using WinCC Unified JS Connector (Page 9)

6 System Manual
Installation 2
2.1 Installing an extension
To use the "WinCC Unified JS Connector" extension, install the extension in Visual Studio Code.

Requirement
• Visual Studio Code version 1.8 or higher is installed.
• .NET Framework version 4.8 or higher is installed.

Procedure
1. Open Visual Studio Code.
2. In the activity bar on the side, click the "Extensions" button or press <Ctrl + Shift + X>.
The "Extensions" view is displayed.
3. Enter "WinCC Unified JS Connector" in the search box for extensions.
The extension is displayed in the result list.
4. Click "Installation" in the extension.
After the installation is complete, an additional icon is displayed in the activity bar on the side.

Result
The installation of the Visual Studio Code extension "WinCC Unified JS Connector" is complete.

See also
Basics (Page 5)
Enable network port (Page 8)

System Manual 7
Installation
2.2 Enable network port

2.2 Enable network port

The "WinCC Unified JS Connector" extension requires the network port "7979" to set up a
connection to TIA Portal. Activate it.

Procedure
1. Open the command prompt "cmd.exe" with Administrator rights.
2. Enter the following command:
netsh http add urlacl url=http://+:7979/ user=Everyone
3. Press <Enter>.

Result
Network port "7979" is enabled.

See also
Basics (Page 5)
Installing an extension (Page 7)

8 System Manual
Using WinCC Unified JS Connector 3
3.1 Establishing a connection to the TIA Portal instance
To use the "WinCC Unified JS Connector" extension, a connection is set up between the local
server and a TIA Portal instance.

Requirement
• The "WinCC Unified JS Connector" extension has been installed.
• Network port "7979" is enabled.

Procedure
1. Open the "WinCC Uni ied JS Connector" extension in Visual Studio Code by clicking the
corresponding button in the activity bar on the side.
The extension is displayed.
2. Open the "Connect" section.
3. Click the "Click here" link.
4. Select a folder as the working directory.
The following iles and folders are generated automatically:

.gitignore Contains the definitions as to which files are ignored if the project is
uploaded in Git.
.vscode Contains the files for setting the working area, debugging and task
configuration.
ua_rt.d.ts Contains information for Autofill support.

5. Click the "Play" button to start the local server.

6. Select a running TIA Portal instance under "TIA portal instance".
7. Under "Project Scope", select the setting "Unified Devices".

Result
A connection is set up between a TIA Portal instance and the local server of the "WinCC Unified
JS Connector" extension.

See also
Basics (Page 5)
Installing an extension (Page 7)
Enable network port (Page 8)

System Manual 9
Using WinCC Unified JS Connector
3.1 Establishing a connection to the TIA Portal instance

Exporting scripts from global modules (Page 11)

Importing scripts from global modules (Page 12)

10 System Manual
 Using WinCC Unified JS Connector
3.2 Exporting scripts from global modules

3.2 Exporting scripts from global modules

With the extension "WinCC Unified JS Connector", you can export scripts from global modules
from a TIA Portal project to the local server of the "WinCC Unified JS Connector" extension.

Note
After an export, or other changes in the working directory, click the "Refresh" button in the
"Connect" section to refresh the displayed options in the "WinCC Unified JS Connector" extension.

Requirement
• A connection is set up between a TIA Portal instance and the local server.
• A TIA Portal project with one or more global modules is loaded.

Procedure
1. Click the "Refresh" button in the "Connect" section to refresh the displayed devices and their
folder structure.
Connected devices and their folder structure are displayed under "Export From TIA (Unified
Devices)".
2. Select one or more script modules for the export by activing the relevant checkbox.
Note
When you export script modules from a TIA Portal project, script modules with the same
name in the working directory are overwritten.

3. Click "Export files".

Result
For every successfully exported script module, one associated .js- and .yml file each is written in
the working directory.
The .js file contains the editable information.
In the "Log" section, every export process is recorded in a log file, in the corresponding log
segment.
The .js file can be edited in Visual Studio Code or also in a different preferred IDE.

See also
Basics (Page 5)
Establishing a connection to the TIA Portal instance (Page 9)
Importing scripts from global modules (Page 12)

System Manual 11
Using WinCC Unified JS Connector
3.3 Importing scripts from global modules

3.3 Importing scripts from global modules

With the extension "WinCC Unified JS Connector", you can import scripts from global modules
from a local server into a TIA Portal project.

Requirement
• A connection has been set up between a TIA Portal instance and the local server.
• A TIA Portal project is loaded.
• The TIA Portal project that is loaded contains a Unified device with the same name as the
Windows folder that contains the JavaScript source files to be imported.

Procedure
1. Click the "Refresh" button in the "Connect" section to refresh the displayed devices and their
folder structure.
Connected devices and their folder structure are displayed under "Import To TIA (Unified
Devices)".
2. Select one or more script modules for importing by activating the relevant checkbox.
Note
When you import script modules into a TIA Portal project, script modules with the same name
are overwritten in the project.

3. Click "Import files".

Result
The edited .js files from the local working directory are imported into the TIA Portal project that
has been loaded.
In the "Log" section, every import process is recorded in a log file, in the corresponding log
segment.
You can use the edited script modules in your TIA Portal project.

See also
Basics (Page 5)
Establishing a connection to the TIA Portal instance (Page 9)
Exporting scripts from global modules (Page 11)

12 System Manual