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 h.
Prerequisites
3DEXPERIENCE dev env (tomee 3dspace exploded web app)
Basic xml understanding
(OPTIONAL) IDE - VSCode, Eclipse or similar
1. Installation
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.
Include 'Collaboration'(dependency), ‘Structure Browser’ & 'Graphic Reporting'
Exclude Schema (requires ‘User Agent’ password, default is ‘secret123’)
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.
Exercise 2 - Installation result and Setup
‘3dspace/WEB-INF/web.xml’
Search “tvc”, you should find an added servlet, filter, mapping etc.
‘3dspace/WEB-INF/classes/helium.xml’
Copy below minimal setup code snippet (used for object routing etc)
‘3dspace/WEB-INF/classes/tvc.properties'
Copy below properties, remove conflicts from ‘web.xml’
Start server (3dpsace tomee)
Verify that TVC system initialize correctly in logs
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)
Launch log watcher (require admin user) https://<baseurl>/3dspace/tvc/core/tvcLogWatcher.jsp
Clear TVC cache (require admin user) https://<baseurl>/3dspace/tvc-action/clearCache
(Optional) Misc
Set log levels runtime
Monitor status & set runtime param
showActionMappings
MQL client
..
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=true
3. 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.
Overview definition structure
Exercise 3 - Deploy a widget
Download issues widget 📁
Expand zip to ‘3dspace/WEB-INF/tvc’
View, consider and understand overall file structure.
Reflect on domains ‘3dspace/WEB-INF/tvc/traning/common’ vs ‘3dspace/WEB-INF/tvc/traning/issue’, how could it be used?
Find and reflect on the template reference in the originated column
Specify widget in JSON and deploy it somewhere reachable by 3ddashboard (e.g. 3dspace/helium)
3DDashboard Helium widget : 3DDashboard → Platform Management → Add app (use below sample url)
Find app in compass, add to a dashboard and test it
Add app sample URL
https://<BASE_URL>/3dspace/webapps/HETrueWidget/heliumWidget.html
Sample JSON
{ "id": "training-issues", "title": "Training Issues", "path": "/goto/d/", "parameters": "tvc:dashboard:training:issue/IssuesDashboard.xml", "custom": "true" }
4. Basic Configuration
<SCREENSHOT RESULT><DOCS LINK>
Table configuration: https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#datatable
Folder structure notice
Note that there is a difference between the structure of configuration xml references and the folder structure.
Config reference: 'tvc:<CONF_TYPE>:<DOMAIN>:<SUB_1>:<SUB_N>:<FILE>.xml’
Folder structure: ‘tvc/<DOMAIN>/<SUB_1>/<SUB_N>/<CONF_TYPE>/<FILE>.xml’
Exercise 4 - Modify widget configuration
It is recommended to TEST all below steps incrementally (refresh widget in dev mode)
Open 'WEB-INF/tvc' with an IDE, setup to use .xsd schema support, validate and autocomplete
Add Priority column (copy an existing column, use issue domain, reflect why). Column configuration https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#datatable-ColumnConfiguration
Add auto colour template (see state column)
Add related data column e.g. 'from[Technical Assignee].to.name' (copy column type from owner)
Modify data set to exclude closed issues (or elaborate, maybe past year only..). Data set:https://products.technia.com/app/docs/tvc-documentation-2024.1.0/tvc/adminguide/core/index.html#data-sets
Charts (copy paste) https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#chart
Priority pie
Owner bar
Originated line
Position the new widgets in a good layout (client reset might be needed)
Drag drop to OOTB widget https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#drag_and_drop_support
Add command using OOTB service (create connect CR?) <docs link>
Enable built in table settings (data group, export, sort, filter….)
Technical Assignee
<?xml version="1.0" encoding="UTF-8"?> <Column xmlns="http://technia.com/TVC/Table" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://technia.com/TVC/Table http://products.technia.com/tvc/schema/latest/TableColumn.xsd"> <Name>assignee</Name> <Label>Technical Assignee</Label> <Expression>from[Technical Assignee].to.name</Expression> <HeaderNoWrap>true</HeaderNoWrap> <Editable>false</Editable> <ColumnType>helium-user</ColumnType> </Column>
Exclude Closed
<DataSet xsi:schemaLocation="http://technia.com/TVC/DataSet http://products.technia.com/tvc/schema/latest/DataSet.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://technia.com/TVC/DataSet"> <Query> <TypePattern> <Type>type_Issue</Type> </TypePattern> <Where>current!=Closed</Where> </Query> </DataSet>
Toolbar command to add CR using service invoke
<boilerPlate/>
5. Create Issue form configuration
<SCREENSHOT create form and highlighted new row>
Exercise 5 - Add issue create form
Add toolbar command <docs link>
Add form config <docs link>
TEST
Toolbar sample
<boilerPlate/>
Create form sample
<boilerPlate/>
6. Issue page routing
TODO issue-page.zip
Exercise route config in helium.xml
7. Launch Pads
<SCREENSHOT MY DOCUMENTS PAD>
<LINKS>
Exercise 6 - Download, expand zip and reference a specific Launch Pad
Instructions <docs link>
Useful as runnable documentation or real project templates
Link all issues view to navigate route into Launch Pad issue view?
<boilerPlate/> or json
8. Debug and troubleshot
Log watcher (e.g. spelling mistake column ref)
XSD validation
Browser dev tools
9. Standalone app?
NOT IN TRAINING BUT sneak peak
Exercise.. Try open
<BASE URL>/3dspace/goto/d/helium/launchpad/issue/MyIssuesSummarized
<SCREENSHOT>
10. 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.
Studio is not included in this training.
<SCREENSHOT studio>
11. 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.
Development of advanced use cases is not covered in this training.
<DATA HANDLER example?>
<SCREENSHOT complex column>
<DataHandler reference/>