Visual Builder

Get Involved. Join the Conversation.

Topic

    ashwini pote
    View button to select columns to be displayed in the tableAnswered
    Topic posted August 27, 2019 by ashwini poteBlue Ribbon: 750+ Points 
    53 Views, 23 Comments
    Title:
    View button to select columns to be displayed in the table
    Summary:
    View button to select columns to be displayed in the table
    Content:

    Hi,

     

    We have a requirement of hide some of the table columns when first time data is rendered. After that, allow user to select columns from View tab/button/list to display in the table.

    In ADF, we had panel collection and by default, it was providing view menu items in the toolbar which lists all the table columns and once it is checked that column was displayed in the table. Refer : http://andrejusb.blogspot.com/2009/01/panel-collection-and-hidden-columns.html

    But I am not seeing such type of in built functionality in VBCS.

    Please help if anyone knows how to achieve same functionality in VBCS?

     

    Regards,

    Ashwini

    Best Comment

    Duncan Mills

    It looks like your DisplayColumns variable is incorrectly defined - it should be an array of objects which is not what yours seems to be. 

    Try this

    1) define a type on the page with the following name and structure

          "tableColumnDefType": {
             "headerText": "string",
             "field": "string",
             "template": "string",
             "headerTemplate": "string",
             "sortable": "string",
             "width": "number",
             "style":"string"
          }

    2) Then define your DisplayColumns variable as an array of that tableColumnDefType

    I assume that you table is setting the columns attribute = "[[$page.variables.DisplayColumns]]"

    Comment

     

    • Duncan Mills

      You can control the columns displayed by manipulating the columns attribute of the <oj-table> Although this will be defined as a JSON string value when you use the Visual Builder Property inspector you can also set the value to a variable which contains an object which defines the columns to display and in which order and with which headers etc.  So in the long run you actually have much more control than you do in the ADF world. 

      See: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojTable.html#columns

       

      • ashwini pote

        Thanks Duncan. I will try this.

        Can you please share the implemented code/example if you have tried to achieve below functionality.

        we want exact functionality as shown in the ADF blog like in toolbar it should have view item list button which has all the columns from table.

        Once table columns are selected, they should be display and deselect it should hide. We are using SDP to fetch data into the table.

         

        Regards,

        Ashwini

    • Duncan Mills

      Sorry I've not got a sample of this currently.

      • ashwini pote

        Hi Duncan,

         

        I tried to find out how to hide/show table columns by following the link you shared in the last reply.

        But i am not seeing any table column property like 'Hide' or 'Visible' to control the visibility of column. Although, i can see such properties available for inputDateTime or inputText fields.

        I am not getting how can we implement this.

        Regards,

        Ashwini

    • Duncan Mills

      If the attribute is defined in the columns array then it will be show, if it is not included then it will not be shown - it's as simple as that 

      • ashwini pote

        But can we define same array if table is based on SDP and for some columns we are using templates to display values?

         

    • Duncan Mills

      Yes

      • ashwini pote

        Hi Duncan,

         

        As you said, i have tried to assign Columns properties array from JS function. But value is not assigning to the property.

        Here is JS script :

          PageModule.prototype.showHideTableColumns = function(selectedColumns){
               console.log("selectedColumns : " + selectedColumns);
               var columnsProperties;
               columnsProperties="\{{ [{\"headerText\":\"InvoiceNumber\"}] }}";
               console.log("In HideShow : " + columnsProperties);
               return columnsProperties;
          };
            

        On multi select box value select event, we are calling one action chain. This action chain calls above function and assigns the value back to array type of page variable.

        This page variable, we have assigned to "Columns" property of table.  We can see on the screen that once value is selected, it displayes one column in the table but doesn't assign any header text or any other property to it.

        Please find attached screenshot for action chain, property setting and output window.

         

        Regards,

        Ashwini

    • Duncan Mills

      Done a quick test here and it works just fine for me - the array of column definitions that you assign to the variable that is bound to the columns attribute on the table must include the field attribute as well as the headerText attribute otherwise you'll have no data to map.  Also the type assigned for the Service or Array Data Provider that you are using to back the table must include all the possible attributes that you want to display as columns otherwise there will be no data to display in any case

      • ashwini pote

        Hi Duncan,

        Added field attribute and SDP also include all attributes that i want to display as column. But still table is not showing headerText.

        I am not able to find out whatever is going wrong. :(

        can you please check if i have defined and assigned variable in action chain correctly in attached screenshots.

        Regards,

        Ashwini

    • ashwini pote
    • Duncan Mills

      It looks like your DisplayColumns variable is incorrectly defined - it should be an array of objects which is not what yours seems to be. 

      Try this

      1) define a type on the page with the following name and structure

            "tableColumnDefType": {
               "headerText": "string",
               "field": "string",
               "template": "string",
               "headerTemplate": "string",
               "sortable": "string",
               "width": "number",
               "style":"string"
            }

      2) Then define your DisplayColumns variable as an array of that tableColumnDefType

      I assume that you table is setting the columns attribute = "[[$page.variables.DisplayColumns]]"

      • ashwini pote

        Thanks Duncin.

      • ashwini pote

        Hi Duncan,

        Once we implement setting columns display from JS, table is not showing scroll bars. we had scroll bar before and once user moves it down, pagination is implemented.

        But now, all data is loading on table at once and no navigation bars are displayed.

        This is how we have defined table.

         <oj-table summary="Invoice Search Result" scroll-policy="loadMoreOnScroll" id="oj-table-1084591017-2" data="[[$page.variables.getInvoicesListSDP]]" columns="{{ $page.variables.DisplayColumns }}" scroll-policy-options.max-count="1000" horizontal-grid-visible="enabled" vertical-grid-visible="enabled" scroll-policy-options.fetch-size="10" display="grid" class="oj-flex-item oj-sm-12 oj-md-12">

         

        Regards,

        Ashwini

      • ashwini pote

        Hi Duncan,

        One more problem I am facing, it is adding one empty column in the start of the table. No idea from where it is populating.

        Please see attached screenshots for at the time of page loading and after selecting column to be displayed from drop down.

        Regards,

        Ashwini

    • Duncan Mills

      In the action chain, after you have assigned the new column definition value drop in a Call Component Method action, set the ID to the ID of your table (should be shown in the dropdown list) then call the refresh method (no parameters needed)

    • Duncan Mills

      Well it works just fine for me - I've integrated working code into a sample that we'll be shipping shortly

    • Duncan Mills

      My apologies I did a bit more testing and found that even with refresh you sometimes get the empty column at the start of the table.  What is happing here is (I think) that you no longer have enough columns to fill the width of the table and so the spare space has to be put somewhere. 

      So to fix this you can do any of these

      1 Add a dummy column at the end of the definition array, one simply defined as {"style":"width:100%"} and that will absorb any spare space and put it at the end of the row rather than the start which is more appealing. 

      2. Adjust the column definitions as the user selects / deselects to set the widths or styles to ensure all the width is used

      3. Change the width of the container for the table

      (1) Is the simplest (2) would need a little more code but would be visually more appealing

    • Duncan Mills

      Which approach did you take?