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 4h.

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.

Exercise 1 - Install product

1. Go to https://products.technia.com and download the latest Helium installers (& xsd, hex..). Use customer license file or generate a time limited developers license.

2. Stop TomEE

3. Install Helium

   • Include ‘Core’, ‘Structure Browser’ & ‘Graphic Reporting'

4. Install fix for 2026.1.0

   View file
   name 2026.1.0-training-fix.zip

Exercise 2 - Installation result and Setup

1. ‘3dspace/WEB-INF/web.xml’

   • Search “tvc”, you should find an added servlet, filter, mapping etc.

   • Add <load-on-startup>100</load-on-startup>

2. ‘3dspace/WEB-INF/classes/helium.xml’

   • Copy below minimal setup code snippet (used for object routing etc)

3. ‘3dspace/WEB-INF/classes/tvc.properties'

   • Copy below properties, remove conflicts from ‘web.xml’

4. Locate all installed resources

   • ‘3dspace/webapps/HETrueWidget'

   • ‘3dspace/WEB-INF/lib/tvc*.jar'

   • ‘3dspace/WEB-INF/lib/helium*.jar'

   • ‘3dspace/WEB-INF/classes/technia.license'

   • ‘3dspace/WEB-INF/tvc' (configs go here in next step)

5. Start server (3dspace TomEE)

   1. Verify that TVC system initialize correctly in logs (see above screenshot for reference)

6. Useful actions (Optional - not available in widget mode)

   1. Clear cache (required in production mode): ‘/3dspace/tvc-action/clearCache’

   2. Set log levels runtime: ‘/3dspace/tvc-action/setLogLevel?logLevel=INFO’

   3. Monitor status & set runtime param: ‘/3dspace/tvc-action/monitorStatus’

   4. List all actions: ‘/3dspace/tvc-action/showActionMappings’

   5. MQL client: ‘/3dspace/tvc-action/MQLClient’

   6. Logs: '/3dspace/tvc/core/tvcLogWatcher.jsp'

   7. User persistence data: '/3dspace/tvc-action/tcm-showDataObjects'

Exercise 3 - Deploy a widget

1. Download issues widget

   View file
   name training-1.zip

2. Expand zip to ‘3dspace/WEB-INF/tvc/training’

   1. View, consider and understand overall file structure (Entry point → WEB-INF/tvc/training/issue/dashboard)

   2. Reflect on domains ‘training/common’ vs ‘training/issue’ (you can make reusable components).

   3. Find and reflect on the template reference in the originated column (you can inherit)

3. Specify widget in JSON and deploy it somewhere reachable by 3ddashboard e.g. '3dspace/webapps/HETrueWidget/config/training-issues.json'.

   1. Use “Sample JSON” code snippet below

4. 3DDashboard Helium widget docs: 3DDashboard → Platform Management → Add app (Source code URL: https://<BASE_URL>/3dspace/webapps/HETrueWidget/heliumWidget.html, Configuration file URL: PATH TO JSON)

5. Find the app in compass, add to a dashboard and test it! (should look like above screenshot)

   1. With recent data model changes the column attributes might need to be remapped (e.g. attribute[Estimated End Date] → attribute[Change.Completion Date Estimated])

{
	"id": "training-issues",
	"title": "Training Issues",
	"path": "/goto/d/",
	"parameters": "tvc:dashboard:training:issue/IssuesDashboard.xml",
	"custom": "true"
}

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’

It is recommended to TEST all below steps incrementally (refresh widget in dev mode)

Exercise 4.1 - IDE & XSD

Open 'WEB-INF/tvc' with an IDE, setup to use .xsd schema support, validate and autocomplete

Exercise 4.2 - Columns

• Add Priority column (copy an existing column, use issue domain, reflect why, Column configuration docs).

  • Add auto colour template (see state column) Auto Colouring Docs

  • Click an edit a cell value

Exercise 4.3 - Related data

Add related data column e.g. 'from[Technical Assignee].to.name' (copy column type from owner), and/or Affected Item, Resolved By multiple properties

<?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>

Exercise 4.4 - Data set

Modify Data set to exclude closed issues (see docs link and elaborate, maybe past year only..).

<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>

Exercise 4.5 - Charts

Chart configuration (copy paste state chart)

1. Priority pie

   1. Note the matching table value colour mapping

2. Owner bar

3. Originated line (See options in docs)

Exercise 4.6 - Layout

Position the new widgets in a good layout (client reset might be needed) Image Added

Exercise 4.7 - Drag & drop

Drag drop to OOTB widget

1. PHYSICALID REQUIRED! use data set select as object id is default.

2. see below boiler plate and drag drop docs in name column, add lifecycle widget and drop an issue

<Draggable>true</Draggable>
<Setting name="template" value="helium/templates/table/object-link" />

<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>

Exercise 4.8 - Public API

1. Create issue using OOTB service (Invoke service command, DS docs docs)

   1. Create servicecommand folder

   2. Create a file with the below service command code snippet

   3. Refer the definition form IssuesTableWidget toolbar <ServiceCommand ref="tvc:servicecommand:training:issue/CreateIssue.xml"/>

<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,
        "addJson": false
    }
    </Setting>
</ServiceCommand>

Exercise 4.9 - Built in

Enable built in table settings (se below boiler plate inc data group, export, sort, filter….)

1. Try data group by state column in the UI and other features

<DataTable>
...
	<Toolbar>
	...
		<DataGroup/>
		<ExportExcel />
		<ExportPDF />
		<Search />
		<ToggleColumnVisibility />
		<AdvanceSorting />
	</Toolbar>
</DataTable>

Exercise 5 - Add issue create form

1. Add servicecommand & toolbar reference Toolbar Docs

2. Add form config Form Docs

Expected config result after exercise:

<DataTable>
...
	<Toolbar>
	...
		<ServiceCommand ref="tvc:servicecommand:training:issue/CreateIssueByForm.xml" />
	</Toolbar>
</DataTable>

<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>

<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>

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