Datatables.net framework in Webreport HTML widget

Hello,

has anybody used jquery datatables.net framework in Smart UI (Smart View) webreport widget? Any experience? WR sample?

Thanks.

Find more posts tagged with

Note:

If there are Accepted Answers, those will be shown by default. You can switch to 'All Replies' by selecting the tab below.

Accepted answers

All comments

Christopher Donner

Hi Jaroslav,
I just tried this and it seems to work rather well without a lot of difficulty. I did this based on the html table report - basic template. I've included my sample WR below:

[LL_WEBREPORT_SUPPRESSERRORLOG /]
[LL_WEBREPORT_EXCLUDEHTML /]

$(document).ready(function() { document.title = "[LL_REPTAG_MYID NODEINFO:NAME /]"; $('#example').DataTable(); } );

[// display the name of the webreport node
[LL_REPTAG_MYID NODEINFO:NAME /]

[// include the function menu for this WebReport (who's dataid is in MYID).
[LL_REPTAG_MYID LLURL:FUNCTIONMENU /]

[// include the up-a-level icon.
[LL_REPTAG_MYID LLURL:UPALEVEL /]

[/* The COLNAME tags below are used so that this reportview will work with any data source. They will return the first 5 column names of the underlying data. */] [LL_REPTAG_COLNAME1 /] [LL_REPTAG_COLNAME++ /] [LL_REPTAG_COLNAME++ /] [LL_REPTAG_COLNAME++ /] [LL_REPTAG_COLNAME++ /] [LL_WEBREPORT_STARTROW /] [LL_REPTAG_1 /] [LL_REPTAG_2 /] [LL_REPTAG_3 /] [LL_REPTAG_4 /] [LL_REPTAG_5 /] [LL_WEBREPORT_ENDROW /] [LL_REPTAG_COLNAME1 /] [LL_REPTAG_COLNAME++ /] [LL_REPTAG_COLNAME++ /] [LL_REPTAG_COLNAME++ /] [LL_REPTAG_COLNAME++ /]

Ian_Whitfield

I did have one working a while ago. I could look it out if needed but it would need some changes before it works properly on the latest updates. Ideally it's best to avoid using DataTables in the Smart View if possible. It's included in the csui/lib directory but isn't really fully supported as an independent library. It's mainly there to provide some functionality to the core Smart View table. It's easy to run into problems with styles because the core csui styles can conflict with the DataTables styles.

What specific features did you want from DataTables? In the Smart View it's usually better to use the core SDK control csui/controls/table/table.view or, for WebReports, we have the webreports/controls/table.report/table.report.view if they meet your requirements. There is an example of how to use the WebReport table at https://knowledge.opentext.com/knowledge/piroot/lleswebr/v160209/lleswebr-agd/en/html/webr-html-walk-bg.htm.

Regards
Ian

Jaroslav Bambous

Thank you guys, I will check your hints. Basically, I need to present table where source would be LR or WR with columns sorting and filtering, some of cells will be hyperlinked. Export of filtered data to excel is required as well. All this is piece of cake (out-of-the-box) with webreport and datatables in classic UI. But it looks it would involve very complex development in Smart UI, SDK.

Ian_Whitfield

The TableReport control can be used to display LiveReport data in a Smart View table. It supports sorting, filtering and pagination. There is also an option to add an action button cell per row to allow the user to run a SubWebReport passing in the current row data as parameters. There isn't an easy way to have all the table data export to Excel at the moment. This would require additional customization using the Smart View SDK.

Another option is to develop the report using WebReports and DataTables in classic and then call the classic WebReport as an iFrame from an HTML WebReport widget. This has the drawbacks that it's difficult to make the content responsive if you want to load it into a perspective alongside other widgets. It's also not going to be native Smart View styling. It's an option though if you accept the limitations.

Jaroslav Bambous

Thanks Ian, sounds promising. Excel export I can workaround, somehow... But if can do paging, sorting, filtering and even add action buttons just by using webreports widget it will be great enough. I will try that and post an update.

Thanks.

Ian_Whitfield

Ok. For info, the action button is only currently documented in the SDK docs. We need to update the example i linked to before it includes an example of using the button. This forum post might help too: https://forums.opentext.com/forums/discussion/293622/tablereport-smart-ui-components-will-enable-users-to-configure-a-cell-which-calls-a-subwebreport-sd

Jaroslav Bambous

I followed the discussion you linked and I am able to add multi column filter and action button to webreport with @TABLEREPORT

Couple of questions/findings:

Can we add multiple buttons calling different SubWebreports?

This code works:
swrLaunchCell: { id: 97490, iconClass: 'csui-icon-node-livereport', hoverText: 'View Details.' }
This code does not work:
swrLaunchCell: [{ id: 97490, iconClass: 'csui-icon-node-livereport', hoverText: 'View Details.' }, { id: 97047, iconClass: 'csui-icon-node-livereport', hoverText: 'Click To...' }]
2. The search filters behave strange, applied filter cannot be deleted
3. Can we get mime type icon to the item name?

Thanks.

Image 720.png

Ian_Whitfield

1) Only one button per row can currently be added.
2) Only one column filter can be applied at a time at the moment.See the following from the SDK docs:

`columnsWithSearch` (string)
: **Optional.** The name of a column that to be enabled for searching. 
  Default = If no column is specified then there won't be a searchable column.

3) You can't currently dynamically switch the icon by node.

If you want something more custom you can perhaps build your own table control based on the core csui table using the SDK. You could use the Table Report code as a starting point and change as required. There is a chance you may hit limitations in the INSERTJSON @TABLEREPORT directive in supporting the new features you add.

Regards
Ian

Jaroslav Bambous

Thanks Ian.

1) Only one button per row can currently be added.

Ok, clear

2) Only one column filter can be applied at a time at the moment.

One filter at the moment is fine, what I was mentioning was behavior. Even if there is one filter applied, UI does not show that filter is applied, key word is not visible and cannot be removed. Only way to cancel filter is apply blank keyword.

3) You can't currently dynamically switch the icon by node.

Not sure if I understand the reply, but only thing I was looking for was just basic item icon (mime type icon) as in standard UI, just to get the same in WR widget with TABLEREPORT

Thanks.

Ian_Whitfield

If you can reproduce issues with the filter then it might be worth logging a support ticket. This works fine for me locally. See the following screenshot:

With regards to the icon, I think I see. You want to add a new column next to the Name that shows the icon. This isn't currently possible. The TableReport control handles data in a generic sense and doesn't identify the rows by type e.g these are nodes. The type icon table cell needs a collection of NodeModels before it can find the icons.

We do have a WebReport Nodestable control that has all the standard Nodestable functionality. This is in the SDK at webreports/controls/nodestablereport/nodestablereport.view. With this you will get a list of nodes based on a WebReport linked to a data source. However, this doesn't currently support adding the SWR launch button cell or adding custom data in additional columns.

Jaroslav Bambous

Thanks Ian, basically if I summarize all above the result is I cannot get datatable (as required with columns sorting and filtering, some of cells hyperlinked) in SmartUI without development/coding in SDK.

Ian_Whitfield

Fair enough. At the moment, with the WebReports table components we currently have, there are some feature gaps. The gaps you've identified are ones that we aim to add to the product in future though.