How to achieve column flexibilty in ui tables (in ui5)

[veronica_09]

Hi everyone.

How to achieve column flexibilty (meaning: user should be able to  decide which column he wants to hide/unhide. Note:please refer screenshot provided) in ui table.

I am able to achieve the settings button and ,inside it ok and cancel buttons using fragment, but i dont know how to get the column names ,can anyone help me to get it

I  have written my code in view like this:

<mvc:View controllerName="testproject1.controller.TestView1"

    xmlns="sap.ui.table"

    xmlns:mvc="sap.ui.core.mvc"

    xmlns:u="sap.ui.unified"

    xmlns:c="sap.ui.core"

    xmlns:m="sap.m"

    height="100%">

    <m:Page id="_IDGenPage1"

        showHeader="false"

        enableScrolling="false"

        class="sapUiContentPadding">

        <m:content>

            <m:Button id="_IDGenButton1" text="Settings" press="onOpenDialog"/>

            <!-- <m:ScrollContainer id="_IDGenScrollContainer1"> -->

            <Table id="UITab1"

                rows="{/Acc_DOCSet}"

                paste="onPaste"

                ariaLabelledBy="title">

                <extension>

                    <m:OverflowToolbar id="_IDGenOverflowToolbar1" style="Clear">

                        <m:Title id="title" text="Products"/>

                    </m:OverflowToolbar>

                </extension>

                <columns>

                    <Column id="_IDGenColumn1" width="11rem">

                        <m:Label id="_IDGenLabel1" text="Company Code" />

                        <template>

                            <m:Text id="_IDGenText1" text="{Bukrs}" wrapping="false" />

                        </template>

                    </Column>

                    <Column id="_IDGenColumn2" width="11rem">

                        <m:Label id="_IDGenLabel2" text="Documnet Number" />

                        <template>

                            <m:Text id="_IDGenInput1" text="{Belnr}"/>

                        </template>

                    </Column>

                    <Column id="_IDGenColumn3" width="6rem" hAlign="End">

                        <m:Label id="_IDGenLabel3" text="Fiscal Year" />

                        <template>

                            <m:Label id="_IDGenLabel4" text="{Gjahr}" />

                        </template>

                    </Column>

                    <Column id="_IDGenColumn4" width="6rem" hAlign="End">

                        <m:Label id="_IDGenLabel5" text="Document Type" />

                        <template>

                            <m:Label id="_IDGenLabel6" text="{Blart}" />

                        </template>

                    </Column>

                    <Column id="_IDGeColumn2" width="11rem">

                        <m:Label id="_IDGeLabel2" text="Document Date" />

                        <template>

                            <m:Text id="_IDGeInput1" text="{Bldat}"/>

                        </template>

                    </Column>

                    <Column id="_IDGenColun2" width="11rem">

                        <m:Label id="_IDGenabel2" text="Posting Date" />

                        <template>

                            <m:Text id="_IDGnInput1" text="{Budat}"/>

                        </template>

                    </Column>

                    <Column id="_IDGenColmn2" width="11rem">

                        <m:Label id="_IDGenLbel2" text="Period" />

                        <template>

                            <m:Text id="_IDenInput1" text="{Monat}"/>

                        </template>

                    </Column>

                    <Column id="_IDGenColum2" width="11rem">

                        <m:Label id="_IDGeLbel2" text="Entered at" />

                        <template>

                            <m:Text id="_IDGennput1" text="{Cputm}"/>

                        </template>

                    </Column>

                    <Column id="_IDGenCoumn2" width="11rem">

                        <m:Label id="_IDGebel2" text="Translatn Date" />

                        <template>

                            <m:Text id="_IDnInput1" text="{Wwert}"/>

                        </template>

                    </Column>

                    <Column id="_IGenColun2" width="11rem">

                        <m:Label id="_IDGenLabe2" text="User Name" />

                        <template>

                            <m:Text id="_IDennput1" text="{Usnam}"/>

                        </template>

                    </Column>

                </columns>

            </Table>

            <!-- <m:ViewSettingsDialog id="settingsDialogCustomTab">

        <m:customTabs>

            <m:ViewSettingsCustomTab id="app-settings" icon="sap-icon://action-settings" title="Settings" >    

            </m:ViewSettingsCustomTab>

                </m:customTabs>

    </m:ViewSettingsDialog> -->

        </m:content>

    </m:Page>

</mvc:View>

code for controller:

sap.ui.define([

    "sap/ui/core/mvc/Controller",

    "sap/ui/core/Fragment",

    'sap/m/p13n/Engine',

    'sap/m/p13n/SelectionController'

],

    /**

     * @Param {typeof sap.ui.core.mvc.Controller} Controller

     */

    function (Controller,Fragment) {

        "use strict";

        return Controller.extend("testproject1.controller.TestView1", {

            onInit: function () {  

            },   

            onOpenDialog: function() {

                var oView = this.getView();

                if(!this.byId("demoDialog")) {

                    Fragment.load({

                        id: oView.getId(),

                        name:"testproject1.view.Settings",

                        type: "XML",

                        controller: this

                    })

                    .then(function (oDialog) {

                        oView.addDependent(oDialog);

                        oDialog.open();

                    });

                }

                else {

                    this.byId("demoDialog").open();

                }

            },

            onOKDialog: function (oEvent) {

                this.byId("demoDialog").close();

                var oInput = this.byId("idInput")

            },

             onCloseDialog: function (oEvent) {

                this.byId("demoDialog").close();

                var oInput = this.byId("idInput")

            }

        });

    });

code for fragment:

<core:FragmentDefinition xmlns:mvc="sap.ui.core.mvc" displayBlock="true"

xmlns:u="sap.ui.table"

xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout">

    <Dialog id="demoDialog" title="View Settings">

          <content>

             <Button id="btn" text="OK" press="onOKDialog"></Button>

             <Button id="btn1" text="Cancel" press="onCloseDialog"></Button>

          </content>

      </Dialog>  

</core:FragmentDefinition>

[leonikussmaul]

Hi Veronica, 

You could wrap your Table in a SmartTable control which already has this feature out of the box. 

In the SmartTable, define the property tableType="Table" in order to use the sap.ui.table (Grid Table). With the ignoreFromPersonalisation property, you can decide which items to hide from the personalisation Dialog. Other features like sorting, grouping, filtering of the table also come out of the box with this control. 

You can refer to this sample in the SDK.

Alternatively, if you want to go the custom way, you can find an example of how to implement the column configuration linked here. 

[veronica_09]

Hi @leonikussmaulthanks for your reply, I have gone through the demos you mentioned above already, but I want changes/additions in my code, I have used fragment , please let me know how can I make modifications to my code