WebStudio Reference
This part of the documentation is primarily aimed at providing technical reference material and as such isn’t designed to be read end to end. While this may well be a good exercise to undertake in terms of getting to know all the tool has to offer, it is likely to be a rather dry read… For a more user friendly walk-through of how to use WebStudio and examples of compilations, refer to the "Getting Started" section instead.
Refer to the tables below to jump to specific reference section.
Item | Description |
---|---|
Load WebStudio in a browser |
|
WebStudio compilation model. |
|
Interaction actions. |
Generic Widgets: | |
---|---|
Display an advanced form with more configurability than the basic Form. |
|
Display rich text editor. |
|
Display entries to collect user input. |
|
Embed other web content. |
|
Display an image. |
|
Display Markdown content including Mermaid graphs. |
|
Display and edit tabular data. Supports (multi) select. |
|
Displaying multiple compilations within a main compilation. |
|
Display text. |
|
Table with start and end time pickers. |
|
Display hierarchical node structure. |
|
Display a video. |
Specific Widgets: | |
---|---|
Display batch (BPR) headers. |
|
Display trend chart with multiple axis support. |
|
Display A&E events. |
|
Display actual system object values. |
|
Display info and content of multiple files (GridFS). |
|
Display reports with export support. |
Development Widgets: | |
---|---|
Inspecting action pipeline messages. |
|
Test transform actions. |
Examples: | |
---|---|
Examples of the widgets and their interaction. |
Loading WebStudio
WebStudio is shipped with the system Setup. The installation of the Web API also includes the WebStudio web app. WebStudio can be loaded into the Browser by:
PROTOCOL
://HOSTNAME
:`PORT`/apps/webstudio/
-
PROTOCOL
: http or https -
HOSTNAME
: Hostname of the web server from where to load WebStudio from. Can be the Web API. -
PORT
: TCP/IP port number of the web server.
Typically with a default installation you can open the Browser, on the machine where the Web API is installed, and visit:
http://localhost:8002/apps/webstudio
By providing query parameters in the URL you can auto connect and load WebStudio compilations.
Connection parameters
-
hostname
= HOSTNAME: Hostname of the Web API. -
port
= 8002: TCP/IP port number of the Web API. -
ssl
= true: Using secure connection to the Web API.
Security parameters
Adding credentials in the URL:
-
credentials
: Base64 encoded 'username:password'. -
authority
= builtin: Possible valuesbuiltin
(default),ad
,machine
Using Integrated Windows Authentication:
-
secp
= iwa:
Loading options
-
logo
= false: removes the vendor logo. -
theme
= light: Set the theme todark
orlight
. The compilation will load with the indicated theme pre-selected. This setting overrides the user selection. Thetheme
toggle button is hidden when this option is used. Also see compilation options.theme
Loading WebStudio compilation from the system
If the compilation is loaded from a URL, WebStudio automatically hides the development tools. If the user, typically an
engineer, wants to edit a hosted compilation, the query parameter dev=1
can be added to the URL. Also refer to the
showDevTools
option below which can be set directly on the compilation to control the visibility of the toolbar icons.
Development Tools are:
-
Add widget
-
Import compilation
-
Export compilation
-
Edit compilation model
-
Edit widget model
Loading from custom Advanced Endpoint
Model can be loaded by calling an Advanced Endpoint. See Web API - Advanced Endpoint docs for more details.
-
lib=MY_LIBRARY
: Lua library name. Script can return function or a Lua table. -
func=MY_FUNCTION
: Function name in case the library returns a Lua table. -
farg=
: Function argument data. Typically Base64 encoded in case of JSON data. -
ctx=/System/Core/MyFolder
: (Optional) Alternative script context.
Example:
https://company.corp:8003/apps/webstudio/?hostname=company.corp&port=8002&ssl=true&secp=iwa&lib=my_librarys&func=my_function
Loading from object’s Custom Property
WebStudio compilations can be loaded from Custom Properties of objects by adding two query parameter in the URL.
-
obj
: object path or id. (Note: if not provided the Web API default context path will be used.) -
name
: name of the Custom Property.
Example:
https://company.corp:8003/apps/webstudio/?hostname=company.corp&port=8002&ssl=true&secp=iwa&obj=/System/Core/MyFolder&name=display01
Compilation
The WebStudio configuration, in which widgets along with their display attributes and dynamic behavior are defined, is collectively referred to as a compilation.
The compilation and contained widgets within are described using JSON objects. Throughout this documentation the term "model" refers to the structure of the various JSON fragments used to describe the elements within the compilation as well as the compilation as a whole.
Model
The version
is for future changes to be able to support new definition of the model.
{
"version": "1",
"widgets: [] // List of widget objects.
}
See widget doc model description for the widget model.
Options
{
"options": {
"background": {},
"numberOfColumns": 96,
"numberOfRows": 12,
"stacking": "none",
"showDevTools" : true,
"padding": {
"x": 0,
"y": 2
},
"spacing": {
"x": 2,
"y": 2
}
}
}
name | description | ||
---|---|---|---|
|
Used to set the compilation background color and image. These settings are actually nested within a style object. Refer to the example below to see them in action |
||
|
style options for the background |
||
|
load an image as the canvas backdrop. |
||
|
Set the display options for the
|
||
can be set to any valid CSS color name or RGB value |
|||
Defines the number of vertical columns the grid is divided into. The absolute column width in
pixels, will scale proportionally to that of the compilation viewport. By default the |
|||
|
Optional property, which can be assigned one of three values:
If the property is omitted the auto behavior is assumed. |
||
|
The
|
||
The values is interpreted as either the row height or number of rows, depending the |
|||
|
Defines how the widgets can be positioned. Options are:
|
||
|
As the name suggests, this parameter is used to control access to developer tools in the UI, which allow compilations to be created, edited and inspected.
It can be set to
If the compilation contains tabs widgets, the |
||
|
This is an optional property used to set the number of pixels between the edge of the canvas and the
content. The |
||
|
This is an optional property used to set the spacing between widgets on the canvas. The |
||
|
Optional parameter forcing the compilation to be shown with either the light or dark themes. When applied, the |
||
|
To set the maximal grid width with e.g. 500. |
Example to have an image as the compilation background:
{
"options": {
"background": {
"style": {
"backgroundColor": "#001b01",
"backgroundImage": "url(\"https://transparenttextures.com/patterns/45-degree-fabric-light.png\")",
"backgroundSize": "contain"
}
}
}
}