Chapter goals & duration

In this chapter you will learn the basics on how to install and setup widget box pro (configurable widget framework), deploy a widget and make some basic modifications to it. You will also learn where to find documentation, examples, installers & license.

Expected duration 2-4h.

Exercise 1 - Install product

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

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

  • Structure Browser

  • Graphic Reporting

  • Exclude schema - (require ‘User Agent’ password, default is ‘secret123’)

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

Exercise 2 - Installation result and Setup

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

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

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

  • Copy below code snippet with minimal setup (used for automatic routing based on object type, more info in docs)

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

  • Copy below properties (dev mode, debug logs, user agent, more properties found in docs)

• (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 (3dpsace tomee)

  • Verify tvc system init correctly in logs

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

<?xml version="1.0" encoding="UTF-8"?>
<Application xmlns="http://technia.com/helium/Application">
</Application>

tvc.core.logLevel=DEBUG
tvc.core.productionMode=false
tvc.core.user=User Agent
tvc.core.password=secret123

Exercise 3 - Deploy a widget

• Download and deploy Issues widget. <issue-widget.zip>

  • view, consider and understand all file content, issue vs common domain

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

• json widget spec < 3dspace PATH>

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

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

<TODO/>

Exercise 4 - Modify widget configuration

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

• Add Priority column (consider domain common or issues) <docs link>

• Using xsd schema and IDE validation support? <xsd link>

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

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

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

• Add command using calling ootb service <docs link>

• Add Priority pie chart <docs link>

• Drag drop to OOTB widget

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

<boilerPlate/>

<boilerPlate/>

<boilerPlate/>

<boilerPlate/>

<boilerPlate/>

<boilerPlate/>

<boilerPlate/>

Exercise 5 - Add issue create form

• Add toolbar command <docs link>

• Add form config <docs link>

• TEST

<boilerPlate/>

<boilerPlate/>

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

• Instructions <docs link>

• Useful as runnable documentation or real project templates

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

<boilerPlate/> or json

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.

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

<DataHandler reference/>