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

  • Structure Browser

      • Include ‘Structure Browser’ & 'Graphic Reporting'

      • Exclude

    schema -
      • Schema (

    require
      • requires ‘User Agent’ password, default is ‘secret123’)

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

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

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

    with minimal setup
      • (used for

    automatic routing based on object type, more info in docs
      • object routing etc)

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

      • Copy below properties

    (dev mode, debug logs, user agent, more properties found in docs)
    1. Start server (3dpsace tomee)

      • Verify that TVC system initialize correctly in logs

    2. (Optional) 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)

    Start server
    1. (

    3dpsace tomee)
    • Verify that TVC system initialize correctly in logs

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

    WEB-INF/classes/Helium.xml

    Code Block
    <?xml version="1.0" encoding="UTF-8"?>
    <Application xmlns="http://technia.com/helium/Application">
    </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

    4. Deploy a widget

    <update with correct url and json?

    image-20240326-160119.png

    <SCREENSHOT compass app and resulting 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, ensuring the same hight quality cross the full application.

    Definition structure overview.

    Gliffy
    imageAttachmentIdatt4456054819
    macroIdef17b501-91cb-4324-aeee-09ee547a9d1e
    baseUrlhttps://technia.jira.com/wiki
    nameHelium definition structure
    diagramAttachmentIdatt4455465004
    containerId4452548643
    timestamp1711640183046

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

    Panel
    panelIconId1f446
    panelIcon:point_up_2:
    panelIconText👆
    bgColor#F4F5F7

    Exercise 3 - Deploy a widget

    1. Download

    and deploy Issues
    1. issues widget. <issue-widget.zip>

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

      1. View, consider and understand

    all file content, issue vs common domainExpand zip to
      1. overall file structure.

      2. Reflect on domains ‘3dspace/WEB-INF/tvc/traning/common’ vs ‘3dspace/WEB-INF

    /tvc’
      1. /tvc/traning/issue’, how could it be used?

    1. json widget spec < 3dspace PATH>

    2. Go to 3ddashboard → platform management → add app (use below sample url)

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

    json sample, widget url

    Code Block
    <TODO/>

    5. Basic Configuration

    <SCREENSHOT RESULT>

    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. Add Priority column (consider domain common or issues) <docs link>

    2. Using xsd schema and IDE validation support? <xsd link>

    3. Add related data (Assignee and Change Request) <docs link>

    4. Add built in template for fancy Priority rendering <docs link>

    5. Modify data set to exclude closed issues (or elaborate) <docs link>

    6. Add command using calling ootb service <docs link>

    7. Add Priority pie chart <docs link>

    8. Drag drop to OOTB widget

    9. Enable built in table settings

    10. (Optional) Misconfigure xml and use log watcher to find details

    Attribute

    Code Block
    <boilerPlate/>

    XSD validation with IDE

    Code Block
    <boilerPlate/>

    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 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. HEX / Launch Pads

    <SCREENSHOT MY DOCUMENTS PAD or HEX?>

    Panel
    panelIconId1f446
    panelIcon:point_up_2:
    panelIconText👆
    bgColor#F4F5F7

    Exercise 6 - Download, expand zip and reference a specific HEX / 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

    8. Standalone?

    <SCREENSHOT>

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

    10. 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/>