How to hide some columns in TableReportView

a.isola@reply.it · 2022-05-12T14:15:36+00:00

There was an error rendering this rich post.

a.isola@reply.it

Hello,

I have a SmartUI TableReportView used to shows some data.

I need 2 data for each row in order to invoke a subWebReport.

How to I can Hide the columns in the tableReportView?

Thanks

Alessandro

Find more posts tagged with

Comments

Jan Velas

Hi Alessandro,

I assume you are using the new "Content Intelligence -> Table Report", is that correct?

Does your widget look like the picture above?

Jan

a.isola@reply.it

Hello,

I have OTCS 16.2.11.

I use a widget HTML Web Report with the TableReportView.

this is my current result.

I would like to hide the columns SUBWORKID and WFID and do not cut the contents of the column Progressivo

Jan Velas

Thanks for the info, that's important news.

Does that also mean you're using INSERTJSON tag with @TABLEREPORT directive to get the data from the database?

If that's true, you could use the "EXCLUDECOLUMNS" configuration option to exclude the columns you don't want in the Smart UI.

Widget before hiding anything:

DataSource WebReport:

[LL_WEBREPORT_INSERTJSON @TABLEREPORT 
COLLECTIONPROCESSING:"datasource" 
EXCLUDECOLUMNS:'["RowNumber"]' /] [// <-- Here I hide a column

TableReport Wrapper WebReport:

<script>
	csui.require(['csui/lib/marionette', 'csui/utils/contexts/page/page.context', 'webreports/controls/table.report/table.report.view'], function (Marionette, PageContext, TableReportView) {


    	 var contentRegion = new Marionette.Region({el: '#content'}),
    		 pageContext   = new PageContext(),
    		 tableReportView,
    		 options;


    	 options = {
    		context: pageContext,
    		data: {
    			id: 1456980, //<-- ID to the DataSource WebReport
    			title: 'Audit Events for the Past Week',
    			header: false,
    			titleBarIcon: 'title-assignments',
    			columnsWithSearch: 'name',
    			sortBy: 'Name',
    			sortOrder: 'desc'
    		}
    	 };


    	 tableReportView = new TableReportView(options);
    	 contentRegion.show(tableReportView);
    	 pageContext.fetch();


	});
</script>


<div id="content"></div>


[LL_WEBREPORT_STARTROW /]
[LL_WEBREPORT_ENDROW /]

"RowNumber" column is hidden:

Jan

a.isola@reply.it

Hello Ján,

thanks for your suggestion but i cannot remove these column from the datasource because i need them in the subreport call.

In fact, for each line of the report I have need to invoke a sub-report with these identifiers (like a driil-down report).

Alessandro

Jan Velas

Hi Alessandro,

I think that using "EXCLUDECOLUMNS" shouldn't remove them from your data source, just from the JSON that is fed into the Smart UI widget.

How are you using your data? -> How do you call the subwebreports?

Jan

Jan Velas

However, if we assume you just need to hide the columns at the display level, it can be done:

💡If you upgraded to a newer CS version, I think there is actually a tag in the data source just for this:

[// Taken from the "Table Report Widget - Data Processing in Data Source JSON" WR template CS 21.1

3) INCLUDEHIDDENCOLUMNS:

This supports both Oscript List and JSON array data types.

INCLUDEHIDDENCOLUMNS:"{'DataID','ParentID'}"

INCLUDEHIDDENCOLUMNS:'["DataID","ParentID"]'

This would return the 'DataID' and 'ParentID' data to the client for each row but the columns wouldn't appear in the UI.

But in case you can't upgrade your Content Server and still need to achieve this, I think there is a way too.

❗️ Note: This is a hack. :-)

Controlling TableReportView columns, Smart UI way

We need to modify the Smart UI code in our wrapper WebReport.

The columns are part of the server response provided by our WebReport, together with the row data.

Every time the view is rendered, filter is applied, or row is sorted, the whole table asks the WebReport for all of the data and columns again.

Knowing this, I first tried to go the right way and use the view events. I tried to modify the columns when listening on render / collection reset / collection change, but with no luck. There always seemed to be one more event running after me, resetting the columns. It became clear to me that with my level of experience it won't be that easy.

So I gave up on this method and decided to create and inject modified tablereport.model instead -> The actual layer responsible for communicating with server and parsing the response. Because that's the place where we can modify the raw response before it gets into the machine.

I managed to create a working example.

The results looks like this:

<script>
    csui.require([
        'module',
        'csui/lib/marionette',
        'csui/lib/backbone',
        'csui/lib/underscore',
        'csui/utils/contexts/page/page.context',
        'csui/utils/contexts/factories/factory',
        'csui/utils/contexts/factories/connector',
        'webreports/models/tablereport/tablereport.model',
        'webreports/utils/contexts/factories/table.report.factory',
        'webreports/controls/table.report/table.report.view'
    ], function (module, Marionette, Backbone, _, PageContext, CollectionFactory, ConnectorFactory, TableReportCollection, TableReportCollectionFactory, TableReportView) {


        // Here we create a modified TableReportCollection, based on the original one.
        // We do this, so we can filter out the columns we don't want right when we obtain the data.
        // This sort of thing should be avoided and handled by the server
        var CustomTableReportCollection = TableReportCollection.extend({
            parse: function (response) {
                this.parseBrowsedState(response, this.options);


                // Filter columns here !
                response.columns = _.filter(response.columns, function (column) {
                    return column.column_key !== "RowNumber" && column.column_key !== "DataID"; // <-- ... && column.column_key !== "xyz" ... add your conditions
                });


                this.columns.reset(this._processColumns(response));


                return response.data;
            },
        });


        // Here we create a modified TableReport Collection Factory, so we can use our modified model instead.
        // Factories are used to create instances of model that can be shared, reused and managed through the 
        // use of the "Context" object, which takes care of holding and fetching all the factories.
        var CustomTableReportCollectionFactory = TableReportCollectionFactory.extend({


            constructor: function TableReportCollectionFactory(context, options) {
                CollectionFactory.prototype.constructor.apply(this, arguments);


                var connector = context.getObject(ConnectorFactory, options);
                options.connector = connector;
                var tablereport = this.options.tablereport || {};


                if (!(tablereport instanceof Backbone.Collection)) {
                    // Here we lose original module.config(), because our path has changed.
                    // This would usually be put out of the object to prevent this from happening
                    var config = module.config(); // <--| I would have modified it into require.moduleConfig(), but unfortunately back in CS 16.2 there was no require.moduleConfig yet.
                    //var config = require.moduleConfig("'webreports/utils/contexts/factories/table.report.factory'");
                    // module.config() loads config objects from all ...-extensions.json files pointing always at current file (by path)
                    // require.moduleConfig() from newer CS versions allows to require config that is pointing at other paths
                    tablereport = new CustomTableReportCollection(tablereport.models, _.extend({
                        connector: connector
                    }, tablereport.attributes, config.options, {
                        // Prefer refreshing the entire table to rendering one row after another.
                        autoreset: true
                    }));
                }
                this.property = tablereport;
            }
        });


        // Here we create a modified version of the TableReportView widget, so we can replace the default factory with our modifed one
        var CustomTableReportView = TableReportView.extend({
            initialize: function () {
                this.collection = this.options.collection ||
                    this.options.context.getCollection(CustomTableReportCollectionFactory, { attributes: this.options });
            }
        });


        var contentRegion = new Marionette.Region({ el: '#content' }),
            pageContext = new PageContext(),
            tableReportView,
            options;


        options = {
            context: pageContext,
            data: {
                id: 1456980, // <-- ID of the source report
                title: 'Audit Events for the Past Week',
                header: false,
                titleBarIcon: 'title-assignments',
                columnsWithSearch: 'name',
                sortBy: 'Name',
                sortOrder: 'desc'
            }
        };


        tableReportView = new CustomTableReportView(options);
        contentRegion.show(tableReportView);
        var promise = pageContext.fetch();


    });
</script>


<div id="content"></div>


[LL_WEBREPORT_STARTROW /]
[LL_WEBREPORT_ENDROW /]

The data remains, but the columns "RowNumber" and "DataID" are hidden.

Here is the data as returned by WebReport:

And here you can see that the data is all still there, in the view, and that just the columns have been filtered:

I know this isn't very straightforward, so ask away if you have any troubles.

Or if there's someone who knows anything useful, please add your voice. 🙂

Jan

Jan Velas

But most importantly:

How are you using your data? -> How do you call the subwebreports?

Depending on that, maybe you won't need the whole Smart UI hacking thing.

a.isola@reply.it

Hello Ján

with your custom table I resolved my issue,

Alessandro

a.isola@reply.it

Hello,

just for information.

I call the subreport using the swrLaunchCell

I use a livereport that extract the DataIDs of the sub-report and JSON data WebReport from the nicknames, that are parameters of my TableReport view

You can see my Options configuration.

options = {

context: pageContext,

data: {

id: [LL_reptag_%JSONDataID show /],

sortBy: 'DATEINITIATED',

sortOrder: 'desc',

columnsWithSearch: 'SEGUEFATTURA',

titleBarIcon: 'title-assignments',

title: 'Tutte le RDP online in corso',

header: false,

swrLaunchCell: {

id: [LL_reptag_%MySubReport show /],

iconClass: 'assignment-workflow',

hoverText: 'Visualizza le proprietà del WorkFlow.'

parameters: [

{

name: 'WFID',

value: 'WFID'

{

name: 'SUBWORKID',

value: 'SUBWORKID'

}

]

}

};

bharath_ot1

Jan Velas

I am very new to smart view webreports, looking to create a report for the active workflows where users can have a form kind of place where they can enter or filter the results with the results being in the same page or it can be in the next page after they click some button too, Not able to get any good examples on how to build the reports for smart view, can you please point me to some documentation or some example from where i can learn basics in building a interactive report