Widgets on-prem (Helium) - Getting started

Owned by Anders Axelsson
Last updated: Sept 13, 2024
10 min read

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

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

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-20240913-112558.png
image-20240913-112624.png

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.

 

 

WEB-INF/classes/Helium.xml

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

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

 

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. Read more in the Helium Page docs.

Overview definition structure

Sample JSON (configuration file content)

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

Technical Assignee

Exclude Closed

Drag & drop column settings

Drag & drop data set - 3DDashboard require physicalid!

Service command to create Issue (note current version require string escape of body content when macro is false)

Built in table features

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

Add command to Toolbar

Create Issue Form Command

Create form

6. Launch Pads

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.

Helium routing docs

Route config in WEB-INF/classses/helium.xml

8. Debug and troubleshoot

 

 

 

 

  1. Log watcher (e.g. try referring column with spelling mistake)

  2. XSD validation

  3. Browser dev tools

9. History

10. Standalone app

Launch the app standalone in new tab

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

12. Advanced / Dev

DataHandler interface

TECHNIA CONFIDENTIAL