Chapter goals
In this chapter you will learn the basics on how to install and setup widget box pro (configurable TVC Helium widget framework), deploy a widget and make some basic modifications to it. You will also learn where to find documentation, examples, installers & license.
Prerequisites
3DEXPERIENCE dev env (tomee 3dspace exploded web app)
Basic xml understanding
Optional IDE (vscode, eclipse or similar)
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 is a separate training.
Exercise 1 - Install product
Go to https://products.technia.com and download the latest TVC and Helium installers. Use customer license file or generate a time bombed developers license.
Install TVC https://products.technia.com/app/docs/tvc-documentation-2024.1.0/tvc/install/index.html#installation
Structure Browser
Graphic Reporting
Exclude schema - (require ‘User Agent’ password, default is ‘secret123’)
Install Helium https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#installation
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.
Exercise 2 - Installation result and Setup
‘3dspace/WEB-INF/web.xml’
Search “tvc”, you should find an added servlet definition, mapping etc. <SCREENSHOT>
‘3dspace/WEB-INF/classes/helium.xml’
Copy below code snippet with minimal setup (used for automatic routing based on object type, more info in docs)
‘3dspace/WEB-INF/classes/tvc.properties'
Copy below code snippet (dev mode, debug logs, user agent, more properties found in docs)
(Optional) Locate all installed resources
‘3dspace/WEB-INF/lib/tvc*.jar
‘3dspace/tvc' (legacy classic component jsp’s)
‘3dspace/helium'
‘3dspace/webapps/helium'
‘3dspace/WEB-INF/tvc*.tld'
‘3dspace/WEB-INF/tvc' (configs go here in next step)
Start server (3dpsace tomee) and find tvc system init in logs <SCREENSHOT>
(Optional) Launch log watcher (require admin user) <URL>
WEB-INF/classes/Helium.xml sample
<TODO/>
WEB-INF/classes/tvc.properties sample
tvc.TODO=debug tvc.TODO=false tvc.TODO=User Agent tvc.TODO=secret123
Deploy a widget
Exercise 3 - Deploy a widget
Download and deploy Issues widget. <issue-widget.zip>
view, consider and understand all file content, issue vs common domain
Expand zip to ‘3dspace/WEB-INF/tvc’
json widget spec < 3dspace PATH>
Go to 3ddashboard → platform management → add app
Add widget <SCREENSHOT><URL>
Find app in compass, add to a dashboard and test it <SCREENSHOT>
json sample
<TODO/>
Basic Configuration
Exercise 4 - Modify widget configuration
Add Priority column (consider domain common or issues) <docs link>
Using xsd schema and IDE validation support? <xsd link>
Add related data (Assignee and Change Request) <docs link>
Add built in template for fancy Priority rendering <docs link>
Modify data set to exclude closed issues (or elaborate) <docs link>
Add command using calling ootb service <docs link>
Add Priority pie chart <docs link>
TEST all steps incrementally <SCREENSHOT>
(Optional) Misconfigure xml and use log watcher to find details
Attribute
<boilerPlate/>
XSD validation with IDE
<boilerPlate/>
Related Assignee and CR inc group header
<boilerPlate/>
Style cell using built-in handlebar template
<boilerPlate/>
Modify Data set to exclude closed issues
<boilerPlate/>
Toolbar command to add CR using service invoke
<boilerPlate/>
Add priority pie
<boilerPlate/>
Create Issue Configuration
Exercise 5 - Add issue create form
Add toolbar command <docs link>
Add form config <docs link>
TEST <SCREENSHOT>
Toolbar sample
<boilerPlate/>
Create form sample
<boilerPlate/>
HEX / Launch Pads
Exercise 6 - Download, expand zip and reference a specific HEX / Launch Pad
Instructions <docs link>
Useful as runnable documentation or real project templates
<boilerPlate/> or json
Studio - Live widget configuration using UI (In-app designer)
Studio (In-app designer)
Most configurations could be made live directly from within the UI. This way server access and deploys (release) is no longer needed but view definitions are handled like data.
Covered in separate training.
<SCREENSHOT>
Advanced / Dev
Advanced
There could be requirements outside what is possible by standard configuration. E.g. cells using custom calculation logic. The product supports a wide range of controlled extension plugins using well defined and upgrade safe interfaces.
Covered in separate training.
<DATA HANDLER example?>