Cognos Analytics

Cognos Analytics

Connect, learn, and share with thousands of IBM Cognos Analytics users! 

 View Only
Expand all | Collapse all

List Column grouping Custom Control

  • 1.  List Column grouping Custom Control

    Posted Mon June 15, 2020 01:17 PM
    Hi All 

    Is there any custom control to group columns in a list so that we can shorten list with large number of columns?

    GroupColumns


    Thanks for any inputs!


    ------------------------------
    Buddhi Gupta
    ------------------------------

    #CognosAnalyticswithWatson


  • 2.  RE: List Column grouping Custom Control
    Best Answer

    Posted Tue June 16, 2020 06:10 AM
      |   view attached
    Hello Buddhi,

    surround the list with a box giving it the classname ".cls1". The classname you create by clicking report > classes > add a new class by dragging cls() to the pane.

    Then place HTML-item before the list with the following content, lets you toggle some columns as needed.
    <span onclick='window.top.$("#rsIFrameManager_1").contents().find(".cls1 table td:nth-child(2n)").toggle()'>Toggle every 2nd column</span>
    -
    <span onclick='window.top.$("#rsIFrameManager_1").contents().find(".cls1 table td:nth-child(2)").toggle()'>Toggle 2nd column</span>
    -
    <span onclick='window.top.$("#rsIFrameManager_1").contents().find(".cls1 table td:nth-child(2)").toggle();
    		window.top.$("#rsIFrameManager_1").contents().find(".cls1 table td:nth-child(3)").toggle();
    		window.top.$("#rsIFrameManager_1").contents().find(".cls1 table td:nth-child(4)").toggle();'>Toggle  column 2+3+4</span>

    Use jQuery toggle() function to hide and unhide the columns. See documentation: https://api.jquery.com/toggle/

    Use the nth-child() css selector to get a complete column. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

    Attached find a simple report for your convinience. The report uses datasource + data from samples. 

    Might be a good idea to place functional code in an extension and provide the functionality in a more flexible and global way.

    Hope this helps.

    Ralf

    ------------------------------
    Ralf Roeber
    Managing Partner
    Amvara Consulting
    ------------------------------

    Attachment(s)

    txt
    simpleReport3.txt   8 KB 1 version


  • 3.  RE: List Column grouping Custom Control

    Posted Wed June 17, 2020 06:02 AM
    Does this handle grouped cells? One of the problems I was running into was dealing with cases like
    Corner Years Team
    2011 2012 Total A B Total
    Overall Total 321 321 642 3 3 6
    Region a Region Total 222 222 444 2 2 4
    Product A 123 123 123 1 1 2

    This is a fairly standard crosstab, but the vertical and horizontal merged cells wreak havoc on my attempts to find the correct cell to hide. My working idea is to have the user put an HTML item into the fact and column cells. something like <span class="yearToggle"/> then I would do something like $(.yearToggle).parent().toggle(). It would then look like this:
    Corner Years Team
    Total A B Total
    Overall Total 642 3 3 6
    Region a Region Total 444 2 2 4
    Product A 123 1 1 2

    i would need to figure out how to programmatically set the colspan for merged years cell.

    ------------------------------
    Paul Mendelson
    ------------------------------



  • 4.  RE: List Column grouping Custom Control

    Posted Tue June 16, 2020 12:05 PM
    One technique that I use frequently to condense lists is by consolidating multiple data items into a single column using a nested Table inside of a single column, for instance the customer contact info/address data can be placed in a multi-row Table with 2 columns, one with the label, the other with the values, and dropped into a single column by using the Unlock Cells feature.  It's not as attractive as the Javascript solution, but much easier to maintain.
    Hope that helps!

    ------------------------------
    Albert Valdez
    albert@intelalytics.com
    ------------------------------



  • 5.  RE: List Column grouping Custom Control

    Posted Tue June 16, 2020 03:20 PM
    Thanks Albert! With that option, probably we can use Sample Custom control available to hide all columns together. Only thing is we need to fix the width of all columns to align with Header Table.

    I am looking something similar to Expand and Collapse Custom Control @Paul Mendelson created for rows but now for columns.


    @Ralf Roeber, are you talking about putting it as Custom Control or using extension to refer to files like you shared for CSS?  Will extension approach to refer JS work in interactive mode? Thank you again for your help!

    ​​

    ------------------------------
    Buddhi Gupta
    ------------------------------



  • 6.  RE: List Column grouping Custom Control

    Posted Wed June 17, 2020 04:41 AM
    I have an idea to get vertical expand/collapse working, but it's not going to be as smooth as the row expand/collapse. The user will have to define a number of things in HTML items, and I also need to consider how to handle overlapping expand/collapse ranges.

    ------------------------------
    Paul Mendelson
    ------------------------------



  • 7.  RE: List Column grouping Custom Control

    Posted Wed June 17, 2020 02:38 PM
    Hello @Paul Mendelson,

    thanks for pointing out the grouped columns problem.

    Solution would be to set some special layout on the column you want to toggle()
    Use that "special" thing in css selector to set an attribute.
    Then use the attribute and remove the special setting.

    Details solution:
    * giving it a 'background' color like #FFFFFE to columns you want to toggle(). And #FFFFFD to others and so on.
    * You could also style something else ... like copying the class "List column body cell" to a new name ".cls1", add that to the column and select that.

    Then HTML-item
    * window.top.$("#rsIFrameManager_1").contents().find("table td[style='background-color: rgb(255, 255, 254);']").attr("amvara","col1")​
    * window.top.$("#rsIFrameManager_1").contents().find("table td[style='background-color: rgb(255, 255, 254);']").css("background-color","")
    * window.top.$("#rsIFrameManager_1").contents().find("table td[style='background-color: rgb(255, 255, 253);']").attr("amvara","col2")
    * window.top.$("#rsIFrameManager_1").contents().find("table td[style='background-color: rgb(255, 255, 253);']").css("background-color","")

    And now things are getting easy
    * window.top.$("#rsIFrameManager_1").contents().find("table td[amvara='col1']").toggle()
    * window.top.$("#rsIFrameManager_1").contents().find("table td[amvara='col2']").toggle()

    With this you could even define the column grouping right in the editor ;-) And hide column 4+5+6 with one line of js.

    Would you like a sample report and HTML-item?

    Best regards,
    Ralf



    ------------------------------
    Ralf Roeber
    Managing Partner
    Amvara Consulting
    ------------------------------



  • 8.  RE: List Column grouping Custom Control

    Posted Wed June 17, 2020 02:44 PM
    Thinking about it ... why not put a hidden element inside the TD to toggle() with a special color or classname and select the parent ;-) Let me know, if you need help on this.

    Cheers,
    Ralf

    ------------------------------
    Ralf Roeber
    Managing Partner
    Amvara Consulting
    ------------------------------



  • 9.  RE: List Column grouping Custom Control

    Posted Wed June 17, 2020 03:20 PM
      |   view attached
    Could'nt resist ... attached find a sampleReport doing so, using hidden item.


    The HTM-item contains:
    <span onclick=' foo=String.fromCharCode(39)+"cls1"+String.fromCharCode(39); window.top.$("#rsIFrameManager_1").contents().find("div[class="+foo+"]").parent().toggle()'>Toggle me</span>

    The singleQuote is a little tricky. But, it works.

    ------------------------------
    Ralf Roeber
    Managing Partner
    Amvara Consulting
    ------------------------------

    Attachment(s)



  • 10.  RE: List Column grouping Custom Control

    Posted Thu June 18, 2020 09:56 AM
    interesting! I'm going to play around with this. Thanks for it!

    ------------------------------
    Paul Mendelson
    ------------------------------



  • 11.  RE: List Column grouping Custom Control

    Posted Thu June 18, 2020 11:13 AM
    Edited by System Admin Fri January 20, 2023 04:14 PM
      |   view attached
    Hello @Paul Mendelson,

    ​had a look at the ctx values. These actually make up the coordinates of each cell.
    So, from there taking the parent and removing or adding 1 to the colspan attribute works smooth.

    I did a proof-of-concept for a nested crosstab with one level of nesting.

    The report has years on top and six value columns which we want to group in 3+3+2
    Crosstab Column Grouping

    So, removeing numbers, we have to adjust the colspan of the parent, years column. 

    Toggeling would then result in something like this:

    Howto:
    We insert an empty box with classname ".cls1", ".cls2" and ".cls3" in the grouping columns also hightlighted in different background colors.
    Actually the coloring is not neeed. I did this just for demonstration purpose.

    This looks for the surrounding cell:
    ctxArray = iframe.find("div[class=" + sq + myClass+ sq + "]").parent();

    It could be changed as written earlier in this post to the background-color-selector. This way you could avoid to put extra box in the cells.

    Once we have the surrounding cell, we read the value of the ctx attribute, which is "3:2" for the first cell.
    From here we toggle all TDs haveing ctx value "3:2" and then look at the colspan of the parent ctx="2".
    Get the colspan and +1 or -1 depending on toggle (visible or invisible)

    So at the end this comes down to calling t('cls1') or t('cls2') or t('cls3') onclick of whatever one wants.

    HTML-item to insert before crosstab:
    <img src="hal/images/blank.gif" onload='

    t = function(myClass) {
    var sq = String.fromCharCode(39);
    var iframe = window.top.$("#rsIFrameManager_1").contents();

    ctxArray = iframe.find("div[class=" + sq + myClass+ sq + "]").parent();
    window.top.$.each(ctxArray, function(i, n) {
    var ctx = n.getAttribute("ctx");

    /* Toggle this ctx */
    console.log("Toggeling:",ctx);
    var elm = iframe.find("td[ctx$=" + sq + ctx + sq + "]");
    elm.toggle();

    /* Check for parent colspans */
    parentCtxs = ctx.split(":");
    console.log("Parent Ctxs:", parentCtxs);
    var parentCtx = parentCtxs.pop();
    var selector = "td[ctx=" + sq + parentCtx + sq + "]";
    var colspan = iframe.find(selector);

    /* remove or add colspan depending of toggle situation */
    var colspanAdder = ( elm.is(":visible") ) ? 1 : -1;
    var colspanNewvalue = colspan.attr("colspan")*1;
    colspanNewvalue = colspanNewvalue + colspanAdder;
    colspan.attr("colspan", colspanNewvalue );
    });
    };' />

    <span onclick="t('cls1')">Toggle 1</span> - <span onclick="t('cls2')">Toggle 2</span> - <span onclick="t('cls3')">Toggle 3</span>

    As this is just a proof-of-concept, it only works for one level nesting.
    For further nesting one would have to recursively call a colspan calculation.

    Might do this in the future, if there is a demand.

    Attached find the reportSpecs.

    Thanks for pointing out the nesting problem. It is an interesting request. Would love to read comments on the proposed solution.

    Stay healthy.


    ------------------------------
    Ralf Roeber
    Managing Partner
    Amvara Consulting
    ------------------------------

    Attachment(s)



  • 12.  RE: List Column grouping Custom Control

    Posted Thu June 18, 2020 11:55 AM
    Hello @Ralf Roeber, can we add JS using extension ot have to add as Custom Control to work with any report?   Thank you again for your help!

    ------------------------------
    Buddhi Gupta
    ------------------------------



  • 13.  RE: List Column grouping Custom Control

    Posted Fri June 19, 2020 08:17 AM
    Edited by System Admin Fri January 20, 2023 04:34 PM
      |   view attached
    Hello @Buddhi Gupta

    attached pls find an extension as proposed.
    Also save a commit here https://github.com/raro42/cognos/blob/master/toggleGroupedCrosstab_Extension/

    It uses the "common" view. So is always loaded.
    It also loads the common.css where you can globally declare and overwrite css rules.

    Upload the extension to your portal, wait minute or two to sync in the filesystem.
    Reload the portal Shift+F5, observe that AmvaraCommonJs.js is loaded in Network TAB of Chrome (Ctrl-Shift-I).

    There are two functions "t" + "tx" inside that archive.
    There is little documentation inside the archive. So
    it is not lost, when as this post gets older.

    Use the functions t() + tx() in your report in onclick action of element:
    window.top.amvara.t('myClassname')
    or
    window.top.amvara.tx('mySelector').

    myClassname should not have a starting "." Using t function 
    you must insert empty boxes into the cells to be grouped and give them the classname.
    It must be a single classname on that element. Not two or more! The parent element, which
    is the TD with the number, is then selected for toggeling.

    mySelector should be a valid css selector selecting the fact cells to group.
    E.g "td[style='background-color: #cecece']" 

    So, adding and HTML-item with
    <span onclick=window.top.amvara.t('cls1')>Toggle Column Group 1</span>
    should do the work.

    We might think about finetuning HTML-item, adding layout elements, that also provides layouts with "+" and "-", to click on, as seen in your first screenshot.
    Ideas are welcome. As archive is on github ... feel yourself invited to contribute.

    Stay healthy. Thank you and Paul for this thread. Looking forward to your comments.

    Ralf

    ------------------------------
    Ralf Roeber
    Managing Partner
    Amvara Consulting
    ------------------------------

    Attachment(s)

    zip
    AmvaraCommonCss.zip   2 KB 1 version