Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 h. |
Prerequisites
3DEXPERIENCE dev env (tomee 3dspace exploded web app)
Basic xml understanding
(OPTIONAL) IDE - VSCode, Eclipse or similar
Table of Contents | ||
---|---|---|
|
1. Installation
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 1 - Install product
|
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.
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 2 - Installation result and Setup
|
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 |
3. Deploy a widget
Overview definition structure
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 3 - Deploy a widget
|
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" } |
4. Basic Configuration
Table configuration, Chart configuration
Note |
---|
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’ |
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 4 - Modify widget configuration It is recommended to TEST all below steps incrementally (refresh widget in dev mode)
📁 Widget after exercise:
|
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> |
Drag & drop column settings
Code Block |
---|
<Draggable>true</Draggable> <Setting name="template" value="helium/templates/table/object-link" /> |
Drag & drop data set - 3DDashboard require physicalid
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> <Select>physicalid</Select> </Query> </DataSet> |
Service command to create Issue (DOES NOT WORK NOW)
Code Block |
---|
<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> |
5. Create Issue form configuration
<SCREENSHOT create form and highlighted new row>Create form
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 5 - Add issue create form
|
Toolbar sample
Code Block |
---|
<Toolbar> <DataGroup/> <Menu> <Label>Export</Label> <FontIcon>ti-c ti-share</FontIcon> <ExportExcel /> <ExportPDF /> </Menu> <Search /> <ToggleColumnVisibility /> <AdvanceSorting /> <Command> <Label>Promote</Label> <FontIcon>icon forward</FontIcon> <OnClick>App.table.action.promote</OnClick> <Alt>Tooltip-Sample Promote</Alt> </Command> <Command> <Label>Demote</Label> <FontIcon>icon backward</FontIcon> <OnClick>App.table.action.demote</OnClick> <Alt>tooltip here for Demote</Alt> </Command> <ServiceCommand ref="tvc:servicecommand:training:issue/CreateIssue.xml" /> <ServiceCommand ref="tvc:servicecommand:training:issue/CreateIssueByForm.xml" /> </Toolbar> |
Widget with Toolbar
Code Block |
---|
<DataTable> <Title>Issue Table Widget</Title> <Responsive>false</Responsive> <TableConfig namespace="training:issue">IssuesTable.xml</TableConfig> <Toolbar> <DataGroup/> <Menu> <Label>Export</Label> <FontIcon>ti-c ti-share</FontIcon> <ExportExcel /> <ExportPDF /> </Menu> <Search /> <ToggleColumnVisibility /> <AdvanceSorting /> <Command> <Label>Promote</Label> <FontIcon>icon forward</FontIcon> <OnClick>App.table.action.promote</OnClick> <Alt>Tooltip-Sample Promote</Alt> </Command> <Command> <Label>Demote</Label> <FontIcon>icon backward</FontIcon> <OnClick>App.table.action.demote</OnClick> <Alt>tooltip here for Demote</Alt> </Command> <ServiceCommand ref="tvc:servicecommand:training:issue/CreateIssue.xml" /> <ServiceCommand ref="tvc:servicecommand:training:issue/CreateIssueByForm.xml" /> </Toolbar> </DataTable> |
Create Issue Form Command
Code Block |
---|
<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> |
Create form sample
Code Block |
---|
<Form> <Title>Create Issue</Title> <Layout> <Columns>1</Columns> </Layout> <Section> <Field id="description"> <Label>Description</Label> <Editable>false</Editable> <FieldType>text</FieldType> </Field> <Field id="priority"> <Label>Priority</Label> <Editable>true</Editable> <FieldType>text</FieldType> </Field> </Section> </Form> |
6. Issue page routing
TODO issue-page.zip - POTENTIALLY MOVE AFTER LAUNCH PADS AND ROUT TO THAT?
Exercise route config in helium.xml
7. Launch Pads
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Exercise 6 - Download, expand zip and reference a specific Launch Pad
|
8. Debug and troubleshoot
Log watcher (e.g. try referring column with spelling mistake)
XSD validation
Browser dev tools
9. Standalone app?
Launch the app standalone in new tab
Code Block |
---|
<BASE URL>/3dspace/goto/d/training/issue/IssuesDashboard |
10. Studio - Live widget configuration using UI (In-app designer)
11. Advanced / Dev
DataHandler signature
Code Block |
---|
void prepareEvaluation(Column column, EvaluationInput input); Cell createCell(Column column, EvaluatedData data); void populateCell(Cell cell, EvaluatedData data); |