HCL Domino Volt - Using Tables

HCL Domino Volt

Using Tables

The webcast will begin shortly

Presented By Christopher Dawes

Leap/Volt Consultant, SME, Developer

Agenda

General Information

Populating Tables from Services

Using tables as a selection vehicle

Pagination

Manipulating Tables with JavaScript

Using CSS to Style a Table

Customized Rendering of Table data

Dropdowns By Service

2

Tables

• Tables have a UI and a data component (accessed from the outline view)

• Can set the number of visible rows (height), and the appearance of row actions

• Tables can be nested

• A table is a form, with a page (P_NewPage)

• Rules can be used within tables

• Column widths can be modified and columns can be removed/re-ordered

• Can be used for users to enter data or as a view-only control

• Table fields cannot be used as inputs to services

• Table does not have a valid event (despite it appearing on the events tab)

3

Populating via Services

• Any list data can be presented in a table

• Create fields in table for each item in list data

• Service outputs are linked to the table fields,

only services that return a list can be linked to

a table.

• Service might be executed when the table is

rendered or the result of a user action.

Customized Interactive Table View / Deal Tracking

4

Using Tables as Selection

Tables can be a quick, easy method for rendering a data navigation control, where

clicking on a table row shows more detail about the selection

The table can contain:

• just the visible text and a unique key, on selection call a service to get the rest

of the data or

• All the data (more javaScript required to implement)

Demonstration (Customer Tracking, Deal Tracking)

5

Pagination

Pagination is most common when tables are rendering data from a service

Basic rule: don’t render more than 25-50 items = too much scrolling

Table does not have built-in controls for pagination

Create controls for managing pagination

(items per page, page)

Can use CSS to further refine placement of pagination controls

Demonstration

6

Manipulating with JavaScript

• Programmatically Hide row controls

item.showAdd(false);

item.showEdit(false);

item.showRemove(false);

• Get Selected Row

item.getSelection()

• Add rows (createNew(), add(…))

• Re-order rows

• Code Review / Demonstration (Manipulate Table)

7

Styling with CSS

Not as well documented, lots can be done, but requires debugging with trial/error

.lfFormFieldTable

.lfMn .lfTableGrid.dojoxGrid td.dojoxGridCell

• Include css file in app

• Define inline using available functions

dojo.query (query(…)*)

dojo.style (style(…)*)

Some examples posted to the wiki

8

Customized Rendering

• Some applications may require a more customizable listing of data

• Using an HTML item we can present the data any way we like

• Row-specific action buttons

• Include html controls

• Using javaScript can iterate over all items in the table

• The Volt table item is hidden and never shown

• Demonstration / Code Review (Interactive Table View)

9

Dropdowns by Service

Service populated dropdowns are not natively supported

Options can be set using javaScript setOptions(…)

Copy parent value (service input trigger) to hidden field:

app.getForm('F_Form1').getBO().F_TempRegion.setValue(BOA.getValue());

Service response is copied from main form to dropdown in

table

var j = form.getPage('P_NewPage').F_DropDown0;

j.setOptions(app.getForm('F_Form1').getPage('P_NewPage').F_TempCountry.getOptions());

form.getPage('P_NewPage').F_DropDown0.setOptions(app.getForm('F_Form1').getPage('P_NewPage').F_Tem

pCountry.getOptions());

https://hclleapwiki.atlassian.net/wiki/spaces/HL/pages/393354/Dynamic+Dropdowns+in+a+Table

10

Reference

JavaScript API

https://help.hcltechsw.com/domino_volt/1.0/ref_javascript_api.html

Wiki Articles related to the table item

https://hclleapwiki.atlassian.net/wiki/spaces/HL/pages/104956133/Table+Palette

+Item

11