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.

Exercise 1 - Install product

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

2. Stop TomEE

3. Install Helium

   • Include ‘Structure Browser’ & 'Graphic Reporting'

Exercise 2 - Installation result and Setup

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

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

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/WEB-INF/lib/tvc*.jar

   • ‘3dspace/webapps/HETrueWidget'

   • ‘3dspace/webapps/tvc'

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

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

5. With the current release a manual bug fix is needed, expand the fix in ‘3dspace/webapps/HETrueWidget/helium/custom/hex'

6. Start server (3dspace TomEE)

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

7. (Optional) Useful actions

   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'

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

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

Exercise 3 - Deploy a widget

1. Download issues widget

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

   1. View, consider and understand overall file structure.

   2. Reflect on domains ‘training/common’ vs ‘training/issue’.

   3. Find and reflect on the template reference in the originated column

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

   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)

{
	"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’

Exercise 4 - Modify widget configuration

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

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

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

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

   2. Click an edit a cell value

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

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

5. Chart configuration (copy paste state chart)

   1. Priority pie

      1. Note the matching table value colour mapping

   2. Owner bar

   3. Originated line

   4. Position the new widgets in a good layout (client reset might be needed)

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

7. 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:training1:issue/CreateIssue.xml"/>

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

Expected config result after exercise:

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

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

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

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

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

Exercise 6 - Download, expand zip and reference a specific Launch Pad

1. Download from products.technia.com

2. Expand issue domain configuration files only onto 3dspace (exclude jar’s etc to avoid server restart)

Exercise 7 - Configure Route Config

1. Add page mapping in Helium.xml

2. Refresh training widget and click through a link in the issues list

   1. Find the breadcrumb and navigate back

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

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

<BASE URL>/3dspace/goto/d/training/issue/IssuesDashboard

void prepareEvaluation(Column column, EvaluationInput input);
Cell createCell(Column column, EvaluatedData data);
void populateCell(Cell cell, EvaluatedData data);