Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 2-4h. |
Table of Contents | ||
---|---|---|
|
1. Prerequisites
3DEXPERIENCE dev env (tomee 3dspace exploded web app)
Basic xml understanding
(OPTIONAL) IDE - VSCode, Eclipse or similar
2. Installation
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 1 - Install product
|
3. 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.
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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
Table of Contents | ||
---|---|---|
|
1. Installation
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 1 - Install product
|
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.
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 2 - Installation result and Setup
|
WEB-INF/classes/Helium.xml
Code Block |
---|
<?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
Code Block |
---|
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
tvc.helium.theme.3ddashboard=3dd |
3. Deploy a widget
Overview definition structure
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise |
‘3dspace/WEB-INF/web.xml’
Search “tvc”, you should find an added servlet, filter, mapping etc. https://products.technia.com/app/docs/tvc-documentation-2024.1.0/tvc/install/index.html#using_tvc_with_proxy_server_or_load_balancer
‘3dspace/WEB-INF/classes/helium.xml’ https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#helium
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
Code Block |
---|
<?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
Code Block |
---|
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 |
4. 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.
https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#page https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#3ddashboard_support
Overview definition structure
Gliffy | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 3 - Deploy a widget
|
Add app sample URL
Code Block |
---|
https://<BASE_URL>/3dspace/webapps/HETrueWidget/heliumWidget.html |
Sample JSON
Code Block |
---|
{
"id": "training-issues",
"title": "Training Issues",
"path": "/goto/d/",
"parameters": "tvc:dashboard:training:issue/IssuesDashboard.xml",
"custom": "true"
} |
5. Basic Configuration
<SCREENSHOT RESULT><DOCS LINK>
TODO
Note | ||||
---|---|---|---|---|
Folder structure vs domains tvc:tablecolumn domain structure vs folder structure3 - Deploy a widget
|
Sample JSON (configuration file content)
Code Block |
---|
{
"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
Note |
---|
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’ |
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 4 - Modify widget configuration It is recommended to TEST all below steps incrementally (refresh widget in dev mode)
Expected config result after exercise:
|
Technical Assignee
Code Block |
---|
<?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
Code Block |
---|
<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> |
Drag & drop column settings
Code Block |
---|
<Draggable>true</Draggable>
<Setting name="template" value="helium/templates/table/object-link" /> |
Drag & drop data set - 3DDashboard require physicalid!
Code Block |
---|
<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>
<Select>physicalid</Select>
</Query>
</DataSet> |
Service command to create Issue (note current version require string escape of body content when macro is false)
Code Block |
---|
<ServiceCommand>
<Label>Create</Label>
<FontIcon>ti-c ti-add</FontIcon>
<Setting name="OnClick" value="App.dataTable.invokeServiceCall" />
<Setting name="OnClickParams">
{
"url": "resources/v1/modeler/dsiss/issue",
"header": {"content-type": "application/json"},
"addSecurityContext": "true",
"addCsrfToken": "true",
"method": "POST",
"selectionCriteria": "none",
"body": "{\"type\": \"Issue\",\"title\": \"A new Issue\",\"priority\": \"Low\"}",
"macro":"false"
}
</Setting>
</ServiceCommand> |
Built in table features
Code Block |
---|
<DataTable>
...
<Toolbar>
...
<DataGroup/>
<ExportExcel />
<ExportPDF />
<Search />
<ToggleColumnVisibility />
<AdvanceSorting />
</Toolbar>
</DataTable> |
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
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 5 - Add issue create form
Expected config result after exercise:
|
Add command to Toolbar
Code Block |
---|
<DataTable>
...
<Toolbar>
...
<ServiceCommand ref="tvc:servicecommand:training:issue/CreateIssueByForm.xml" />
</Toolbar>
</DataTable> |
Create Issue Form Command
Code Block |
---|
<ServiceCommand>
<Label>Create Issue Form</Label>
<FontIcon>ti-c ti-plus</FontIcon>
<Setting name="OnClick" value="App.dataTable.invokeServiceCall" />
<Setting name="OnClickParams">{
"macro":"false",
"macroElements":"",
"selectionCriteria": "none",
"form":{
"options":{
"formConfigName": "tvc:form:training:issue/CreateIssueForm.xml",
"fullscreen":true,
"modal":{
"position":{"top":"30%","bottom":"20%","left":"40%","right":"10%"},
"controls":{"dock":true,"expand":true,"close":true}
}
},
"url": "resources/v1/modeler/dsiss/issue",
"body":{"type": "Issue", "description":"{{description.values[0].value}}","priority": "{{priority.values[0].value}}"},
"method":"POST",
"addSecurityContext": true,
"addCsrfToken": "true",
"bodyResolver": "description.values[0].value,priority.values[0].value"
}
}</Setting>
</ServiceCommand> |
Create form
Code Block |
---|
<Form>
<Title>Create Issue</Title>
<Layout>
<Columns>1</Columns>
</Layout>
<Section>
<Field id="description">
<Label>Description</Label>
<Editable>true</Editable>
<FieldType>textarea</FieldType>
</Field>
<Field id="priority">
<Label>Priority</Label>
<Editable>true</Editable>
<FieldType>select</FieldType>
<Defaults>
<Value value="Low" selected="true">
<Label>Low</Label>
</Value>
<Value value="Medium">
<Label>Medium</Label>
</Value>
<Value value="High">
<Label>High</Label>
</Value>
</Defaults>
</Field>
</Section>
</Form> |
6. Launch Pads
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 4 - Modify widget configuration It is recommended to TEST all below steps incrementally (refresh widget in dev mode)
|
Related Assignee and CR inc group header
Code Block |
---|
<boilerPlate/> |
Style cell using built-in handlebar template
Code Block |
---|
<boilerPlate/> |
Modify Data set to exclude closed issues
Code Block |
---|
<boilerPlate/> |
Toolbar command to add CR using service invoke
Code Block |
---|
<boilerPlate/> |
Add priority pie
Code Block |
---|
<boilerPlate/> |
6. Create Issue form configuration
<SCREENSHOT create form and highlighted new row>
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 5 - Add issue create form
|
Toolbar sample
Code Block |
---|
<boilerPlate/> |
Create form sample
Code Block |
---|
<boilerPlate/> |
7. Issue page routing
TODO issue-page.zip
Exercise route config in helium.xml
8. Launch Pads
<SCREENSHOT MY DOCUMENTS PAD>
<LINKS>
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 6 - Download, expand zip and reference a specific Launch Pad
|
Code Block |
---|
<boilerPlate/> or json |
9. Debug and troubleshot
Log watcher (e.g. spelling mistake column ref)
XSD validation
Browser dev tools
10. Standalone app?
NOT IN TRAINING BUT sneak peak
Exercise.. Try open
Exercise 6 - Download, expand zip and reference a specific Launch Pad
|
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.
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 7 - Configure Route Config
|
Route config in WEB-INF/classses/helium.xml
Code Block |
---|
<?xml version="1.0" encoding="UTF-8"?>
<Application xmlns="http://technia.com/helium/Application">
<PageMapping>
<Page namespace="helium:launchpad:issue" name="IssuePage.xml">
<Type is="type_Issue" />
</Page>
</PageMapping>
</Application> |
8. Debug and troubleshoot
Log watcher (e.g. try referring column with spelling mistake)
XSD validation
Browser dev tools
9. History
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
A rich set of configurable UI components for 3DSPACE, 3DDASHBOARD and standalone applications, developed on demand from more than 130 customers in 20 years. Value Components allows you to optimize 3DEXPERIENCE UI to perfectly match your business processes, this without carrying the added weight of custom code |
10. Standalone app
Launch the app standalone in new tab
Code Block |
---|
<BASE URL>/3dspace/goto/d/ |
training/issue/ |
IssuesDashboard |
<SCREENSHOT>
11. Widget Studio - Live
widgetconfiguration using UI (In-app designer)
12. Advanced / Dev
<DATA HANDLER example?>
<SCREENSHOT complex column>
DataHandler interface
Code Block |
---|
void prepareEvaluation(Column column, EvaluationInput input);
Cell createCell(Column column, EvaluatedData data);
void populateCell(Cell cell, EvaluatedData data); |