... | ... | @@ -556,6 +556,59 @@ Notice the `UB.i18n('bpm_ProcessDefinition.engineType')` syntax. That is a shor |
|
|
# Reports
|
|
|
|
|
|
## Handle HTML report onclick event
|
|
|
### UB5
|
|
|
In @unitybase/ubs>=5.1 implemented new feature what allow to define a click handlers without having inline jsva script code inside HTML onclick event.
|
|
|
|
|
|
- in report template bind your variables to the data- attributes. In case of table we strongly recommend to bind repeatable values for columns to the th element, for rows - to tr element to prevent data duplication inside rendered report. Define clickable elements as <a href="#">Some tex</a>
|
|
|
```
|
|
|
<h2>Click on the country name below to open country form, or click on the owner name to open user form.</h2>
|
|
|
<table style="width: 433px; height: 36px;">
|
|
|
<thead>
|
|
|
<tr style="height: 18px;">
|
|
|
<th style="width: 364px; height: 18px;">ID(editable)</th>
|
|
|
<th style="width: 120px; height: 18px;" data-entity="cdn_country">Name</th>
|
|
|
<th style="width: 290px; height: 18px;" data-entity="uba_user">Record Owner</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody><!--{{#countries}}-->
|
|
|
<tr class="tinymce_templated" style="height: 18px;" data-iterate-over="countries">
|
|
|
<td style="width: 364px; height: 18px;" contenteditable="true">{{ID}}</td>
|
|
|
<td style="width: 120px; height: 18px;"><a href="#" data-id="{{ID}}">{{name}}</a></td>
|
|
|
<td style="width: 290px; height: 18px;"><a href="#" data-id="{{mi_owner}}">{{ownerName}}</a></td>
|
|
|
</tr>
|
|
|
<!--{{/countries}}--></tbody>
|
|
|
</table>
|
|
|
```
|
|
|
|
|
|
- in the report code block define `onReportClick` function - this function will be automatically assigned to the `onclick` event for all <a> elements in report after report is rendered
|
|
|
|
|
|
- inside `onReportClick` you can use helper function `UBS.UBReport.cellInfo(e)` as in example below
|
|
|
|
|
|
```
|
|
|
exports.reportCode = {
|
|
|
..
|
|
|
onReportClick: function (e) {
|
|
|
// prevent default action
|
|
|
e.preventDefault()
|
|
|
// get table/cell/row based on event target
|
|
|
let cellInfo = UBS.UBReport.cellInfo(e)
|
|
|
// get entity from a table header dataset (in HTML templete ht contains data-entity="entityCode"
|
|
|
let entity = cellInfo.table.rows[0].cells[cellInfo.colIndex].dataset.entity
|
|
|
// get ID from clicked <a>. (in HTML template <a> element contains data-id="id value"
|
|
|
let ID = parseInt(e.target.dataset.id, 10)
|
|
|
// to get data from clicked row
|
|
|
// let dataFromRow = cellInfo.row.dataset.yourAttrName
|
|
|
// to get data from clicked cell
|
|
|
// let cellInfo.cell.dataset.yourAttributeName
|
|
|
$App.doCommand({
|
|
|
cmdType: 'showForm',
|
|
|
entity: entity,
|
|
|
instanceID: ID
|
|
|
})
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### UB4
|
|
|
Starting from @unitybase/ubs>=4.1.19 report developer can define `onclick` event for `<a>` attributes. This feature is useful to open a form/grid/other report. There are some restrictions for such cases:
|
|
|
- applicable for HTML report only
|
|
|
- `onclick` event can be defined for `<a href="#" onclick="...">` html element only - for all other html elements report editor/viewer will remove `onclick` for security reason
|
... | ... | |