Widget Box Pro (Helium) - Getting started
Chapter goals & duration
In this chapter you will learn the basics on how to install and configure Helium widgets. You will also learn where to find documentation, examples, installers & license.
Expected duration 3h.
Prerequisites
3DEXPERIENCE dev env (TomEE 3dspace exploded web app)
“Issue” data
Basic XML & 3DEXPERIENCE / MQL understanding
(OPTIONAL) IDE - VSCode, Eclipse or similar
- 1 1. Installation
- 2 2. Installation result and basic Setup
- 3 3. Deploy a widget
- 4 4. Basic Configuration
- 5 5. Create Issue form configuration
- 6 6. Launch Pads
- 7 7. Issue page routing
- 8 8. Debug and troubleshoot
- 9 9. History
- 10 10. Standalone app
- 11 11. Studio - Live widget configuration using UI (In-app designer)
- 12 12. Advanced / Dev
1. Installation
The installers adds web resources to 3dspace (schema is optional but required for live UI configuration etc). The web resources includes jar files, js, html, css etc. A servlet is registered with the web.xml.
Gradle
TECHNIA best practice project setups uses Gradle and Maven artifacts to build 3dspace web archive including TVC Helium. Gradle makes upgrades as easy as changing version in a property file and manual installation steps are avoided.
Gradle setup is not included in this training.
2. Installation result and basic Setup
By now the web resources should be installed into your target 3dspace server folder. Value Component basic behaviour is controlled by global properties (e.g production mode for performance or development efficiency) . Let’s have a look at the result in 3dspace.
WEB-INF/classes/Helium.xml
<?xml version="1.0" encoding="UTF-8"?>
<Application xmlns="http://technia.com/helium/Application">
<DateFormat>YYYY-MM-DD</DateFormat>
<DateTimeFormat>YYYY-MM-DD hh:mm</DateTimeFormat>
</Application>WEB-INF/classes/tvc.properties
tvc.core.logLevel=DEBUG
tvc.core.productionMode=false
tvc.core.user=User Agent
tvc.core.password=secret123
tvc.3ddashboard.showEndUserConfigObjects=false
tvc.3ddashboard.searchanddrop.enable=true3. Deploy a widget
Widget definition is done in discrete separate XML files under '3dspace/WEB-INF/tvc'. The separation enable reuse, e.g. a description column could be defined once and referred by hundreds of widgets, templating is also possible, ensuring the same hight quality cross the full application. Read more in the Helium Page docs.
Overview definition structure
Sample JSON (configuration file content)
{
"id": "training-issues",
"title": "Training Issues",
"path": "/goto/d/",
"parameters": "tvc:dashboard:training:issue/IssuesDashboard.xml",
"custom": "true"
}4. Basic Configuration
The framework holds a wide range of configurable features. Let’s take a look at some standard basic configurations done in most implementations.
Table configuration, Chart configuration
Technical Assignee
Exclude Closed
Drag & drop column settings
Drag & drop data set - 3DDashboard require physicalid!
Service command to create Issue (note current version require string escape of body content when macro is false)
Built in table features
5. Create Issue form configuration
There is a configurable form component that could be used to view, edit and create objects. You can either configure with full control or call standard documented ‘OOTB’ services.
Create form
Add command to Toolbar
Create Issue Form Command
Create form
6. Launch Pads
7. Issue page routing
Page routing is done globally. You map a configuration by type. When clicking links the routing mapping is used to define where to navigate to. When navigating a breadcrumb is added to enable navigate back easily.
Route config in WEB-INF/classses/helium.xml
8. Debug and troubleshoot
Log watcher (e.g. try referring column with spelling mistake)
XSD validation
Browser dev tools
9. History
10. Standalone app
Launch the app standalone in new tab
11. Studio - Live widget configuration using UI (In-app designer)
12. Advanced / Dev
DataHandler interface
TECHNIA CONFIDENTIAL