Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId1f3af
panelIcon:dart:
panelIconText🎯
bgColor#DEEBFF

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
stylenone

1. Prerequisites

  • 3DEXPERIENCE dev env (tomee 3dspace exploded web app)

  • Basic xml understanding

  • (OPTIONAL) IDE - VSCode, Eclipse or similar

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

Info

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.

image-20240326-155521.png
Panel
panelIconId1f4bf
panelIcon:cd:
panelIconText💿
bgColor#F4F5F7

Exercise 1 - Install product

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

  2. Install TVC https://products.technia.com/app/docs/tvc-documentation-2024.1.0/tvc/install/index.html#installation

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

    • Exclude Schema (requires ‘User Agent’ password, default is ‘secret123’)

  3. Install Helium https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#installation

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.

image-20240326-155718.png

image-20240328-102035.png

Panel
panelIconId1f446
panelIcon:point_up_2:
panelIconText👆
bgColor#F4F5F7

Exercise 2 - Installation result and Setup

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

  2. ‘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)

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

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

  4. Start server (3dpsace tomee)

    • Verify that TVC system initialize correctly in logs

  5. 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)

  6. Launch log watcher (require admin user) https://<baseurl>/3dspace/tvc/core/tvcLogWatcher.jsp

  7. Clear TVC cache (require admin user) https://<baseurl>/3dspace/tvc-action/clearCache

  8. (Optional) Misc

    1. Set log levels runtime

    2. Monitor status & set runtime param

    3. showActionMappings

    4. MQL client

    5. ..

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

image-20240402-121729.png
image-20240402-134738.png

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
imageAttachmentIdatt4456054819
macroIdef17b501-91cb-4324-aeee-09ee547a9d1e
baseUrlhttps://technia.jira.com/wiki
nameHelium definition structure
diagramAttachmentIdatt4455465004
containerId4452548643
timestamp1711640183046

Panel
panelIconId1f446
panelIcon:point_up_2:
panelIconText👆
bgColor#F4F5F7

Exercise 3 - Deploy a widget

  1. Download issues widget.

    View file
    nametraining.zip

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

    1. View, consider and understand overall file structure.

    2. Reflect on domains ‘3dspace/WEB-INF/tvc/traning/common’ vs ‘3dspace/WEB-INF/tvc/traning/issue’, how could it be used?

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

  3. Specify widget in a JSON file and deploy it somewhere reachable by 3ddashboard (e.g. 3dspace/helium) https://products.technia.com/app/docs/tvc-documentation-2024.1.0/tvc/adminguide/core/index.html#preconfigured_widgets_json_configuration

  4. Go to 3DDashboard → Platform Management → Add app (use below sample url)

  5. Find app in compass, add to a dashboard and test it

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>

Table configuration: https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#datatable

Note

Folder structure vs domains

tvc:tablecolumn domain structure vs folder structure

Panel
panelIconId1f446
panelIcon:point_up_2:
panelIconText👆
bgColor#F4F5F7

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 https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#datatable-ColumnConfiguration

    1. Add auto colour template (see state column)

  3. Add related data column e.g. 'from[Technical Assignee].to.name' (copy column type from owner)

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

  5. Charts (copy paste) https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#chart

    1. Priority pie

    2. Owner bar

    3. Originated line

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

    Add command using OOTB service (create connect CR?
    1. )

    <docs link>
  6. Drag drop to OOTB widget (by adding it to the standard common conf all future use will benefit) https://products.technia.com/app/docs/tvc-helium-documentation-2024.1.1/helium/admin/index.html#drag_and_drop_support

  7. Add command using OOTB service (create connect CR?) <docs link>

  8. Enable built in table settings (data group, export, sort, filter….)

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>

Toolbar command to add CR using service invoke

Code Block
<boilerPlate/>

6. Create Issue form configuration

<SCREENSHOT create form and highlighted new row>

Panel
panelIconId1f446
panelIcon:point_up_2:
panelIconText👆
bgColor#F4F5F7

Exercise 5 - Add issue create form

  1. Add toolbar command <docs link>

  2. Add form config <docs link>

  3. TEST

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>

Launch Pads (Value Apps)

Panel
panelIconId1f446
panelIcon:point_up_2:
panelIconText👆
bgColor#F4F5F7

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

  1. Instructions <docs link>

  2. Useful as runnable documentation or real project templates

  3. Link all issues view to navigate route into Launch Pad issue view?

Code Block
<boilerPlate/> or json

9. Debug and troubleshot

  1. Log watcher (e.g. spelling mistake column ref)

  2. XSD validation

  3. Browser dev tools

10. Standalone app?

NOT IN TRAINING BUT sneak peak

Exercise.. Try open

<BASE URL>/3dspace/goto/d/helium/launchpad/issue/MyIssuesSummarized

<SCREENSHOT>

11. Studio - Live widget configuration using UI (In-app designer)

Info

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>

12. Advanced / Dev

Info

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>

Code Block
<DataHandler reference/>