You have created UI actions and local scripts that you want to use in other WebIQ projects?
Then simply put them into a WebIQ package. This is a library that can be imported into WebIQ to use the functionality it contains.
Required WebIQ Designer version 1.12.1 or higher.
Basic things to do WebIQ Package:
Create folder structure
Copy js script files into the folder structure
Provide additional information in file package.json
Create package zip-file for delivery
Detailed steps:
1 Create folder structure (with your package name (e.g. my_tools) and the following sub folders)
Folder structure of WebIQ package
2 Copy files UI-Actions, Local scripts
In WebIQ Designer, open the project that contains the ui-actions
Copy all the .js files of all ui-actions, you want to ship in your package from ${dataDirectory}\workspace\js\custom-libs\ui-actions to my_tools\js\custom-libs\ui-actions
Open the WebIQ project that contains the local scripts
Copy all the .js files of all ui-actions, you want to ship with your package from ${dataDirectory}\workspace\js\custom-libs\local-scripts to my_tools\js\custom-libs\local-scripts
Hint: Look into the About dialog of WebIQ Designer to get value of ${dataDirectory}
WebIQ Info screen
3 Provide meta information in file package.json
Create file my_tools\webiq.json. All blue text in the file below, is an example text. You must be replaced it by your code. How to get the code is described below.
{ "name": "my_tools", "description": "my description of this packages", "type": "extension", "format": 2, "forceUpdate": false, "version": "1.0.0", "requires": { "visuals": "^2.3.0" }, "localeVariables": { "myLocaleVariable": { "de-DE": "Hallo!", "en-GB": "Hello!" } }, "uiActions": { "myUserAction1": { "url": "js/custom-libs/ui-actions/myUserAction1.js", "description": "Contains 1 String parameter", "meta": { "name": "myUserAction1", "params": [ { "type": "STRING", "options": { "label": "Label" } } ], "defaultParameters": [ "" ] } } }, "localScripts": { "DemoLocalScript": { "url": "js/custom-libs/local-scripts/DemoLocalScript.js", "description": "My description of DemoLocalScript" } } }
Short descripton of json fields which must be adapted: Detailed docu see WebDesigner Package Format
Field name
Description
name
Must be identical to the main folder of the package. (here "my_tools")
version
This text is displayed in the package manager of WebIQ
localVariables
Defines localization variables, which are used in your code. They are added to the Localization of the project.
"myLocaleVariable": { // name of the localization variable "de-DE": "Hallo!", // german translation "en-GB": "Hello!" // english translation }
uiAction
Defines the parameters and description of the ui-actions Copy blue code from ${workspaceFolder}\workspace\json\scripts\ui-actions.json
localScripts
Defines the descriptions of the local scripts Copy blue code from ${workspaceFolder}\workspace\json\scripts\local-scripts.json
4 Create package zip-file for delivery
Be sure that you create a zip file with this content:
Zip folder structure of WebIQ package
Now you can upload and install the new created package.
The Company
Empowering HMI Excellence Smart HMI is a team of experts for the development, enablement and integration of 100% Web-Technology based Software, which empowers every customer to easily create future-oriented industrial HMI solutions. The Software Platform WebIQ – developed by Smart HMI -is a 100% Web-Technology based, forward-looking Visualization-System with comprehensive Design-possibilities to create industrial Web HMI’s.
... View more
